一、css图层
-
图层的作用：浏览器在渲染一个页面时，会将页面分为很多个图层，图层有大有小，每个图层上有一个或多个节点。在渲染DOM的时候，浏览器所做的工作实际上是：
- 获取DOM后分割为多个图层
- 对每个图层的节点计算样式结果 （Recalculate style–样式重计算）
- 为每个节点生成图形和位置 （Layout–重排,回流）
- 将每个节点绘制填充到图层位图中 （Paint–重绘）
- 图层作为纹理上传至GPU
- 组合多个图层到页面上生成最终屏幕图像 （Composite Layers–图层重组）
-
图层创建的条件：Chrome浏览器满足以下任意情况就会创建图层：
- 拥有具有3D变换的CSS属性
- 使用加速视频解码的节点
- 节点
- CSS3动画的节点
- 拥有CSS加速属性的元素(will-change)
二、重绘(Repaint)
概念：重绘是一个元素外观的改变所触发的浏览器行为，例如改变outline、背景色等属性。浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。重绘不会带来重新布局，所以并不一定伴随重排（元素的位置不需要发生变动）。需要注意的是：重绘是以图层为单位，如果图层中某个元素需要重绘，那么整个图层都需要重绘。所以尽量尽量让经常发生重绘的元素处于同一个图层，就可以尽量的减少重绘。
常见的触发重绘的属性：
* color * background * outline-color
* border-style * background-image * outline
* border-radius * background-position * outline-style
* visibility * background-repeat * outline-width
* text-decoration * background-size * box-shadow
三、重排（Reflow，回流）
概念：渲染对象在创建完成并添加到渲染树时，并不包含位置和大小信息。计算这些值的过程称为布局或重排。“重绘"不一定需要"重排”，比如改变某个网页元素的颜色，就只会触发"重绘"，不会触发"重排"，因为布局没有改变。但是，“重排"必然导致"重绘”，比如改变一个网页元素的位置，就会同时触发"重排"和"重绘"，因为布局改变了。
盒子模型相关属性： 定位属性及浮动： 改变节点内部文字结构：
* width * top * text-align
* height * bottom * overflow-y
* padding * left * font-weight
* margin * right * overflow
* display * position * font-family
* border-width * float * line-height
* border * clear * vertival-align
* min-height * white-space
四、优化
因为Reflow 的成本比 Repaint 的成本高得多的多。DOM Tree 里的每个结点都会有 reflow 方法，一个结点的 reflow 很有可能导致子结点，甚至父点以及同级结点的 reflow。在一些高性能的电脑上也许还没什么，但是如果 reflow 发生在手机上，那么这个过程是非常痛苦和耗电的。所以，下面这些动作有很大可能会是成本比较高的：
- 你增加、删除、修改 DOM 结点时，会导致 Reflow , Repaint。
- 移动 DOM 的位置
- 修改 CSS 样式的时候。
- 你 Resize 窗口的时候（移动端没有这个问题，因为移动端的缩放没有影响布局视口）
- 修改网页的默认字体时。
- 获取某些属性时(width,height等)
注：display:none 会触发 reflow，而 visibility:hidden 只会触发 repaint，因为没有发生位置变化。
优化方案：
如果我们需要使得动画或其他节点渲染的性能提高，需要做的就是减少浏览器在运行时所需要做的工作，具体的步骤在图层介绍的时候已经提到。有以下的一些方法：
-
元素位置移动变换时尽量使用CSS3的transform来代替对top left等的操作
-
使用opacity来代替visibility，变换（transform）和透明度（opacity）的改变仅仅影响图层的组合。透明度的改变时，GPU在绘画时只是简单的降低之前已经画好的纹理的alpha值来达到效果，并不需要整体的重绘。不过这个前提是这个被修改opacity本身必须是一个图层。
-
不要使用table布局
-
将多次改变样式属性的操作合并成一次操作，不要一条一条地修改DOM的样式，预先定义好class，然后修改DOM的className
-
将DOM离线后再修改，由于display属性为none的元素不在渲染树中，对隐藏的元素操作不会引发其他元素的重排。如果要对一个元素进行复杂的操作时，可以先隐藏它，操作完成后再显示。这样只在隐藏和显示时触发2次重排。
-
利用文档碎片(documentFragment)------vue使用了该种方式提升性能。
浏览器都会强行刷新渲染队列。 -
动画实现过程中，启用GPU硬件加速:transform: tranlateZ(0)
-
为动画元素新建图层,提高动画元素的z-index
-
不要把获取某些DOM节点的属性值放在一个循环里当成循环的变量，因为当你请求向浏览器请求一些 style信息的时候，就会让浏览器flush队列，比如如下属性， 当你请求这些属性的时候，浏览器为了给你最精确的值，需要刷新内部队列。因为队列中可能会有影响到这些值的操作。即使你获取元素的布局和样式信息跟最近发生或改变的布局信息无关。
- offsetTop, offsetLeft, offsetWidth, offsetHeight
- scrollTop/Left/Width/Height
- clientTop/Left/Width/Height
- width,height
五、requestAnimationFrame（请求动画帧）
1.window.requestAnimationFrame()
说明：该方法会告诉浏览器在重绘之前调用你所指定的函数
参数：该方法使用一个回调函数作为参数，这个回调函数会在浏览器重绘之前调用。注：回调函数会被自动传入一个参数，DOMHighResTimeStamp，标识requestAnimationFrame()开始触发回调函数的当前时间
返回值： 一个long整数，也成为请求 ID，是个非零值 ，是回调列表中唯一的标识，没别的意义。
2.window.cancelAnimationFrame(requestID)
作用：取消一个先前通过调用window.requestAnimationFrame()方法添加到计划中的动画帧请求。requestID是先前调用window.requestAnimationFrame()方法时返回的ID.
let i = 0;
let test = document.getElementById('test');//定义的id为test的div
let id = requestAnimationFrame(move);
function move(event){ //event 是传入的参数，标识时间
i++;
test.style.transform = `translateX(${i}px)`;
id = requestAnimationFrame(move);
}
//3秒后关闭请求动画针
setTimeout(()=>{
cancelAnimationFrame(id); //通过id去关闭请求动画帧
},3000);