WEB 前端性能优化实战

网站的速度是关系用户体验的最重要因素之一，谁都会愿意得到快速的反馈，等待是一件让人烦躁的事情。所以性能优化对于网站来说是非常重要的的事情，它带来的好处不用解释。

跑车和轿车之间的较量

问题：如果跑车是轿车速度的两倍，是跑车快还是轿车快？

• 比赛1：从起点到终点的比赛：毫无疑问跑车肯定先到达终点，秒杀轿车；

• 比赛2：将 4 个人从起点运到终点：跑车此时就比较尴尬，因为只能带 1 位乘客，而轿车可以一次带 4 位乘客，显然跑车要来回好几趟，而轿车只需要 1 趟，明显轿车的效率更高。

所以性能的优化有两种：一种是快，体现在战术上，通过极致的优化算法达到目的；一种是高效，体现在战略上，通过合理的安排资源达到目的。快就是竞技赛强者胜；而高效是团体赛谋者胜；接下来我们会通过这两个方面对 WEB 前端做一次性能优化之旅。

浏览器请求整个页面的过程

前端性能优化，首先要搞清楚浏览器页面请求的整个过程，这样我们才能很好的解决问题。

h5-performance.png

• navigationStart：准备加载新页面；

• unloadEventStart：开始卸载前一个页面；

• unloadEventEnd：页面卸载完成；

• redirectStart：开始重定型；

• redirectEnd：重定向完成；

• fetchStart：开始获取页面；

• domainLookupStart：开始 DNS 解析；

• domainLookupEnd：DNS 解析完成；

• connectStart：开始建立连接；

• connectEnd：建立连接完成；

• secureConnectionStart：开始建立 SSL 连接；

• requestStart：开始请求页面文档；

• responseStart：开始返回页面文档；

• responseEnd：返回页面文档完成；

• domLoading：当前页面开始解析；（domReady 白屏时间）

• domInteractive：页面解析完成，还没有开始加载资源（样式、脚本、图片）；

• domContentLoadedEventStart：页面解析完成，开始加载资源（样式、脚本、图片），开始运行脚本（同步的脚本）；

• domContentLoadedEventEnd：脚本运行完成（同步的脚本下载完成，首屏时间）

• domComplete：资源（图片等）加载完成

• loadEventStart：触发 load 事件的开始时间（onload）

• loadEventEnd：触发 load 事件的结束时间

WEB 性能指标

• 白屏时间（domLoading）：

  • HTML

• 首屏时间（domContentLoadedEventEnd）：

  • 样式

  • 脚本（核心脚本）

• 页面加载完成（domComplete）：

  • 图片

  • 样式

• 所有资源加载完成（loadEventStart）：

  • 样式

  • 脚本（最底部脚本，通常是统计脚本）

  • 图片

  • iFrame（我们没有）

性能优化准则

前人已经给我们留下了很多 WEB 性能优化的准则，我们一一列举出来（来自雅虎 YSlow 团队对 Web 性能的总结）：

• [术]减重传输

  • 使用小 favicon.ico 文件

  • 减少 Cookie 大小

  • 静态资源文件使用无 Cookie 的域

  • 精简 JavaScript 和 CSS

  • 移除重复的脚本

  • 使用 Gzip 压缩

• [略]打包传输

  • 尽可能减少 HTTP 请求次数，合并 JavaScript 和 CSS

  • IconFont

• [略]合理的加载顺序

  • 在 HTML 文件顶部放置样式表

  • 在 HTML 文件底部放置 JavaScript 脚本

  • 图片按需加载

• [术]利用缓存

  • 使用外部 JavaScript 和 CSS 外部文件

  • 加入 Expires 或 Cache-Control Header

  • 配置 ETag

  • 缓存 AJAX

  • 使用 GET 完成 AJAX 请求

• [术]网络层

  • 使用 CDN

我们已经完成的优化

我们的 WEB 框架本身就完成了一些性能上的优化：

• 构建工具

  • 压缩合并静态文件

  • 生成小的 favicon.ico 文件

  • 合理的动态引用 JavaScript

  • 样式在前面，JavaScript 在后面

  • 自动拆分静态资源成为外部资源

• Node & Nginx

  • Gzip

  • Expires 和 Cache-Control Header

  • ETag

问题在哪儿？

为了看清楚慢到底在哪儿，通过一个浏览器来调试这种方式是不科学的，我们需要更多用户的数据分析数据，我们在网站中植入了性能收集的代码（听云），每个用户的性能都可以统计到，这样才能找到真正慢在哪儿。

我们分析了所有慢的网页，发现了网站慢的普片原因：图片加载太慢！

解决方案

• 站内图片

  • 保证不影响视觉的情况下，压缩大小

  • 小图片 Base64

  • icon 采用 iconfont 将图标文件一次性输出

• 站外图片

  • 采用按需加载

  • 分享二维码

• 组件中的图片

  • 整个组件按需加载

• 站外脚本

  • ABTesting

• 快速显示 Dom

优化完的结果

优化完了我们不能说就结束了，我们需要看最终结果是不是好的，是否是真的达到了我们的目的，通过数据可以验证我们的方案是否成功，如果不成功到底错在哪里，我们需要如何改进。