有些网页响应非常缓慢，占用大量的CPU和内存，浏览起来常常有卡顿，页面的动画效果也不流畅

网页生成的过程

1.HTML代码转化成DOM

2.CSS代码转化成CSSOM

3.结合DOM和CSSOM，生成一棵渲染树

4.生成布局，即将所有渲染树的所有节点进行平面合成

5.将布局绘制在屏幕上

“生成布局”（flow）和”绘制”（paint）这两步，合称为”渲染”（render）

重排和重绘

重新渲染，就需要重新生成布局和重新绘制。前者叫做”重排”（reflow），后者叫做”重绘”（repaint）

以下三种情况，会导致网页重新渲染

1.修改DOM

2.修改样式表

3.用户事件

对于性能的影响

提高网页性能，就是要降低”重排”和”重绘”的频率和成本，尽量少触发重新渲染

一般来说，样式的写操作之后，如果有下面这些属性的读操作，都会引发浏览器立即重新渲染

// div元素有两个样式变动，但是浏览器只会触发一次重排和重绘
div.style.color = 'blue';
div.style.marginTop = '30px';
// 如果读和写操作一起，就会触发两次重排和重绘
div.style.color = 'blue';
var margin = parseInt(div.style.marginTop);
div.style.marginTop = (margin + 10) + 'px';

规律如下:

1.样式表越简单，重排和重绘就越快

2.重排和重绘的DOM元素层级越高，成本就越高

3.table元素的重排和重绘成本，要高于div元素

提高性能的九个技巧

1.DOM 的多个读操作（或多个写操作），应该放在一起。不要两个读操作之间，加入一个写操作

2.如果某个样式是通过重排得到的，那么最好缓存结果。避免下一次用到的时候，浏览器又要重排

3.不要一条条地改变样式，而要通过改变class，或者csstext属性，一次性地改变样式

4.尽量使用离线DOM，而不是真实的网面DOM，来改变元素样式

5.先将元素设为display:none（需要1次重排和重绘），然后对这个节点进行100次操作，最后再恢复显示

6.position属性为absolute或fixed的元素，重排的开销会比较小，因为不用考虑它对其他元素的影响

7.只在必要的时候，才将元素的display属性设为可见，因为不可见的元素不影响重排和重绘。另外，visibility : hidden的元素只对重绘有影响，不影响重排

8.使用虚拟DOM的脚本库，比如React等

9.使用 window.requestAnimationFrame()、window.requestIdleCallback()这两个方法调节重新渲染