页面性能优化

页面性能优化是前端从未停止探讨的问题，雅虎将 web 页面的优化分为 7 部分，总结了 35 条军规。这里，总结页面从输入回车到内容展现这一过程中的优化方法，主要目的是为了缩短页面的渲染时间，使页面内容尽可能快的展示出来。

 

初次加载页面，浏览器请求资源到接收到该资源之间，需要经历一段漫长的网络传输过程。

 

DNS 解析

浏览器请求一个网络资源，如 html、css、js、img等，如 baidu.com，这是域名，方便人们记忆，但机器只认 IP 地址。为了能够找到正确的服务器，就需要 DNS 解析，找到对应的 IP。当浏览器遇到一个新的域名，就需要进行一次 DNS 解析。

页面中的外部资源域名越多，需要的 DNS 解析总时间就越长。因此，外部资源的域名个数应尽可能的少。

 

根据 IP 地址请求资源

当 DNS 解析完，获取到对应的 IP 地址后，浏览器会向该服务器发送请求，建立 TCP 连接。不同浏览器对于同一域名的并发连接数量均有限制，2~8个。如果外部资源均部署在同一服务器上，当数量超过浏览器的限制时，就会造成阻塞，后面的资源需要等待前面的资源接受完后才能发送请求。也就是说，外部资源应该尽可能多的部署到不同的服务器上，但这与上文的 DNS 解析优化矛盾了。因此，需要做一个衡量，外部资源应该部署到多少个不同的服务器上。

 

TCP 连接优化

TCP 每次连接都需要经过三次握手才能建立起来，这是一个耗时的操作。

可以通过合并静态资源，如合并 css、js，使用雪碧图的方式减少外部资源请求次数，从而减少 TCP 连接次数。

（雅虎军规：避免 img 的 src 为空）src为空，浏览器还是会向服务器发送请求的。

 

资源传输

除去网络因素，资源传输所需的时长取决于该资源的大小，以及接收方与发送方的物理距离。

（雅虎军规：压缩 css、js）减少文件体积。

（雅虎军规：使用 CDN）将静态文件部署到 CND 上，减少接收方与实际发送方的距离。

 

CRP

浏览器从接收到 html 文件，到页面内容绘制出来之间同样发生了很多事情。浏览器初次绘制页面的过程称为“关键渲染路径”。

对 CRP 不熟悉的可以参看理解关键渲染路径这篇译文。

CRP 主要有 6 部分：

1、构建 DOM 树

2、构建 CSSOM 树

3、运行 js

4、创建 render 树

5、布局

6、绘制

 

构建 DOM 树

当浏览器接收到 html 文件后，开始解析文件，构建 DOM 树。（雅虎军规：减少 DOM 元素的数量）DOM 元素数量越少，html 文件体积就越小，构建 DOM 树的速度也就越快。由于 DOM 树的构建过程是一个深度遍历的过程，DOM 树结构层次不要过深能够加快遍历，其次，也是为了后续 js 能够更快的访问 DOM 。

 

构建 CSSOM 树

（雅虎军规：将样式表放在顶部）在解析 html 时，遇到外部资源浏览器会立即发送请求。尽可能快的加载样式表，构建 CSSOM 树，与 DOM 树一起创建 render 树，让页面能够逐步渲染，尽快的现实出内容。

 

运行js

（雅虎军规：将 js 放在底部）因为 js 脚本会阻塞 html 的解析，不管是内联还是外联，一般会将 js 放置在底部。

 

布局、绘制

这里会涉及到页面的回流（reflow）和重绘（repaint）。页面如果有 <img>，为它设置宽高，而不是等待 src 的图片加载完后将 img 撑开，这样能够避免页面的回流。