[ JS 进阶 ] Repaint 、Reflow 的基本认识和优化 (2)

你是否是常常听师兄或一些前端前辈说不能用CSS通配符 *，CSS选择器层叠不能超过三层，CSS尽可能使用类选择器，书写HTML少使用table，结构要尽可能简单-DOM树要小....等这些忠告，之前我就大概知道使用通配符或者CSS选择器层次过多可能会下降性能，至于为何不使用table标签我一直是迷迷糊糊，也就跟着那样作了，但我认识了Repain和 Reflow以后，原来这些还真不能用太多。 ok,但愿这篇文章对你有帮助！css

1.什么是Repaint/Reflow?

好，先上一张图：浏览器解析大概的工做流程html

这张图应该能够很好理解，概括为四个步骤：前端

一、解析HTML以构建DOM树：渲染引擎开始解析HTML文档，转换树中的html标签或js生成的标签到DOM节点，它被称为 -- 内容树。
二、构建渲染树：解析CSS（包括外部CSS文件和样式元素以及js生成的样式），根据CSS选择器计算出节点的样式，建立另外一个树 —- 渲染树。
三、布局渲染树: 从根节点递归调用，计算每个元素的大小、位置等，给每一个节点所应该出如今屏幕上的精确坐标。
四、绘制渲染树: 遍历渲染树，每一个节点将使用UI后端层来绘制。web

好，咱们能够看到Repain 和 Reflow 分别出如今了第三和第四步。所以咱们给出下面的定义：后端

对于DOM结构中的各个元素都有本身的盒子（模型），这些都须要浏览器根据各类样式（浏览器的、开发人员定义的等）来计算并根据计算结果将元素放到它该出现的位置，这个过程称之为reflow；当各类盒子的位置、大小以及其余属性，例如颜色、字体大小等都肯定下来后，浏览器因而便把这些元素都按照各自的特性绘制了一遍，因而页面的内容出现了，这个过程称之为repaint。
可见这两个东东对浏览器渲染页面是很重要的啊，都是会影响性能的，所以咱们须要了解一些常见的会引发repaint和reflow的一些操做，而且应该尽可能减小以提升渲染速度。浏览器

2.引发Repain和Reflow的一些操做

Reflow 的成本比 Repaint 的成本高得多的多。DOM Tree 里的每一个结点都会有 reflow 方法，一个结点的 reflow 颇有可能致使子结点，甚至父点以及同级结点的 reflow。在一些高性能的电脑上也许还没什么，可是若是 reflow 发生在手机上，那么这个过程是很是痛苦和耗电的。
因此，下面这些动做有很大可能会是成本比较高的。布局

1. 当你增长、删除、修改 DOM 结点时，会致使 Reflow 或 Repaint。
2. 当你移动 DOM 的位置，或是搞个动画的时候。
3. 当你修改 CSS 样式的时候。
4. 当你 Resize 窗口的时候（移动端没有这个问题），或是滚动的时候。
5. 当你修改网页的默认字体时。

注：display:none 会触发 reflow，而 visibility:hidden 只会触发 repaint，由于没有发现位置变化。性能

3.如何优化？

Reflow是不可避免的，只能将Reflow对性能的影响减到最小,给出下面几条建议：字体

1. 不要一条一条地修改 DOM 的样式。与其这样，还不如预先定义好 css 的 class，而后修改 DOM 的 className：优化

   // 很差的写法
   var left = 10,
   top = 10;
   el.style.left = left + "px";
   el.style.top  = top  + "px";
   // 推荐写法
   el.className += " theclassname";

2. 把 DOM 离线后修改。如：
   a> 使用 documentFragment 对象在内存里操做 DOM。
   b> 先把 DOM 给 display:none (有一次 repaint)，而后你想怎么改就怎么改。好比修改 100 次，而后再把他显示出来。
   c> clone 一个 DOM 节点到内存里，而后想怎么改就怎么改，改完后，和在线的那个的交换一下。

3. 不要把 DOM 节点的属性值放在一个循环里当成循环里的变量。否则这会致使大量地读写这个结点的属性。

4. 尽量的修改层级比较低的 DOM节点。固然，改变层级比较底的 DOM节点有可能会形成大面积的 reflow，可是也可能影响范围很小。

5. 为动画的 HTML 元件使用 fixed 或 absoult 的 position，那么修改他们的 CSS 是会大大减少 reflow 。

6. 千万不要使用 table 布局。由于可能很小的一个小改动会形成整个 table 的从新布局。

认识了这些是否是对浏览器的原理有更大兴趣了？OK,后面会更新关于浏览器原理的文章，或者大家能够先去搜搜别人的，由于我以为理解浏览器的原理确实是很重要，能够帮助咱们写出性能更好的website。