前端加载优化实战

做者简介：张海超 百度高级前端研发工程师
负责百度智能运维产品（Noah）、智慧机场等前端研发工做，对前端性能优化有普遍的实战经验。

干货概览

说到页面性能优化，咱们经常想到首次加载、交互响应和渲染帧率等页面性能指标。为了给用户流畅的使用体验，咱们经常针对这些指标进行优化。接下来，咱们以AIOps团队智慧机场项目为例，介绍咱们如何将首次加载时间为4000ms的页面优化至1350ms的，文章所介绍的加载优化方法具备必定参考做用，但愿能对你们有所帮助。

项目简介

智慧机场项目是一个根据实时航班，对机场机位资源进行动态分配的智能系统。其主要目的是将航班尽可能停靠在廊桥机位，增长廊桥机位使用率，减小旅客登机、下飞机时间，同时避免航班因延误等因素对机位的冲突使用，机位的分配状况-甘特图页面如图1所示：

图1  智慧机场甘特图

图中区域1表示不一样的机位和机位类型，用户能够上下滑动或者经过筛选得到不一样机位的信息；区域2为时间轴；用户能够滑动时间轴，选择不一样的时间段，同时也能够进行缩放操做，来扩大或减少查询范围；区域3为内容区，展现不一样机位在对应时间段内的航班信息，每个航班使用条状图展现，条状图颜色表示航班状态，咱们分别用几种颜色表示飞机到达、起飞、冲突、返航等属性。整个页面展现与用户交互过程当中，甘特图须要根据用户的筛选和操做实时的从后端多个接口中加载数据并进行渲染展现。

该页面与大多数大数据展现页面遇到的性能问题一致，一个是请求的接口多带来请求等待性能降低，另外一个是展现的元素多带来的渲染性能降低。在初版甘特图中，页面的平均加载时间长达4000ms，下面咱们经过通用方案和自定义方案两方面来看一看，咱们是如何将加载速度下降到1350ms的。

通用优化方案

首先，咱们对网页的整个渲染流程来分析，哪些因素会影响网页的加载速度，以及每一个阶段对应的常看法决方案分别是什么。

咱们能够将网页加载大体分为三个阶段，分别为请求阶段，资源处理阶段，以及页面渲染阶段。甘特图在其中请求耗时约1600ms，资源处理耗时约2200ms，页面渲染耗时约200ms；

1. 请求阶段主要是资源、数据请求，网络情况及数据量对该部分影响较大，主要优化手段为优化网络和对数据压缩。在请求阶段，咱们经过请求数据压缩的手段，将耗时由1600ms减小到1000ms；
2. 资源解析阶段主要是对请求下来的资源和数据进行处理，数据规模及处理方式对该部分影响较大，主要优化手段减小数据处理耗时；在资源解析阶段，咱们经过下降处理数据操做复杂度，将耗时由2200ms减小到了2100ms。
3. 渲染阶段主要是将处理后的数据渲染在页面上，频繁的重绘和重排对该部分影响较大，主要优化手段是减小重绘和重排。在此阶段咱们未作优化。

在甘特图中，咱们经过上述通用手段，将总耗时由4000ms减小到3300ms，可是加载速度仍然较慢。因此咱们又在数据请求阶段、资源处理阶段的组件初始化及可视化视图渲染计算三个方向进行优化，经过对这三个方向进行优化，咱们将耗时由3300ms减小到了1350ms，下面咱们将详细对这三方面的优化作介绍。

自定义优化方式

为了进一步下降加载时间，咱们利用性能分析工具对网页加载进行进一步分析，发现页面加载过程当中，数据请求、组件初始化及渲染计算过程耗时比较长。咱们分别对三个过程进行优化：

数据请求部分使用并行请求+请求时执行页面逻辑的方式进行加载速度优化，对于数据请求多、页面处理业务复杂的相似页面能够参考此类方法；

组件初始化部分使用延后绑定比较大的数据进行加载速度优化，对于页面须要监听比较大的双向绑定数据等相似场景能够参考此方法；

渲染计算部分使用尽可能减小图形绘制来提高渲染计算速度，对于使用ECharts绘制比较复杂的自定义图形的页面能够参考此方式；

接下来，咱们将详细解说加载速度优化的具体方案。

1. 数据请求优化

在智慧机场项目中，页面渲染须要请求用户信息、自定义展现配置等信息和数据，所以请求较多，前端采用串行请求的方式会消耗比较长的时间，所以这里采用并行发送请求的方式进行数据请求，以下：

图 2  async第三方库并发发送请求

初版甘特图页面渲染须要发送3个请求，在增长配置后，请求数增长到9个。经过并行请求的方式，页面在发送3个请求时，耗时1000ms，增长到9个请求后，串行耗时为3400ms，经过并发请求的方式，9个请求耗时下降到440ms。

但在使用async第三方库请求的过程当中，CPU只能处于等待状态。为了充分的利用CPU，咱们采用ECMAScript 6标准的async函数来对此进行改造。

有别于async第三方库使用回调函数的形式作串行处理，ES6使用await关键字等待异步函数返回Promise对象作串行处理。首先咱们基于ES6代码改写async第三方库实现：

图3  async函数异步使用await关键字

而后，咱们能够在发送请求时，先不使用await关键字，仅保存发送请求的Promise对象，在异步请求后端接口过程当中，首先进行页面初始化的渲染操做，而后再将异步请求的返回结果进行渲染处理，实现以下：

图4  改进后利用异步请求等待时间作初始化处理

经过这样的改造，咱们在并发请求多个数据的同时，利用请求的间隙，完成绘制初始化、默认配置计算、时间初始化等工做。充分利用CPU资源，进一步减小js执行耗时340ms。

经过以上优化，整个加载过程累积减小耗时900ms，页面加载时间由3300ms降至2400ms左右。

2. 组件初始化优化

智慧机场项目是采用NoahV（运维前端展示层框架，详情戳这里）开发的，该框架基于Vue实现，并采用组件化的思路进行页面元素构建。同时，甘特图的绘制是经过ECharts进行绘制的。

在甘特图界面中，用户须要实时调整时间段，得到对应时间段的航班分配状况，故在用户移动时间轴的时候，会根据选择的时间不断更新航班的分配状况，从后端得到对应时间段的航班数据，而后将请求到的数据传入页面组件。

基于Vue的双向数据绑定的特征，当数据发生变化的时候，Vue会构建监听对象去监听数据，再用ECharts重绘甘特图。以下是组件监听数据的工做流程。

图5  组件数据监听工做流程

从图5看，当数据传入的时候，为了数据和页面双向绑定，须要构造监听对象，构造监听对象所消耗的时间是根据数据复杂程度决定的。数据越复杂，构造监听对象所消耗的时间越多。

为了加快页面加载速度，咱们在首次加载数据时直接渲染图形，减小构建监听对象耗时。在渲染页面完毕后，延迟构造监听对象。流程如图6：

图6  改造组件数据工做流程

基于这样的流程优化，航班、机位、待分区航班和待分区机位数据在渲染视图前减小监听对象的构建，耗时相应的分别平均减小约230ms、210ms、167ms和151ms，累积减小耗时约800ms。页面加载耗时由2400ms下降至1600ms。

3. 渲染计算优化

前面咱们介绍了页面渲染时减小构建监听对象的过程加快页面渲染时间，接下来咱们对可视化渲染视图部分进行进一步分析。

可视化视图渲染耗时随数据量的增长而增大，咱们对视图渲染流程作进一步的分析，看哪些流程受到数据量影响较大，渲染视图计算可分为6个过程，如图7：

图7  渲染计算流程

针对上述流程，咱们分别设置不一样数据量（表一第一列）及单个甘特条包含不一样图形数目（表一第二列），而后经过分析工具查看各个阶段的耗时状况，具体如表1：

表1  数据量及每条数据图形对渲染计算各阶段影响

经过表1，咱们能够分析得出，数据量及每条数据所含图形数目对于阶段一、四、五、6（配置转换、图层刷新、图层渲染和图层合并）没有明显影响。对于阶段2（图层初始化），在只有一个图形和一条数据时，耗时较短，其余状况耗时相差不大；而对于阶段3（图形绘制计算阶段），能够明显看出，单条数据所包含图形越多，计算时间越长（表1第五列）。所以咱们在这里选择减小绘制图形数目（相似减小页面DOM节点）来减小渲染计算的耗时。首先，咱们对甘特条完整图形进行拆解，如图8左侧甘特条拆解所示：

图8  甘特条图形拆分

由图8所示，A表示发布状态、B的颜色表示进港航班状态、C的颜色表示出港航班状态，D表示播报状态，整个条状图使用4个图形绘制。

为了减小绘制图形，咱们将这4个图形合并为一个图形。首先，咱们将A、D两个图形分别和B、C进行合并，这里采用设置矩形顶角半径的方法来绘制弧度，实现如图9：

图9  利用顶角弧度替代弧形A、D

而后，咱们利用分段颜色样式将B、C两部分合并，实现如图10：

图10  利用分段颜色合并B、C

这样，咱们分别经过矩形顶角弧度设置和分段颜色设置，将A、B、C、D四个图形合并成了一个，如图8中X；

三个外框线E表示锁定状态、F表示分割状态、G表示预测状态，咱们将三个框线图形合并为一个，颜色样式一样使用上述分段颜色控制，合并后如图8中Y。

这样，咱们就将一个条形图的7个图形减小为2个。如图8中右侧图。

经过合并图形元素，平均每条数据渲染计算的时间减小了2.5ms，页面平均展现100条数据，累积减小耗时约250ms。页面加载耗时由1600ms降至1350ms左右。

总  结

对于智慧机场项目，咱们分别经过通用解决方案、数据优化、组件初始化优化及渲染计算优化，分别下降页面加载耗时700ms、900ms、800ms、250ms，累积约2650ms。页面加载耗时由4000ms下降到1350ms，耗时下降66%。有效的减小了页面渲染的时间，优化了系统的响应速度，提高了用户体验。总体上，性能优化首先是经过性能分析工具来找到性能瓶颈，再针对每项进行优化。大体会从数据请求，资源解析，数据渲染方向作优化，而后再结合选型框架的特征，进行更细粒度的优化。咱们后续将持续推出相关页面性能优化文章，各位看官请持续关注AIOps智能运维公众号~

舒适提示

若是你喜欢本文，请分享到朋友圈，想要得到更多信息，请关注咱们！
若是你有任何问题欢迎留言咨询~
若是想试用咱们的企业级运维平台NoahEE，请联系邮箱：noah_bd@baidu.com