reflow（回流）与repaint（重绘） #1
Description
reflow（回流）与repaint（重绘）
今天接触到两个新的知识点——reflow（回流）与repaint（重绘）
-
1、它们出现在什么地方？
-
2、reflow与repaint的关系
-
3、哪些改变会引起reflow？
-
4、哪些改变会引起repaint？
-
5、怎样避免（减少）reflow？
-
6、参考文献
1. 它们出现在什么地方？
我们写出的页面代码（包括html、css、javascript文件）在被浏览器解析时，主要经过了4个阶段：
(1) 生成DOM树 ——解析HTML文档，转换树中的html标签或js生成的标签到DOM节点。
(2) 构建render（渲染）树——解析CSS（包括外部CSS文件和样式元素以及js生成的样式），根据CSS选择器计算出节点的样式，创建渲染树。
(3) 布局渲染树——从根节点递归调用，计算每一个元素的大小、位置等，给每个节点所应该出现在屏幕上的精确坐标。
(4) 绘制渲染树——遍历渲染树，每个节点将使用UI后端层来绘制。
reflow和repaint就出现在第(3)和(4)阶段
reflow（回流）：当我们页面元素所进行的操作涉及到页面布局的时候，浏览器就会对页面进行重建，此时浏览器的这个重建就叫做reflow（回流）。
repaint（重绘）：当我们页面元素所进行的操作仅涉及到元素的外观、风格而不涉及到页面布局的时候，浏览器仅会对页面进行重新渲染，此时浏览器的这个重新渲染过程就叫做repaint（重绘）。
2. reflow与repaint的关系
把页面比作一栋楼，reflow（回流）就相当于推到重建，repaint（重绘）则相当于对楼房重新装饰一下。因此，页面的reflow（回流）代价就大于repaint（重绘），页面的reflow（回流）很容易触发。
reflow（回流）一定伴随着repaint（重绘），而repaint（重绘）可以单独存在。
3. 哪些改变会引起reflow？
(1) 页面DOM结构变化，比如移动、增加、删除、修改DOM结点；
(2) 获取页面结点属性，比如offsetTop、offsetLeft、offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight、width、height、getComputedStyle()、IE的currentStyle；
(3) 修改页面中的内容，比如在<input>中输入内容；
(4) 修改结点的css样式（设计到布局的样式），比如修改padding、margin、border、dislay:none、font-size、background值；
(5) 改变结点的className属性；
(6) 增加或删除样式表文件；
(7) 修改网页的默认字体；
(8) 页面中的动画效果；
(9) 滚动条滚动，比如scroll；
(10) window的resize；
(11) 改变字体；
(12) 激活伪类；
4. 哪些改变会引起repaint？
修改结点的颜色，修改元素的visibility:hidden;。
5. 怎样避免（减少）reflow？
(1) 避免在document上直接进行频繁的DOM操作；
(2) 避免频繁的获取节点尺寸，可以使用标量缓存节点尺寸；
(3) 集中修改样式，避免逐项更改样式；
(4) 将元素的position为absolute或fixed（设置动画效果时可选用）；
(5) 避免使用table布局，table布局会触发更多的reflow；
6.参考文献
(3) Repaint 、Reflow 的基本认识和优化 (2)
(6) javascript性能优化-repaint和reflow
(7) reflow 和 repaint