浏览器的重排和回流

浏览器的重排和回流

我们如果想了解浏览器的重绘和回流，首先要了解浏览器的渲染过程

接触到vue之后，就会有很多关于重绘和回流的情况。详细了解可以做到优化性能。

浏览器的构成

总所周知浏览器的主要是由

• 用户界面
• 浏览器引擎
• 渲染引擎(内核)
• js 引擎

我们常说的内核就是渲染内核，原本内核是指渲染引擎和js引擎，随着js引擎的越开独立，现在的内核专指渲染内核。

下边是常见的渲染内核：

• Chrome(谷歌): webkit(苹果内核),后单独采用了webkit的分支之一blink，类似脱胎于unix的linux？

• Firefox(火狐) ：gecko

• IE：Trident引擎(懂得都懂)

• Opera：Presto引擎，后和chrome一同拥抱blink

• Safari：webkit引擎

js引擎

• chrome: v8引擎

• IE:Internet Explorer 9、Internet Explorer 10、Internet Explorer 11、Microsoft Edge 的js引擎是Chakra

• 老版本IE使用Jscript引擎

• Firefox：SpiderMonkey

• Opera：Carakan

• Safari：SquirrelFish系列引擎

浏览器渲染的过程

1. 浏览器把所有的html解析成dom树，每个标签都是节点，根节点是document对象，dom包含所有的节点，包括切不局限于可见的标签和js动态生成的标签和隐藏标签。
2. 把所有的css样式解析掉，把该渲染引擎不能识别的去掉
3. dom树和样式树结合呈现一个完整的渲染树，在该树的每个节点都有自己的样式，但是该树没有隐藏的节点（重点）。但是包含visibility: hidden样式的节点因为渲染的由他的位置。

重排和回流的概念

1. 当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流。每个页面至少需要一次回流，就是在页面第一次加载的时候。

2. . 当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。

注：简单的说，重排负责元素的几何属性更新，重绘负责元素的样式更新，回流必将引起重绘，而重绘不一定会引起回流。

什么情况会发生重排、回流

• 页面的初次渲染必定会发生不少于一次的重绘

• 改变了页面的布局，会引发重绘。比如：

  1. 添加或删除可见的DOM元素
  2. 元素位置改变
  3. 元素本身的尺寸发生改变
  4. 内容改变
  5. 页面渲染器初始化
  6. 浏览器窗口大小发生改变

在之前的浏览器分别设置两次宽高会导致页面重绘两次

var box = document.querySelector('.box');
box.style.width = '200px';
box.style.background = 'red';
box.style.height = '300px';

查了文档和资料，为了解决在进行DOM操作时导致多次重排，引入了虚拟DOM会，如果进行了多次DOM操作，会一一查找依赖，然后把DOM操作的会一次性进行渲染，而不是遇见一次重新渲染一次，减少了无用的计算量，优化性能。用形象的话说就是，先把我们的DOM操作只在js对象中进行更改，执行临近结束，把js对象映射成DOM节点，用浏览器进行重绘，重新排版。

但是注意几个DOM操作可能会导致重排：

1. offsetTop
2. offsetLeft
3. scrollTop
4. scrollLeft
5. clientTop
6. clientLeft

如何减少重排

当然为了避免最糟糕的事情，可能虚拟DOM没有生效或者其他原因，独立地对一个DOM元素进行操作，会导致进行多次重绘，解决办法很多：

1. 那么我们可以把多次dom操作进行整合到一个操作当中。

var el = document.querySelector('.el');
el.style.borderLeft = '1px';
el.style.borderRight = '2px';
el.style.padding = '5px';

优化后↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
var el = document.querySelector('.el');
el.style.cssText = 'border-left: 1px; border-right: 2px; padding: 5px';

2. 直接切换类名

.active {
    padding: 5px;
    border-left: 1px;
    border-right: 2px;
}
// javascript
var el = document.querySelector('.el');
el.className = 'active';

3. 批量修改DOM
   • 隐藏元素，进行修改后，然后再显示该元素
   • 使用文档片段创建一个子树，然后再拷贝到文档中
   • 将原始元素拷贝到一个独立的节点中，操作这个节点，然后覆盖原始元素

我们优化性能，肯定先从减少重排开始，因为重排更加占用资源。
参考了 https://www.cnblogs.com/soyxiaobi/p/9963019.html