24 | 分层和合成机制：为什么CSS动画比JavaScript高效？
该思维导图由 AI 生成，仅供参考
显示器是怎么显示图像的
荧光笔
直线
曲线- 深入了解
- 翻译
- 解释
- 总结
CSS动画相比JavaScript动画更高效的原因在于CSS动画利用了浏览器最先进的合成技术，即分层和合成机制。这种技术通过将页面分解为多个图层，然后将这些图层合并以显示页面的图片，从而提高了每帧的渲染效率。文章首先介绍了显示器如何显示图像，以及帧和帧率的概念，为后续分析奠定了基础。接着详细讲解了渲染引擎生成一帧图像的方式，包括重排、重绘和合成三种方式，强调了合成操作的效率优势。然后深入分析了Chrome浏览器中的分层和合成机制，解释了分层和合成的概念及其工作原理。最后，强调了合成操作在合成线程上完成，不会影响到主线程执行，从而解释了为什么即使主线程卡住，CSS动画依然能够执行。文章通过深入浅出的方式，帮助读者理解了CSS动画和JavaScript底层工作机制的区别，以及为什么CSS动画更高效的原因。 文章还介绍了如何利用分层技术优化代码，通过will-change属性告知渲染引擎对特定元素进行特效变换，从而提升渲染效率。最后，文章提出了观察will-change属性对性能、效率和内存占用的影响，并鼓励读者在留言区分享观察结果和思考过程。 总的来说，本文通过深入剖析CSS动画和JavaScript动画的底层原理，以及介绍了如何利用分层技术优化代码，为读者提供了全面的技术视角和实践建议。
《浏览器工作原理与实践》，新⼈⾸单¥59
全部留言(45)
- 最新
- 精选
Link请问老师：既然css动画会跳过重绘阶段，则意味着合成阶段的绘制列表不会变化。但是最终得到的相邻两帧的位图是不一样的。那么在合成阶段，相同的绘制列表是如何绘制出不同的位图的？难道绘制列表是有状态的？还是绘制列表一次能绘制出多张位图？作者回复: 记住一点，能直接在合成线程中完成的任务都不会改变图层的内容，如文字信息的改变，布局的改变，颜色的改变，统统不会涉及，涉及到这些内容的变化就要牵涉到重排或者重绘了。 能直接在合成线程中实现的是整个图层的几何变换，透明度变换，阴影等，这些变换都不会影响到图层的内容。 比如滚动页面的时候，整个页面内容没有变化，这时候做的其实是对图层做上下移动，这种操作直接在合成线程里面就可以完成了。 再比如文章题目列子中的旋转操作，如果样式里面使用了will-change ，那么这些box元素都会生成单独的一层，那么在旋转操作时，只要在合成线程将这些box图层整体旋转到设置的角度，再拿旋转后的box图层和背景图层合成一张新图片，这个图片就是最终输出的一帧，整个过程都是在合成线程中实现的。
2019-09-28999- 早起不吃虫这篇文章信息量巨大，需要很多的知识储备，老师能不能提供一些课外阅读帮助理解呢，谢谢
作者回复: 这块资料比较少，都是通过chromium源码还有blinkon上一些视频总结的。 blinkon：https://www.youtube.com/channel/UCIfQb9u7ALnOE4ZmexRecDg Chromium源码： https://chromium.googlesource.com/chromium/src https://chromium.googlesource.com/chromium/src/+/master/docs/README.md 不过源码看起来会比较吃力，里面充斥着大量的回调，梳理起来也是非常不轻松的
2019-09-28334 - bai关于css动画和js动画效率的问题应该有点武断了，will-change只是优化手段，使用js改变transform也能享受这个属性带来的优化。既然css动画和js动画都能享受这个优化，那就不能说明css动画比js动画效率高
作者回复: 嗯 标题是不算严谨，修订时我会做一些调整
2019-11-20425 - Link文中这段话中的“帧”应该改为“层”： 这段代码就是提前告诉渲染引擎 box 元素将要做几何变换和透明度变换操作，这时候渲染引擎会将该元素单独实现一帧，等这些变换发生时，渲染引擎会通过合成线程直接去处理变换，这些变换并没有涉及到主线程，这样就大大提升了渲染的效率。
作者回复: 嗯。多谢指正
2019-09-281222 
钓人的鱼希望老师就 重排、重绘、合成这一块弄个加餐，我自己测试出来感觉没什么变化，不知道为什么，也不知道怎么进行有针对性的分析作者回复: 加餐会提到一些，但是不是专门讲这几个的
2019-11-19
Crackcompositing layer中不会进行重绘重排这些操作吗？作者回复: 这里面执行的是合成操作，效率最高
2019-11-13
刘弥设置了 will-change : - Layers 中会看到 document 下为每一个 .box 都创建了一个 layer，每个节点占用了 15KB 的内存。 - Performance 看不太懂，大致说一下直观感受 - FPS 约 60、稳定 - CPU 低、偶有突然增高 - GPU 使用频率非常低 - Chrome_ChildOThread 任务非常少 - Compositor 任务密集 关闭 will-change： - Layers 中就只剩下 document 层了。 - Performance 30s - FPS 约 60、稳定，但相对于开启 will-change不稳定 - CPU 相对更低、偶有突然增高 - GPU 使用频率很高 - Raster 有 2 个光栅线程 - Chrome_ChildOThread 任务密集 - Compositor 任务非常密集 另外关于 Memory 中进行内存快照和 Heap，虽然第一次确实开启了 will-change 后更高，但多测试了几次发现差不多...2020-02-12220
Angus题设的问题答案会不会很牵强？因为使用will-change渲染引擎会通过合成线程去处理元素的变化，所以CSS动画比JavaScript高效？不是应该从CSS动画的原理实现层面去解释吗，will-change只是让CSS动画更高效的一个API，就像JavaScript中的requestAnimationFrame也只是一个优化方案而已。2019-09-2937
风里有诗句老师，想听您讲解一下这道题目的分析2020-04-124
HoSalt老师，分成这个概念是不是和CSS里面的BFC这个概念相关?2020-04-1154