网站的速度是关系用户体验的最重要因素之一，谁都会愿意得到快速的反馈，等待是一件让人烦躁的事情。所以性能优化对于网站来说是非常重要的的事情，它带来的好处不用解释。
跑车和轿车之间的较量
问题：如果跑车是轿车速度的两倍，是跑车快还是轿车快？
- 比赛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
优化完的结果
优化完了我们不能说就结束了，我们需要看最终结果是不是好的，是否是真的达到了我们的目的，通过数据可以验证我们的方案是否成功，如果不成功到底错在哪里，我们需要如何改进。
