浅谈重绘与回流

浏览器的的渲染过程

渲染过程

下面我们来说说之间的具体过程：
1，浏览器会把html解析成DOM树，DO树的构建是一个深度遍历的过程（当前节点的所有子节点遍历完成才会去构建当前节点下一个兄弟节点）
2，在构建DOM树的同时，浏览器也会把css解析成css树
3，合并DOM树和css树，生成render树。在这哥过程中，浏览器会自动忽略 head 元素，以及display属性为none的元素。
4，浏览器在拿到render树后，计算出每个节点在屏幕中的位置。这个过程就是回流的过程
5，遍历render树，并且根据css的设置元素的外观风格，这个过程就是在完成重绘的过程。

我们来看张表

表头	回流	重绘
定义	render树中的一部分或者全部因为大小边距等问题发生改变而需要重建的过程叫做回流	当元素的一部分属性发生变化，如外观背景色不会引起布局变化而需要重新渲染的过程叫做重绘

ps：

display: none与 visibility：hidden虽然都是隐藏元素。但前者是使元素从dom结构中消失，后者是dom中依然存在只是不在界面显示。因此前者为回流（需要改变dom结构），后者为重绘。

那在什么情况会发生重绘亦或是回流？

---在不同的状况下发生及发生的程度都不一样：
1.页面初始渲染

改变字体，改变元素尺寸（宽，高，内外边距，边框，改变元素位置等）
各种情况：
设置style属性的值
激活伪类，举个栗子：hover
操作class属性
css3的某些属性，
https://csstriggers.com/ 接合此处的链接更加深入了解，还有哪些属性是触发回流和重绘的

如果修改的属性不影响布局则不会发生回流。

3.改变元素内容（文本或图片等或比如用户在input框找中输入文字）
4.添加/删除可见的dom元素（注意：如果删除本身就是display：none的元素是不会发生回流的）
5.fixed定位元素，在拖动滚动条的时候会一直回流

调整窗口大小（Resizing the window）
计算offsetWidth 和 offsetHeight 属性***
***：这里我们要提到一个队列flush队列
浏览器是聪明的，当对以下属性进行操作的时候：
包括：offsetTop, offsetLeft, offsetWidth, offsetHeight, scrollTop, scrollLeft, scrollWidth. scrollHeight, clientTop, clientLeft, clientWidth, clientHeight, getComputedStyle()
currentStyle in IE.
浏览器不会马上操作他们，而是会先缓存在队列里面，有一定的时间顺序去执行这些操作，但是在这过程中我们需要去获取在该队中的属性时，浏览器为取得正确的值就会触发回流，这样就使得浏览器的优化失效了。
所以我们在多次使用这些值得时候应进行缓存。

那我们应该如何减少回流和重绘，去提高浏览器的优化的效果。

一，修改html元素中对应的class名，利用class替换样式


< script type = "text/javascript" >
  $(document).ready(function ()
  {
      var el = $('id');
      //1
      el.css('width', '200px');
      el.css('height', '200px');
      //2
      el.css({
          'width' : '200px;',
          'height' : '200px;'
      });
      //3 
      el.addClass('changeStyle');
  });

二，csstext（利用CSSText属性合并所有改变，然后一次性写入）

var s = document.body.style; 
s.padding = "2px"; // 回流+重绘
s.border = "1px solid red"; // 再一次 回流+重绘 
s.color = "blue"; // 再一次重绘
s.backgroundColor = "#ccc"; // 再一次 重绘 
s.fontSize = "14px"; // 再一次 回流+重绘 
// 添加node，再一次 回流+重绘
document.body.appendChild(document.createTextNode('abc!’));

----------------------------------------------------------------------------

// 不好的写法
var left = 1;
var top = 1;
el.style.left = left + "px";
el.style.top = top + "px";
// 比较好的写法 
el.className += " className1";
// 比较好的写法 
el.style.cssText += "; left: " + left + "px; top: " + top + "px;";

三，display:none(隐藏元素，应用修改，重新显示）

var list = document.getElementById("list");

list.style.display = 'none’;

appendDataToElement(list,data);

list.style.display = 'block';

四，cloneNode (将原始元素拷贝到一个脱离文档的节点中，修改副本，完成后在替换回去；）

var old = document.getElementById("list");

var clone = old.cloneNode(true);

appendDataToElement(clone,data);

old.parentNode.replaceChild(clone,old);

五，document.createDocumentFragment(); (使用文档片段（document fragment）在当前dom之外构建一个子树，再插回去）；

var fragment = document.createDocumentFragment();
var list = document.getElementById("list");
for (var i = 0; i < 10; i++)
{
    var _li = document.createElement("li");
    _li.onmouseover = function ()
    {
        this.style.backgroundColor = "#22b909";
        this.style.width = "120px";
        this.style.height = "50px";
    }
    _li.onmouseout = function ()
    {
        this.style.backgroundColor = "";
        this.style.width = "100px";
        this.style.height = "40px";
    }
    fragment.appendChild(_li);
}
list.appendChild(fragment);

六，使用transform

css的最终表现分为以下四步：Recalculate Style => Layout => Paint Setup and Paint => Composite Layers
其实就是查找并计算样式 => 排布 => 绘制 => 组合层。
由于transform是位于Composite Layer层，而width，left，margin等则是位于Layout层，Layout层发生改变必定导致Paint Setup and Paint => Composite Layers,
所以相对而言使用transform实现的动画效果肯定比使用改变位置的这些效果更加流畅