前端优化 10s 到 100ms 是如何做到的？

发表时间：2021-1-5

发布人：葵宇科技

浏览次数：40

Open signal 官方提供了2019年2月份统计的全世界4G网络覆盖率和通信速率的统计分布图如下，在目前移动互联网的浪潮下，我们要利用好用户终端设备的每个字节的流量。

页面性能和体验优化并不是一蹴而就的，需要不断的研究、跟踪，发现问题，解决问题。但是我们可以在一开始编写业务代码的时候就做的更好，做到极致。

加载渲染链路优化之道

从访问 URL 到页面呈现，整个链路可以做优化的思路。

幸运的是，W3C推荐的Navigation Timing标准中所定义的核心的页面性能数据，它包含了从上个页面销毁到跳转到当前页面加载完成每个阶段所消耗的时间。在canIuse上查到的兼容性也很好：

利用这个接口可以很方便的帮助我们排查链路问题。在Navigation Timing标准中介绍到这个API主要包含两个接口：PerformanceTiming和PerformanceNavigation，这两个接口由浏览器进行实现和维护，当浏览器创建页面的时候就会把接口定义的相关数据挂载到window.performance.timing和window.performance.navigation这两个属性上。我们可以打开一个网页看一下：

我们把这两个图对比一下，就可以很容易的排查出页面的加载链路问题。

静态资源链路

打开页面的第一步是请求页面的html，这里面涉及TTFB这个综合指标。同时如果有必要我们也可以统计DNS时间和TCP时间。

DNS时间：主要是根据请求域名查询到对应主机IP的时间。这个和DNS服务器有关系，也可能和本地缓存有关，如果这个很慢，可以找服务商排查下问题。

TCP时间：TCP 是承接 HTTP 协议的下层协议。主要是路由到主机 IP，并建立 TCP 链接的时间。这个时间反应了服务器到用户客户端之间链路是否通畅，网络是否通畅。

请求完HTML之后，就开始解析 HTML 代码，按照从上至下、自然顺序解析，解析内联 CSS代码或者加载外链CSS脚本，解析内联 Javascript 脚本，或者加载外链 Javascript 脚本。由于浏览器是单线程的，这些 CSS 和 Javascript 脚本很可能就会造成页面卡顿。

加载

CDN是内容分发网络，主要用于缓存静态资源。CDN服务商一般会在全国各地部署服务，而且带宽很大，这样访问CDN的资源时就可以有较短的路由路径，而且带宽也比较大，访问比较快。

解析渲染

加载完JS和CSS之后，浏览器开始解析执行。Chrome的渲染流程是这样的：

为了让浏览器更快的解析渲染，我们需要考虑这几点：

CSS 嵌套层级不要太深，不超过3级，避免在最内层使用通配选择器。
JS 脚本不要太复杂，考虑轻量化架构，降低 JS 复杂性，减少解析时间，尽量不要引用复杂的第三方脚本。
按需加载模块，按需打包，首页仅仅加载和执行和首屏相关的脚本。其他脚本延迟加载执行。
考虑依赖的第三方模块是不是必须，需不需要精简。
打包优化，code split 和 tree shaken。常用webpack和rollup的优化。
用户交互相关事件绑定（比如页面scroll，用户左右滑动等），添加参数{passive:true}，减少浏览器事件等待。因为这些事件属于可阻止事件，浏览器不知道用户会不会阻止，所以需要等待js执行，然后再做响应。添加passive参数，就告诉浏览器不用等待了。
iOS8 以后的 iOS 支持wkwebview，但是很多 App 之前用的还是 uiwebview，建议转换成wkwebview，获得性能的提升（UIwebview在执行 JS 时会阻塞 UI渲染进程，WKwebview不会）。