浏览器渲染页面的原理、回流、重绘

4.递归查询：如果以上步骤还找不到，则ISP的DNS服务器就会进行递归查询，所谓递归查询就是如果主机所询问的本地域名服务器不知道被查询域名的IP地址，那么本地域名服务器就以DNS客户的身份，向其他根域名服务器继续发出查询请求报文，而不是让该主机自己进行下一步查询。（本地域名服务器地址是通过DHPC协议获取地址，DHPC是负责分配IP地址的）

5.迭代查询：本地域名服务器采用迭代查询，它先向一个根域名服务器查询。本地域名服务器向根域名服务器的查询一般都是采用迭代查询。所谓迭代查询就是当根域名服务器收到本地域名服务器发出的查询请求报文后，要么告诉本地域名服务器下一步应该查询哪一个域名服务器，然后本地域名服务器自己进行后续的查询。（而不是替代本地域名服务器进行后续查询）。

本例子中：根域名服务器告诉本地域名服务器，下一次应查询的顶级域名服务器dns.net的IP地址。本地域名服务器向顶级域名服务器dns.net进行查询。顶级域名服务器dns.net告诉本地域名服务器，下一次应查询的权限域名服务器dns.csdn.net的IP地址。本地域名服务器向权限域名服务器dns.csdn.net进行查询。权限域名服务器dns.csdn.net告诉本地域名服务器，所查询的主机www.csdn.net的IP地址。本地域名服务器最后把结果告诉主机。

第三步：浏览器与目标服务器建立TCP连接

1. 主机浏览器通过DNS解析得到了目标服务器的IP地址后，与服务器建立TCP连接。

2. TCP3次握手连接：浏览器所在的客户机向服务器发出连接请求报文（SYN标志为1）；服务器接收报文后，同意建立连接，向客户机发出确认报文（SYN，ACK标志位均为1）；客户机接收到确认报文后，再次向服务器发出报文，确认已接收到确认报文；此处客户机与服务器之间的TCP连接建立完成，开始通信。

第四步：浏览器通过http协议发送请求

浏览器向主机发起一个HTTP-GET方法报文请求。请求中包含访问的URL，也就是http://www.csdn.com/ ，KeepAlive，长连接，还有User-Agent用户浏览器操作系统信息，编码等。值得一提的是Accep-Encoding和Cookies项。Accept-Encoding一般采用gzip，压缩之后传输html文件。Cookies如果是首次访问，会提示服务器建立用户缓存信息，如果不是，可以利用Cookies对应键值，找到相应缓存，缓存里面存放着用户名，密码和一些用户设置项。

第五步：某些服务会做永久重定向响应

对于大型网站存在多个主机站点，了负载均衡或者导入流量，提高SEO排名，往往不会直接返回请求页面，而是重定向。返回的状态码就不是200OK，而是301,302以3开头的重定向码，浏览器在获取了重定向响应后，在响应报文中Location项找到重定向地址，浏览器重新第一步访问即可。

重定向的作用：重定向是为了负载均衡或者导入流量，提高SEO排名。利用一个前端服务器接受请求，然后负载到不同的主机上，可以大大提高站点的业务并发处理能力；重定向也可将多个域名的访问，集中到一个站点；由于baidu.com，www.baidu.com会被搜索引擎认为是两个网站，照成每个的链接数都会减少从而降低排名，永久重定向会将两个地址关联起来，搜索引擎会认为是同一个网站，从而提高排名。

第六步：浏览器跟踪重定向地址

当浏览器知道了重定向后最终的访问地址之后，重新发送一个http请求，发送内容同上。

第七步：服务器处理请求

服务器接收到获取请求，然后处理并返回一个响应。

第八步：服务器发出一个HTML响应

返回状态码200 OK，表示服务器可以响应请求，返回报文，由于在报头中Content-type为“text/html”，浏览器以HTML形式呈现，而不是下载文件。

第九步：释放TCP连接

1. 浏览器所在主机向服务器发出连接释放报文，然后停止发送数据；

2. 服务器接收到释放报文后发出确认报文，然后将服务器上未传送完的数据发送完；

3. 服务器数据传输完毕后，向客户机发送连接释放报文；

4. 客户机接收到报文后，发出确认，然后等待一段时间后，释放TCP连接；

第十步：浏览器显示页面

在浏览器没有完整接受全部HTML文档时，它就已经开始显示这个页面了，浏览器接收到返回的数据包，根据浏览器的渲染机制对相应的数据进行渲染。渲染后的数据，进行相应的页面呈现和脚步的交互。

第十一步：浏览器发送获取嵌入在HTML中的其他内容

比如一些样式文件，图片url，js文件url等，浏览器会通过这些url重新发送请求，请求过程依然是HTML读取类似的过程，查询域名，发送请求，重定向等。不过这些静态文件是可以缓存到浏览器中的，有时访问这些文件不需要通过服务器，直接从缓存中取。某些网站也会使用第三方CDN进行托管这些静态文件。

2、优化方案

完整的 url 地址会触发浏览器向服务器发送HTTP请求——善用缓存，减少HTTP请求，减轻服务器压力。
<link>标签会触发浏览器发送CSS文件请求——CSS文件合并，减少HTTP请求。
<img>标签会触发浏览器发出请求——图片文件合并，减少HTTP请求。
图片占一定空间，会影响后面的布局，因此会导致重绘——给放图片的容器设置一定的尺寸，避免重绘。
<script>标签里的代码，会立即执行——放在最后面。
通过JavaScript脚本操作DOM里的元素，比如隐藏某个<div>标签，会触发浏览器对该部分的重绘——在页面初始化时尽量避免使用JavaScript控制页面的样式。

二、回流（reflow）与重绘（repaint）

1、回流（reflow）

回流：当render tree中的一部分或全部，因为元素的大小、布局、隐藏或显示等发生改变时，浏览器就会重新渲染部分DOM或全部DOM的过程，叫做回流。

2、重绘（repaint）

重绘：当元素样式改变，但不影响元素在文档流中的位置时，比如：background-color，border-color，visibility等，浏览器只会将新样式赋予元素并进行重新绘制操作。

3、何时会发生回流和重绘？

（1）、何时会发生回流？

页面一开始渲染的时候（这肯定避免不了）；
添加或删除可见的DOM元素；
元素的位置发生变化；
元素的尺寸发生变化（包括外边距、内边框、边框大小、高度和宽度等）；
内容发生变化，比如文本变化或图片被另一个不同尺寸的图片所替代；
浏览器的窗口尺寸变化（因为回流是根据视口的大小来计算元素的位置和大小的）；
获取布局信息，比如：offsetTop、scrollTop、clientTop、getBoundingClientRect以及getComputedStyle()；
设置style属性的值；

（2）、何时会发生重绘？

回流一定会触发重绘，但重绘不一定会回流。

4、避免回流与重绘

合并多次对DOM和样式的修改，然后一次处理掉。
批量修改DOM。
避免触发同步布局事件。
对于复杂动画效果,使用绝对定位让其脱离文档流。
css3硬件加速（GPU加速）。

（1）、合并多次对DOM和样式的修改，然后一次处理掉。

例如：

const el = document.getElementById('test');
el.style.padding = '5px';
el.style.borderLeft = '1px';
el.style.borderRight = '2px';

例子中，有三个样式属性被修改了，每一个都会影响元素的几何结构，引起回流。可以通过合并多次对DOM和样式的修改，然后一次处理掉，来优化代码，减少回流。

①、使用cssText

const el = document.getElementById('test');
el.style.cssText += 'border-left: 1px; border-right: 2px; padding: 5px;';

②、修改CSS的class

const el = document.getElementById('test');
el.className += ' active';

（2）、批量修改DOM

通过以下步骤批量修改DOM，减少回流重绘次数：

使元素脱离文档流
对其进行多次修改
将元素带回到文档中。

该过程的第一步和第三步可能会引起回流，但是经过第一步之后，对DOM的所有修改都不会引起回流，因为它已经不在渲染树了。

有三种方式可以让DOM脱离文档流：

隐藏元素，应用修改，重新显示；
使用文档片段(document fragment)在当前DOM之外构建一个子树，再把它拷贝回文档；
将原始元素拷贝到一个脱离文档的节点中，修改节点后，再替换原始的元素（效果不太理想，因为浏览器会使用队列来储存多次修改，进行优化，所以不推荐）。

例如：我们要执行一段批量插入节点的代码：

function appendDataToElement(appendToElement, data) {
    let li;
    for (let i = 0; i < data.length; i++) {
        li = document.createElement('li');
        li.textContent = 'text';
        appendToElement.appendChild(li);
    }
}

const ul = document.getElementById('list');
appendDataToElement(ul, data);

如果我们直接这样执行的话，由于每次循环都会插入一个新的节点，会导致浏览器回流一次。

我们可以使用这三种方式进行优化:

①、隐藏元素，应用修改，重新显示

这个会在展示和隐藏节点的时候，产生两次重绘

function appendDataToElement(appendToElement, data) {
    let li;
    for (let i = 0; i < data.length; i++) {
        li = document.createElement('li');
        li.textContent = 'text';
        appendToElement.appendChild(li);
    }
}
const ul = document.getElementById('list');
ul.style.display = 'none';
appendDataToElement(ul, data);
ul.style.display = 'block';

②、使用文档片段(document fragment)在当前DOM之外构建一个子树，再把它拷贝回文档

const ul = document.getElementById('list');
const fragment = document.createDocumentFragment();
appendDataToElement(fragment, data);
ul.appendChild(fragment);

③、将原始元素拷贝到一个脱离文档的节点中，修改节点后，再替换原始的元素。（不推荐）

const ul = document.getElementById('list');
const clone = ul.cloneNode(true);
appendDataToElement(clone, data);
ul.parentNode.replaceChild(clone, ul);

（3）、避免触发同步布局事件

上文我们说过，当我们访问元素的一些属性的时候，会导致浏览器强制清空队列，进行强制同步布局。举个例子，比如说我们想将一个p标签数组的宽度赋值为一个元素的宽度，我们可能写出这样的代码：

function initP() {
    for (let i = 0; i < paragraphs.length; i++) {
        paragraphs[i].style.width = box.offsetWidth + 'px';
    }
}

这段代码看上去是没有什么问题，可是其实会造成很大的性能问题。在每次循环的时候，都读取了box的一个offsetWidth属性值，然后利用它来更新p标签的width属性。这就导致了每一次循环的时候，浏览器都必须先使上一次循环中的样式更新操作生效，才能响应本次循环的样式读取操作。每一次循环都会强制浏览器刷新队列。我们可以优化为:

const width = box.offsetWidth;
function initP() {
    for (let i = 0; i < paragraphs.length; i++) {
        paragraphs[i].style.width = width + 'px';
    }
}

（4）、对于复杂动画效果,使用绝对定位让其脱离文档流

对于复杂动画效果，由于会经常的引起回流重绘，因此，我们可以使用绝对定位，让它脱离文档流。

（5）、css3硬件加速（GPU加速）

使用css3硬件加速，可以让transform、opacity、filters这些动画不会引起回流重绘。但是对于动画的其它属性，比如background-color这些，还是会引起回流重绘的，不过它还是可以提升这些动画的性能。

常见的触发硬件加速的css3属性：

transform
opacity
filters
Will-change

css3硬件加速的坑：
如果你为太多元素使用css3硬件加速，会导致内存占用较大，会有性能问题。
在GPU渲染字体会导致抗锯齿无效。这是因为GPU和CPU的算法不同。因此如果你不在动画结束的时候关闭硬件加速，会产生字体模糊。

weixin79893765432...

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
浏览器渲染页面的原理、回流、重绘

目录一、浏览器的渲染过程1、面试题（1）、DNS 域名解析（2）、建立 TCP 连接（3）、发送 HTTP 请求（4）、处理请求返回的 HTTP 响应（5）、页面渲染（6）、关闭 TCP 连接2、优化方案二、回流（reflow）与重绘（repaint）1、回流（reflow）2、重绘（repaint）3、何时会发生回流和重绘？（1）、何时会发生回流？（2）、何时会发生重绘？4、避免回流与重绘（1）、合并多次对DOM和样式的修改，然后一次处理
复制链接

扫一扫