HTML5+CSS3-基础05-重排&重绘

重排（Relayout/Reflow）

重排也叫回流，所谓重排，实际上是根据渲染树中每个渲染对象的信息，计算出各自渲染对象的几何信息（DOM对象的位置和尺寸大小），并将其安置在界面中的正确位置。由于浏览器渲染界面是基于流式布局模型的，也就是某一个DOM节点信息更改了，就需要对DOM结构进行重新计算，重新布局界面，

引起重排的操作有：

1.页面首次渲染。

2.浏览器窗口大小发生改变。

3.元素尺寸或位置发生改变。

4.元素内容变化（文字数量或图片大小等等）。

5.元素字体大小变化。

6.添加或者删除可见的DOM元素。

7.激活CSS伪类（例如：:hover）。

8.设置style属性

9.查询某些属性或调用某些方法。

重绘（Repainting）

重绘，就是当页面中元素样式的改变并不影响它在文档流中的位置时，例如更改了字体颜色,浏览器会将新样式赋予给元素并重新绘制的过程称。

性能优化

1. 减少DOM操作

（1）最小化DOM访问次数，尽量缓存访问DOM的样式信息，避免过度触发回流。
（2）如果在一个局部方法中需要多次访问同一个dom，则先暂存它的引用。

2. 采用更优的API

（1）用querySelectorAll()替代getElementByXX()。

（2）用事件委托来减少事件处理器的数量。

4. 减少重排

（1）避免设置大量的style属性，因为通过设置style属性改变结点样式的话，每一次设置都会触发一次reflow，所以最好是使用class属性
（2）实现元素的动画，它的position属性，最好是设为absoulte或fixed，这样不会影响其他元素的布局

5. css动画

（1）少用css表达式
（2）减少通过JavaScript代码修改元素样式，尽量使用修改class名方式操作样式或动画；

内容仅供学习参考，若有错误欢迎大家指正----WUCASE