网站性能优化 --- 影响回流和重绘的因素

1、transform、opacity 并不会引发 repaint 和 reflow。对于transform/opacity 这两种变换，浏览器不会用repaint/reflow处理，而是在已经渲染好的元素基础上进行附加工作。

给动画元素使用translate3d属性或者简单加上translateZ属性，让浏览器以为这是要进行3d变换的元素，会让浏览器单独开合成层渲染你的动画效果。集中资源的好处是动画过程会更加平滑。

导致“回流”（layout / reflow）的因素有哪些？

1）调整窗口大小（Resizing the window）
2）改变字体（Changing the font）
3）增加或者移除样式表（Adding or removing a stylesheet）
4）内容变化，比如用户在input框中输入文字
5）激活 CSS 伪类，比如 :hover
6）操作 class 属性（Manipulating the class attribute）
7）脚本操作 DOM（A script manipulating the DOM）
8）计算 offsetWidth 和 offsetHeight 属性（Calculating offsetWidth and offsetHeight）
9）设置 style 属性的值 （Setting a property of the style attribute）

如何避免回流或将它们对性能的影响降到最低？

1）避免使用多层内联样式。对于样式的修改，可以放在一个class中整体赋值。且对dom的操作尽量操作具体的dom，而不是通过父dom来影响子dom的可见性；

2）动画效果应用到 position 属性为 absolute 或 fixed 的元素上；

3）牺牲平滑度换取速度；

4）避免使用 table 布局；

5）避免使用CSS的JavaScript表达式；

6）编辑dom，可以采用这几种方式：先将元素从document中删除，完成修改后再把元素放回原来的位置；将元素的display设置为”none”，完成修改后再把display修改为原来的值；如果需要创建多个DOM节点，可以使用DocumentFragment创建完后一次性的加入document；

7）集中修改样式。尽可能少的修改元素style上的属性；尽量通过修改className来修改样式；通过cssText属性来设置样式值；

8）缓存Layout属性值。var width = el.offsetWidth；

9）设置元素的position为absolute或fixed，缩小渲染范围；

个人统计【2】：2019-5-22、2019-05-24