重排(回流)和重绘

什么是重排和重绘

浏览器下载完页面所有的资源后，就要开始构建DOM树，与此同时还会构建渲染树(Render Tree)。（其实在构建渲染树之前，和DOM树同期会构建Style Tree。DOM树与Style Tree合并为渲染树）

浏览器下载完成所有的资源后，开始构建DOM树和Style树，DOM树和Style树合并为渲染树。

DOM树：表示页面的结构

渲染树：表示页面节点如何显示

一旦渲染树构建完成，就要开始绘制（paint）页面元素了。

当DOM的变化引发了元素几何属性的变化，比如改变元素的宽高，元素的位置，导致浏览器不得不重新计算元素的几何属性，并重新构建渲染树，这个过程称为“重排”。完成重排后，要将重新构建的渲染树渲染到屏幕上，这个过程就是“重绘”。

简单的说，重排负责元素的几何属性更新，重绘负责元素的样式更新,而且，重排必然带来重绘，但是重绘未必带来重排。比如，改变某个元素的背景，这个就不涉及元素的几何属性，所以只发生重绘。

重排触发机制

上面已经提到了，重排发生的根本原理就是元素的几何属性发生了改变，那么我们就从能够改变元素几何属性的角度入手

1. 添加或删除可见的DOM元素
2. 元素位置改变（外边距、position）
3. 元素本身的尺寸发生改变（内边距、边框厚度、宽高等几何属性）
4. 内容改变
5. 页面渲染器初始化
6. 浏览器窗口大小发生改变

如何进行性能优化,最小化重排和重绘

1.改变样式

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

这个例子其实和上面那个例子是一回事儿，在最糟糕的情况下，会触发浏览器三次重排。更高效的方式就是合并所有的改变一次处理。这样就只会修改DOM节点一次，比如改为使用cssText属性实现：

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

但cssText也有个缺点，会覆盖之前的样式。如

<div style="color:red;">TEST</div>

// 想给该div在添加个css属性width
div.style.cssText = "width:200px;";
// 这时虽然width应用上了，但之前的color被覆盖丢失了。因此使用cssText时应该采用叠加的方式以保留原有的样式。
function setStyle(el, strCss){
    el.style.cssText = el.style.cssText + strCss;
}

沿着这个思路，直接切换类名。没错，还有一种减少重排的方法就是切换类名，而不是使用内联样式的cssText方法。使用切换类名就变成了这样：