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

时间 2020-05-12 标签应该知道前端性能二三 23 事 reflow repaint

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

啥是 Reflow 和 Repaint

Repaint

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

Reflow

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

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

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

何时 Reflow 会触发

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

添加、删除或者改变 DOM 元素的可见性时：使用 JS 去改变 DOM 元素时会触发 Reflow。git
添加、删除或者改变 CSS 样式：直接改变 CSS Style 或者元素的 class 可能会影响布局，还有改变一个元素的宽度可以影响它所在的 DOM 节点中的全部元素，以及它周围的那些元素。github
CSS3 动画（animation）和过渡（transition）: 动画的每一 frame 都会触发 Reflow。gulp
使用 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像素，必定不要让性能降下来。