页面的重排和重绘？

思路： 网页渲染HTML文件到浏览器的过程->定义->如何优化

网页渲染HTML文件到浏览器的过程

1. HTML 文件通过HTML解析器解析生成DOM树；

2. CSS文件通过CSS解析器生成CSSOM树；

3. DOM树和CSSOM树生成渲染树（render tree）；

4. 生成布局，浏览器根据render tree进行布局，并计算各个节点的几何信息；（排列）

5. 将节点绘制到屏幕上；（绘制）

什么是重排和重绘？

重绘：元素的外观改变，如：文字颜色透明度，背景颜色等；

重排：重新生成布局，重新排列元素。分为局部范围重排和全局范围重排

局部重排：对渲染树的某个部分或者某个渲染对象进行重新布局。 如：一个dom的宽高等几何信息定死，在dom内触发了重排，就只会重排该dom内部的元素而不影响到外界。

全局重排：从根节点html对整个渲染树进行重新布局。

优化：

1. 减少重排的次数

①不要频繁的操作样式，而是统一的在变量中编辑

//bad
var top = 10;
var left = 10;
// 第一次重排
el.style.top = top + "px";  //el就是获取dom节点，详细的可看如何获取dom节点的方法
// 第二次重排
el.style.left = left + "px";
// good
el.style.cssText += ";top:" + top + "px;left:" + left + "px";
// 因为cssText会覆盖之前的样式，所以需要采用叠加的方式

②离线操作元素：

1>使用display:none。(先拿掉再操作最后显示，两次重排)

个人理解:对这个节点进行操作时，先添加display:none样式（重排第一次）；再进行一些操作；移除display:none样式（重排第二次）

2>通过document.Fragment先创建一个dom节点，对这个节点进行操作，再把这个元素添进去（重排一次）

document.createDocumentFragment(); //返回一个 documentFragment 类型的对象
//documentFragment 不是真实 DOM 树的一部分，
//它的变化不会触发 DOM 树的重新渲染，且不会导致性能等问题。

③使用fixed和 absolute将节点脱离文档流。这样子元素的重排的开销较小。

④分离读写操作

2.减小重排的范围

①尽量以局部布局的形组织HTML，使各个元素相互独立

②尽可能在底部元素上设置样式，削弱修改样式时的影响

③尽量不使用table布局

附加题：css的隐藏方式，至少说出三种，是否导致了重排？

1.display:none ; 导致重排，因为涉及到了dom的创建和销毁

2.visibility: hidden; 不会导致重排，因为这个dom节点还是存在

3.opacity:0 不会导致重排，相当于只是改变了字体颜色，只会引起重绘

4.width:0;heigth:0;overflow:hidden; 导致重排，改变了dom节点的几何信息

5.把这个元素移动到不可见区域等

6.。。。