浏览器的重绘，重排

　　页面卡顿时，往往是因为过多操作DOM导致的；如果引起浏览器的重绘(repaint)、重排(reflow)，则更会影响浏览器的性能，repaint、reflow会消耗很多资源；

在开发中应该尽量减少对DOM的操作，从而减少DOM元素repaint，reflow的几率；如果要了解重绘、重排，首先要了解浏览器加载文档的过程；

理解了这个过程，基本上就掌握了浏览器原理，减少DOM操作、性能优化的技术；

　　一， 浏览器加载网页的过程

　　　　1.1 浏览器下载、加载文档

　　　　1.2 浏览器解析HTML构建DOM树；解析CSS规则构建css规则树；

　　　　1.3 浏览器在解析js时，可能会修改DOM树，css规则树；

　　　　1.4 之后，浏览器根据DOM树、css规则树构建 渲染树；（在构建渲染树的过程中，css根据规则匹配HTML；同时每一个元素上都包括大小、边距、颜色等样式属性；）

　　　　1.5 最后，浏览器根据这个渲染树，将元素绘制在页面上；

　　　　

　　　　简而言之， DOM树 + CSS规则树 ===> 构建渲染树  ===>  浏览器根据渲染树，绘制在页面上；

　　　　重绘(repaint) :   页面某些部分需要重新绘制，比如某些元素修改了颜色或者背景色，元素位置、尺寸没有改变；

　　　　重排(reflow):  页面元素位置、尺寸发生变化时，浏览器需要重新计算渲染树，导致渲染树的一部分或者全部需要变化；渲染树构建好后，浏览器重新根据渲染树绘制受影响的元素；

　　　　因此，重排比重绘更影响性能；重绘不可怕，可怕的是重排reflow，因为会重新构建渲染树等；

　　二，哪些操作会导致重排？

　　　　2.1 页面初始渲染

　　　　2.2 添加、删除DOM元素

　　　　2.3 改变浏览器窗口大小

　　　　2.4 元素的位置、尺寸、内容等发生改变

　　三，如何减少重排？

　　　　3.1 将多次修改样式的操作合并成一次

var ele = document.querySelector('#btn');
ele.style.color = '#003355';
ele.style.backgroundColor = '#333333';
ele.style.fontSize = '16px'

// 合并成一次

// a.css
.btnStyle{
    color:'',
    background-color:''
    font-size:''
}
ele.className='btnStyle'

　　　　3.2 使用事件委托技术

　　　　　　使用事件委托减少对DOM的操作

　　　　3.3 一次性生成DOM节点，不要一个个添加，要一次性生成完，然后添加；

　　　　3.4 属性为display：none的元素不会添加到渲染树上；脱离文档流的元素，不会在渲染树上

　　

　　　　在面试中，经常测试的一道题目：如何实现表格的排序？

　　　　如果能够考虑到浏览器的重排、重绘，以及如何减少重排重绘，方案会更令人满意。

　　　　面试题--表格的排序

参考：

　　1.如何减少浏览器的repaint和reflow

　　2.首页卡顿，都是DOM操作惹的祸