前端之：重绘与回流

[Mardanjan]

回流和重绘

• 回流和重绘我经常听到（刷面试题的时候就有），但是在我的脑海里对重绘有一丁点的印象，这也是自己根据重绘这个单词的理解来想出来的，现在花点时间理解一下这两个好东西

浏览器的渲染过程

• 1. 解析html，生成dom树，解析css生成cssom树
• 2. 将dom树和cssom树结合，生成渲染树
• 3. layout（回流）：根据生成的渲染树，进行回流（Layout），得到节点的几何信息（位置，大小）
• 4. Painting（重绘）：根据渲染树以及回流得到的几何信息，得到节点的绝对像素
• 5. display：将像素发送给显卡，展示在页面上

生成渲染树

• 从dom树的根节点开始遍历每一个可见节点
• 对于每一个节点，找到css样式表中对应的规则，并应用它们
• 根据每个可见节点以及其对应的样式，组合生成渲染树

  不可见的节点：

• 一些不会渲染输出的节点，比如script，meta，link等
• 一些通过css进行隐藏的节点，比如display：none，visibility和opacity隐藏的节点还是会显示在渲染树上面的
• 渲染树只包含可见的节点

回流

• 前面我们通过构造渲染树，我们将可见dom节点以及它对应的样式结合起来，可是我们还需要计算他们在设备视口内的确切的位置和大小，这个计算就是回流

重绘

• 最终，我们通过构造渲染树和回流阶段，我们知道了哪些节点是可见的，以及可见节点的样式和具体的几何信息（位置和大小），那么我们就可以将渲染树的每个节点转换为屏幕上的实际像素，这个阶段就叫做重绘节点。

何时会发生重绘

• 回流这一阶段主要是计算节点的位置和几何信息，那么当前页面布局和几何信息发生变化的时候就需要回流，比如以下情况：
• 添加或删除可见的dom元素
• 元素的位置发生变化
• 元素的尺寸发生变化
• 内容发生变化，比如文本变化或图片被另一个不同尺寸的图片所代替
• 页面一开始渲染的时候
• 浏览器窗口尺寸变化，因为回流是根据视口的大小计算元素的位置和大小的
• 回流一定会触发重绘，而重绘不一定触发回流
• 根据改变的范围和程度，渲染树中或大或小的部分需要重新计算，有些改变会触发整个页面的回流，比如出现滚动条或者修改了根节点

浏览器的优化机制

• 现代浏览器都是很聪明的，由于每次回流都会造成额外的计算消耗，因此大多数浏览器会通过队列化修改并批量执行来优化回流过程。浏览器会将修改操作放入到队列里，直到过了一段时间或者操作达到了一个阀值，才会清空队列，但是，当你获取布局信息的操作的时候，会强制队列刷新，比如当你访问以下属性或者使用以下方法：
• offsetTop、offsetLeft、offsetWidth、offsetHeight
• scrollTop、scrollLeft、scrollWidth、scrollHeight
• clientTop、clientLeft、clientWidth、clientHeight
• getComputedStyle()
• getBoundingClientRect
• 以上属性和方法都需要返回最新的布局信息，因此浏览器不得不清空队列，触发回流重绘来返回正确值。因此，我们在修改样式的时候，最好避免使用上面列出的属性，他们都会刷新渲染队列，如果要使用它们，最好将值缓存起来。

减少回流和重绘

最小化回流和重绘

• 由于重绘和回流的代价比较昂贵，因此最好就是可以减少它们的发生次数。为了减少发生次数，我们可以合并多次对dom和样式的修改，然后一次处理掉

批量修改DOM

• 使元素脱离文档流
• 对其进行多次修改
• 将元素带回文档中
• 第一步和第三步可能会引起回流，但是经过第一步之后，对dom的所有修改都不会引起回流，因为它已经不在渲染树上了
• 有三种方法可以让dom脱离文档流：
• 隐藏元素，应用修改，重新显示
• 使用文档片段，在当前dom之外构建一个子树，再把它拷贝会文档
• 将原始元素拷贝到一个脱离文档的节点中，修改节点后，再替换原始的元素
• 隐藏元素----修改----显示

[Mardanjan]

css加载会阻塞操作

页面的渲染过程： 解析DOM - 解析CSS - 生成render树

• 所以css加载不会阻塞解析dom
• 所以css加载会阻塞dom树的渲染
• css加载会阻塞后面js语句的执行

  修改css文件的位置

• 放在head：css文件不会阻塞dom树的解析，会阻塞dom树的渲染
• 放在body：css文件不仅会阻塞dom树的解析，还会阻塞dom树的渲染

  css放在body标签尾部时，domtree构建完成之后便开始构建rendertree，并计算布局渲染网页，等加载解析完css之后，开始构建cssomtree，并和domtree重新构建rendertree，重新计算布局渲染网页

[Mardanjan]

为什么外链css放在头部

• 首先整个页面展示给用户的会经过html的解析与渲染，而外链css无论放在html的任何位置都不会影响html的解析，但是会影响html的渲染。
• 如果将css放在尾部，html的内容可以第一时间显示出来，但是会阻塞html行内css的渲染
• 浏览器的这个策略很明智，如果没有这个策略，页面首先会呈现出一个行内css样式，待css下载完毕之后突然变了一个模样，用户体验会比较差，而且渲染是又成本的。
• 如果css放在头部，css的下载解析是可以和html解析同步进行的，放到尾部，需要花费额外的时间来解析css，并且浏览器会先渲染出一个没有样式的页面，等css加载完之后会再渲染成一个有样式的页面，页面会出现明显的闪动的现象。

为什么script放在尾部？

• 因为当浏览器解析到script的时候，就会立即下载执行，中断html的解析过程，如果外部脚本加载时间很长（比如一直无法完成下载），就会造成网页长时间失去响应，浏览器就会呈现‘假死’状态，这被称为‘阻塞效应’

• 具体的过程：

  1. 浏览器一遍下载html网页，一遍开始解析
  2. 解析过程中，发现script标签
  3. 暂停解析，网页的渲染的控制权交给JavaScript引擎
  4. 如果script标签引用了外部脚本，就下载该脚本，否则就直接执行
  5. 执行完毕，控制权交还给渲染引擎，恢复往下解析html网页