浏览器渲染机制
浏览器采用流式布局模型（
Flow Based Layout）。浏览器会把
HTML解析成DOM，把CSS解析成CSSOM，DOM和CSSOM合并就产生了渲染树。有了
RenderTree，我们就知道了所有节点的样式，然后计算他们在页面上的大小和位置，最后把节点绘制到页面上。由于浏览器使用 流式布局，对
RanderTree的计算通常只需要遍历一遍就可以完成，但是table及其内部元素除外，它们可能需要计算多次，通常要花三倍同等元素的事件，这也是为什么要避免使用table布局的原因之一。
重绘和重排
网页生成过程中，至少会渲染一次，随着用户的访问、操作，会不断重新渲染。
以下三种情况会导致网页重新渲染：
修改 DOM
修改样式表
用户事件：如 鼠标悬停、页面滚动、输入框键入文字、改变窗口大小等等。
重新渲染，就需要重新生成布局和重新绘制。前者叫做“重排”、后者叫做“重绘”。
重绘不一定重排，重排一定会导致重绘
网页的性能
提高网页性能，就是要降低 “重排” 和 “重绘” 的频率，尽量少触发重新渲染。
一般来说：
样式表越简单，重排和重绘就越快；
重排和重绘的 DOM 元素级别越高，重绘成本就越高；
table 元素的重排和重绘成本，要高于 div元素。
样式的写操作之后，如果有下面这些属性的读操作，都会引发浏览器立刻重新渲染。
offsetTop/offsetLeft/offsetWidth/offsetHeight
scrollTop/scrollLeft/scrollWidth/scrollHeight
clientTop/clientLeft/clientWidth/clientHeight
getComputedStyle()
从性能的角度考虑，不要吧读写操作写在一个语句中：
// bad
div.style.left = div.offsetLeft + 10 + "px";
div.style.top = div.offsetTop + 10 + "px";
// good
var left = div.offsetLeft;
var top = div.offsetTop;
div.style.left = left + 10 + "px";
div.style.top = top + 10 + "px";
关于重绘和重排优化的建议
DOM 的多个读操作要放在一起：读写操作杂糅在一起会引发多次重排，降低性能。
如果某个样式是通过重排得到的，那么最好缓存结果，避免下一次用到的时候再次重排。
通过改变 class 或者 csstext 一次性改变样式，而不是一条一条改变元素样式。
使用 Document Fragment对象，代替实际操作的 Dom树上的对象。
将元素设置为
display: none（需要一次重排和重绘），然后对这个节点进行100次操作，最后再回复显示（需要一次重排和重绘）。这样一来，就能用两次重新渲染代替 100 次操作导致的重新渲染。position 属性位 absolute 和 fixed 的元素，重排的开销会比较小，因为它的层级决定了它对其他元素的影响。
只在必要的时候，才将元素的display属性为可见，因为不可见的元素不影响重排和重绘。另外，
visibility : hidden的元素只对重绘有影响，不影响重排。使用虚拟 DOM 脚本库比如 React等。
使用
window.requestAnimationFrame()、window.requestIdleCallback()这两个方法调节重新渲染。
