Open Twlig opened 2 years ago
渲染引擎可以在主线程和合成线程中执行。而js引擎只能在主线程中执行。因此，渲染引擎和js引擎在主线程的使用权方面存在互斥关系。
主线程：HTML解析器，CSS解析器，计算布局layout，以及绘制。
合成线程：相当于独立的完成部分的渲染工作，比如合成图层。因此，可以看出合成线程是不会触发回流和重绘的。当然也只有部分属性能在合成线程中。比如transform和opacity。
浏览器在处理下面的 css 的时候，会使用 gpu 渲染：
浏览器是把内容分到不同的图层分别渲染的，最后合并到一起，而触发 gpu 渲染会新建一个图层，把该元素样式的计算交给 gpu。
这里要注意的是 gpu 硬件加速是需要新建图层的，而把该元素移动到新图层是个耗时操作，界面可能会闪一下，所以最好提前做。will-change 就是提前告诉浏览器在一开始就把元素放到新的图层，方便后面用 gpu 渲染的时候，不需要做图层的新建。
当然，有的时候我们想强制触发硬件渲染，就可以通过上面的属性，比如
will-change: transform;
或者
transform:translate3d(0, 0, 0);
参考文章：
渲染引擎可以在主线程和合成线程中执行。而js引擎只能在主线程中执行。因此，渲染引擎和js引擎在主线程的使用权方面存在互斥关系。
渲染引擎
主线程：HTML解析器，CSS解析器，计算布局layout，以及绘制。
合成线程：相当于独立的完成部分的渲染工作，比如合成图层。因此，可以看出合成线程是不会触发回流和重绘的。当然也只有部分属性能在合成线程中。比如transform和opacity。
css动画对比js动画
css3动画优于js动画的条件
CSS启用gpu硬件加速
浏览器在处理下面的 css 的时候，会使用 gpu 渲染：
浏览器是把内容分到不同的图层分别渲染的，最后合并到一起，而触发 gpu 渲染会新建一个图层，把该元素样式的计算交给 gpu。
这里要注意的是 gpu 硬件加速是需要新建图层的，而把该元素移动到新图层是个耗时操作，界面可能会闪一下，所以最好提前做。will-change 就是提前告诉浏览器在一开始就把元素放到新的图层，方便后面用 gpu 渲染的时候，不需要做图层的新建。
启用gpu加速
当然，有的时候我们想强制触发硬件渲染，就可以通过上面的属性，比如
或者
参考文章：