百度SSP单页式应用性能优化实践资源-CSDN文库

38 浏览量 2021-02-02 20:36:51 上传评论收藏 368KB PDF 举报

资源推荐

资源详情

资源评论

百度百度SSP单页式应用性能优化实践单页式应用性能优化实践

针对首页和部分页面打开速度慢的问题，百度SSP前端团队对单页式应用性能进行了优化。本文将介绍其中一个性能

优化方案：基于 HTTP Chunk 的首屏数据渐进式预加载方案，该方案减少了1.2s的加载时间。同时对比其与同构渲染

方案的异同。

背景介绍

单页式应用是近几年来前端技术栈发展与落地的最典型场景，Angular、Vue、React等，这些相关的技术栈目的都是

从架构层面为单页式应用提供研发解决方案，着重解决单页式应用的研发效率。基础框架的进化也催生着关联工具链

路的发展，如 Yeoman，Grunt -> Gulp -> 各种 cli，Webpack1/2, Babel 等。

随着研发链路体系的稳定成熟，在功能上能够及时满足用户后，百度展示广告部流量端前端团队（百度SSP前端团

队）开始将精力集中关注产品的可用性层面。经过和产品，运营，用研等多个团队配合，我们走访了多位使用我们产

品的用户，产出了一份流量端产品可用性得报告。除了部分交互和产品流程设计上的问题，另一个主要问题就是用户

反馈整体的系统流畅性不错，但首页和部分页面打开极其慢，针对这块问题，我们开始了对单页式应用性能优化的探

索和实践。

本文接下来将一步一步阐述对应用首屏呈现中各个节点的拆解，并根据拆解的节点推导出我的优化思路，最终为大家

介绍我提出并尝试的第一个性能优化方案：首屏数据渐进式预加载。

首屏呈现节点分析

在进行任何的性能优化之前，我们都应该先找出系统的性能瓶颈点，从而找出最有价值的优化方向。

绝大多数的单页式应用都符合 Application Shell 架构，根据这个架构我们可以看出一个应用首屏呈现节点可以分解

为：请求入口页 -> 渲染应用外壳 -> 渲染首屏片段。我在此基础上进一步将三个节点细分如下：

即对渲染应用外壳和渲染片段这块细分为：应用资源加载，应用初始化，片段资源加载，片段初始化，片段数据加

载，片段渲染这些节点。

有了这些细分节点，再将埋点记录的真实用户数据代入：

得出我们的首屏时间为：

** T(s) = T1 + ... + T7 = 2800ms **

注：我们一般都将首屏资源一起与应用资源打包在一起，因此这里耗时认为是0。

整个 timeline 如下：

首屏数据渐进式预加载方案

根据上面的节点数据，首屏数据渐进式预加载的优化思路也得到了体现：

优化首屏数据加载节点的速度。

预先加载首屏数据，使得多个串行节点并行化。

接下来详细介绍我们的优化步骤。第1点会在第一步优化中体现，但核心思路和主要优化收益更多体现在第2点：多个

剩余7页未读，继续阅读

内容反馈

weixin_38720050

粉丝: 3
资源: 876

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip