页面性能优化是前端从未停止探讨的问题,雅虎将 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 撑开,这样能够避免页面的回流。