写在开头:这篇文章被我归入博客性能优化类别,是因为我认为如果我们要优化网站性能、提升用户体验,首要目标就是要知道用户在本地请求并加载你的网页的过程中,到底发生了什么,在此基础上我们才能更好的优化网页。
图源:知乎-张秋怡
浏览器解析并查询缓存
DNS查询
-
DNS查询顺序如下,若其中一步成功则直接跳到建立链接部分:
-
浏览器自身DNS
-
操作系统DNS
-
本地hosts文件
-
向域名服务器发送请求
-
建立链接
-
TCP三次握手(three-way handshaking)
-
发送方:SYN(synchronize)
-
接收方:SYN/ACK(acknowledgement),确认信息传达
-
发送方:ACK - 确认接收方在线可收消息,握手结束
-
Accept
-
TCP三次握手的的好处在于:发送方可以确认接收方仍然在线,不会因为白发送而浪费资源。
发送HTTP请求
-
报文首部(GET /index.html HTTP/1.1)
-
方法
-
URL
-
HTTP版本
-
-
空行(CR+LF)
-
报文主体
注意: 1.HTTP是无连接
、无状态
的,即HTTP在传输完成后就会断开(HTTP1.1以前),并且不会记录访问者的状态。
从HTTP/1.1开始才支持持久连接,即通信一次以后连接不中断。
正常来说,HTTP请求、响应方式为每请求一次就响应一次:
请求1 -> 响应1 -> 请求2 -> 响应2 -> 请求3 -> 响应3
若采用持久连接请求管线化方式:
请求1 -> 请求2 -> 请求3 -> 响应1 -> 响应2 -> 响应3
使用管线化的条件:
-
服务端需要支持管线化
-
只有GET和HEAD可以进行管线化,POST请求有所限制
-
管线化不会影响响应到来的顺序
2.关于CR(Carriage Return,回车)和LF(Line Feed,换行)
Dos和Windows采用CR/LF表示下一行 UNIX/Linux采用LF表示下一行 MAC OS系统则采用CR表示下一行
服务器发送响应
-
报文首部(HTTP/1.1 200 OK)
-
HTTP版本
-
响应状态码
-
状态码信息
-
-
空行(CR+LF)
-
报文主体
客户端收到页面,浏览器渲染页面
执行以下过程:
解析HTML
-
根据DOCTYPE来确定文档类型(最常见的就是HTML5,注意如果是HTML4的话有严格和宽松模式之分)
-
构建DOM树(根据HTML构建类似于二叉树的结构树)
-
下载资源
-
CSS - 构建CSSOM树
-
js - 一般下载后立即执行,会阻塞页面渲染
-
浏览器渲染
在聊浏览器渲染之前,我们先明确一个概念: 事实上,我们看到的页面并不是直观所见的一层图页,而是由许多DOM元素渲染层(Layers)组成的,如下图。
页面的渲染过程
所以一个的页面的渲染过程由如下几步构成:
-
构建渲染树(Render Tree): 根据DOM和CSSOM树渲染,不可见元素不被会渲染
-
布局(layout): CPU根据渲染树布局计算元素的具体位置和大小,转换成绝对像素,并且根据样式,分割成多个独立的渲染层(Layers),将每一层对应到位图中
-
绘制(Paint): GPU根据每个渲染层(Layers)的位图绘制每个点,即像素填充,并且将所以渲染层缓存,如果下次页面变动但是渲染层没变就不会触发重绘。
-
层级合成(Compositing): 顾名思义,即处理多层渲染层之间的关系,将其合成为一个完整的页面。
重绘和重排
重绘(repaint)
:
-
元素视觉表现属性被改变即触发重绘,如改变visibility,color等,不会影响到dom结构
reflow(重排)
:
-
与repaint区别就是:所有影响dom的元素布局的事件都会触发重排。同时也会触发repaint。
-
这种开销是非常昂贵的,导致性能下降是必然的,页面元素越多效果越明显。
reflow
常见情况:
-
增删改DOM节点
-
移动DOM的位置或是动画显示(所以尽量用canvas来做动画)
-
修改width、display等CSS样式
-
resize窗口或是滚动的时候
-
修改网页默认字体(不建议)
-
display:none会触发reflow和repaint,而visibility:hidden只会产生repaint
显而易见,要提高页面性能,首要目标就是减少重绘重排,具体方法包括但不限于以下几种:
-
压缩DOM深度,以免内层元素改变而导致多个外层都改变。
-
对于没用的元素,尽量设置为
display:none
,减轻绘制压力。 -
在对DOM进行大量元素操作时,我们可以使用利用DocumentFragment对象进行操作,最后再一次性装载进DOM结构中。
-
指定img的大小:由于img是内联元素,所以在加载后会改变宽高,严重的会导致整个页面重排,所以最好在渲染前就设置好其宽高,或者让其脱离文档流。
DOM渲染层(Layers)与GPU硬件加速
知道了浏览器页面的渲染合成过程后,我们不难得出一个结论:
如果我们把会发生大量重绘重排的元素提取出来,单独触发一个渲染层(Layer),就不会把其他元素一起带着重绘,这会大大提高页面性能。
那么如何触发渲染层,让GPU来加速绘制呢?最简单的方法有以下三种:
will-change: transform;will-change: opacity;transform: translateZ(0);
PS:使用Layers来触发GPU加速(硬件加速)也会带来负面影响,如电量损失过快、占用内存和GPU等。所以在使用中要注意不能滥用,在常触发重绘和重排的元素上使用即可。