知识点：
网页的生成过程：
1、HTML代码转化成DOM
2、css代码转化成CSSOM(css object model)
3、结合DOM和CSSOM，生成一颗渲染树（包含每个节点的视觉信息）
4、生成布局（layout），将所有渲染树的所有节点进行平面合成
4、将布局绘制（paint）到屏幕上
“生成布局”和“绘制”这两步，合称为“渲染”
重排和重绘
一下三种情况，会导致网页重新渲染
1、修改dom
2、修改样式表
3、用户事件
重新渲染，就需要重新生成布局和重新绘制，前者叫做“重排”，后者叫做“重绘”
“重绘”不一定需要“重排”，“重排”必然导致“重绘”
timeline基础面板介绍
网页动画能够做到每秒60帧，就会跟显示器同步刷新，一秒之内进行60次重新渲染，每次重新渲染的时间不能超过16.66毫秒
蓝色：网络通信和HTML解析
黄色：javascript执行
紫色：样式计算和布局，即重排
绿色：重绘
触发分层
1、获取DOM并将其分割成为多个层
2、将每个层独立的绘制进位图中
3、将层作为纹理上传至GPU
4、复合多个层来生成最终的屏幕图像
提高性能的技巧
1、样式表越简单，重排和重绘就越快
2、DOM元素层级较高，重排和重绘的成本就越高
3、table元素的重排和重绘成本，要高于div元素
4、尽量不要把读操作和写操作，放在一个语句里面，多个读操作应该放在一起
一般样式写的操作之后，如果有下面这些属性的读操作，都会引发浏览器立即重新渲染
offsetTop/offsetLeft/offsetWidth/offsetHeight
scrollTop/scrollLeft/scrollWidth/scrollHeight
clientTop/clientLeft/clientWidth/clientHeight
getComputedStyle()
5、统一改变样式:不要一条条的改变样式，而要通过改变class,或者classtext属性
6、缓存重排结果
7、离线DOM 采用Fragment/clone
8、虚拟DOM React
9、元素display:none需要一次重排重绘，然后对节点进行100次的操作，最后再恢复，又一次重排重绘，两次的重排重绘，取代可能高达100次的重新渲染
10、position属性为absolute或者fixed的元素，重排开销比较小，因为不用考虑它对其他元素的影响
11、visibility:hidden 的元素只对重绘有影响，不影响重排
10、
window.requestAnimationFrame(callback)浏览器在下一次重新渲染时执行
window.requestIdleCallback(fn,6000)当一帧的末尾有空闲时间的时候才执行回调函数；但是在指定的时间内每一帧末尾都没有空闲时间，就强制执行
此处的每一帧末尾有空闲时间是指当前帧的运行时间小于16.66ms
fn可以接受一个deadline的对象：deadline对象包含一个属性和一个方法：timeRemaining()和didTimeout属性
timeRemaining()方法是指当前帧的剩余毫秒数
didTimeout：返回一个布尔值，表示时间是否过期
