前端页面的性能优化2

首先：你需要知道性能优化是什么：

从前端的角度来说，性能优化可以分为两个方向，一个是页面加载的很快，另一个是页面使用起来很流畅。因此，对性能优化的探索，我们可以分为页面加载时间跟页面运行效率两个方向来进行研究

从浏览器打开到页面渲染完成需要经历：

浏览器解析->查询缓存->dns查询->建立链接->服务器处理请求->服务器发送响应->客户端收到页面->解析HTML->构建渲染树->开始显示内容(白屏时间)->首屏内容加载完成(首屏时间)->用户可交互(DOMContentLoaded)->加载完成(load)

 

对网页的整个渲染流程进行分析，我们可以将网页加载大致分为三个阶段，分别为请求阶段，资源处理阶段，以及页面渲染阶段，我们需要知道哪些因素会影响网页的加载速度，以及每个阶段对应的常见解决方案分别是什么：

通用方案：

　　1.请求阶段主要是资源、数据请求，网络状况及数据量对该部分影响较大，主要优化手段为优化网络和对数据压缩。在请求阶段，我们通过请求数据压缩的手段，将耗时由1600ms减少到1000ms；

　　2.资源解析阶段主要是对请求下来的资源和数据进行处理，数据规模及处理方式对该部分影响较大，主要优化手段减少数据处理耗时；在资源解析阶段，我们通过降低处理数据操作复杂度，将耗时由2200ms减少到了2100ms。

　　3.渲染阶段主要是将处理后的数据渲染在页面上，频繁的重绘和重排对该部分影响较大，主要优化手段是减少重绘和重排。在此阶段我们未做优化。

优化方案：

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

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

　　3.渲染计算部分使用尽量减少图形绘制来提升渲染计算速度，对于使用ECharts绘制比较复杂的自定义图形的页面可以参考此方式；