应该知道的前端性能二三事 —— Reflow 和 Repaint

移动 Web 前端开发，目前是火的不能再火了。到处都在招什么 H5 工程师、Hybrid App 开发工程师，主要负责的其实就是一些移动 Web 前端开发的工作。稍微有过一些前端经验的人都知道，手机上的开销比 PC 上要大的多，你在 PC 的模拟器上调试的很顺畅，等到手机上时，就会卡，这是为什么呢？其实这就是性能问题，有其他的开销占用了你的计算资源啦，那么是哪些开销占用了呢？抛开后端接口慢啊、网络状态差啊什么的不说，咱们今天聊聊浏览器本身的细节，Reflow 和 Repaint。尤其是在添加一些 CSS3 动画或者批量操作多个 DOM 元素的时候，Reflow 和 Repaint 的影响就会更加大。

啥是 Reflow 和 Repaint

Repaint

Repaint 就是「重绘」，它会在你改变 DOM 元素的视觉效果时进行，改变布局时不会触发。比如，opacity,background-color,visibility和outline等都会触发，「重绘」的开销还是比较昂贵的，因为浏览器会在某一个 DOM 元素的视觉效果改变后去 check 这个 DOM 元素内的所有节点。

Reflow

Reflow 就是「回流」，它的影响更大。它会在某一个 DOM 元素的位置发生改变后触发，而且它会重新计算所有元素的位置和在页面中的占有的面积，这样的话将会引起页面某一个部分甚至整个页面的重新渲染。改变某一个元素会影响它所有的子节点 (children)、祖先节点 (ancestors) 及兄弟节点(siblings)。

Reflow 和 Repaint 都是浏览器慢的元凶

用户和Web页面都不能在 Reflow 和 Repaint 执行时做任何操作和响应，而且在极端的情况下，CSS 会拖慢 JS 的执行速度，这就是浏览器有的时候就是在操作之后没反应的原因之一。

什么时候 Reflow 会触发

Reflow 的开销更加昂贵，那么具体哪些时候会触发 Reflow?

添加、删除或者改变 DOM 元素的可见性时：使用 JS 去改变 DOM 元素时会触发 Reflow。
添加、删除或者改变 CSS 样式：直接改变 CSS Style 或者元素的 class 可能会影响布局，还有改变一个元素的宽度能够影响它所在的 DOM 节点中的所有元素，以及它周围的那些元素。
CSS3 动画（animation）和过渡（transition）: 动画的每一 frame 都会触发 Reflow。
使用 offsetWidth 和 offsetHeight：这一点很特别，你读一个 DOM 的 offsetWidth 和 offsetHeight 属性同样会触发一下 Reflow，因为这两个属性需要依赖一些元素去计算。
用户交互：用户可以通过 hover 一下 a 链接，在 input 里面输入文字，拖动浏览器的大小，改变字体大小，更换样式表或者字体等都会触发 reflow。

一些常用的提高性能的原则

1.不要用 inline style 或 table 布局，flexbox 布局也会给性能带来一些小困扰。inline style 会在 html 下载完后进行一次额外的 Reflow，table布局的开销远比其他 DOM 元素的布局开销要大。flexbox 的 item 会在 HTML 下载完成后改变尺寸。

2.尽量简写 CSS，避免使用复杂的 CSS 选择器，使用 Unused CSS, uCSS, gulp-uncss可以有效的减少样式的定义和文件的大小。

3.减少 DOM 的层级，减少 DOM 的数量，如果不需适配老浏览器，删掉一些无用的 wrapper 性质的 DOM 元素，总之越少越好。

4.在一个 DOM 树中，尽可能改那些没有特别多子元素 DOM 的 class，子元素少的可以改，多的不推荐。

5.删掉复杂的动画，运用动画的元素尽量是 position:absolute 或 position:fixed 的，这样会让他们脱离文档流，不去影响其他的元素。

6.display:none 的元素不会引发 Reflow 和 Repaint，可以在让这些元素在 display 之前进行一些诸如颜色、尺寸什么的改变。

7.批量去更新元素，比如下面这个例子会触发3次 reflow:

var myelement = document.getElementById('myelement');
myelement.width = '100px';
myelement.height = '200px';
myelement.style.margin = '10px';

可以用这种方式来优化上面的代码：

var myelement = document.getElementById('myelement');
myelement.classList.add('newstyles');

.newstyles {
    width: 100px;
    height: 200px;
    margin: 10px;
}

此外，还可以在生成新 DOM 时可以使用 DOM fragment，然后先在内存中构建 DOM:

var
    i, li,
    frag = document.createDocumentFragment(),
    ul = frag.appendChild(document.createElement('ul'));

for (i = 1; i <= 3; i++) {
    li = ul.appendChild(document.createElement('li'));
    li.textContent = 'item ' + i;
}

document.body.appendChild(frag);

8.避免大量 DOM 之间互相影响，比如 Tabs 这种场景，如果你点击一个 Tab 会显示它控制的区块，显示的那个区块会影响其他的区块，这样可能会引起 Reflow，因为它们的高度不一样，可以通过定个高度来优化这种场景。

9.记住一个原则，平滑的动画永远都比不上性能的顺畅重要，可用性永远是第一位的，如果每一帧移动1像素会卡，就每一帧去移动10像素，一定不要让性能降下来。