2019-09-28请问老师：既然css动画会跳过重绘阶段，则意味着合成阶段的绘制列表不会变化。但是最终得到的相邻两帧的位图是不一样的。那么在合成阶段，相同的绘制列表是如何绘制出不同的位图的？难道绘制列表是有状态的？还是绘制列表一次能绘制出多张位图？作者回复:
记住一点，能直接在合成线程中完成的任务都不会改变图层的内容，如文字信息的改变，布局的改变，颜色的改变，统统不会涉及，涉及到这些内容的变化就要牵涉到重排或者重绘了。
能直接在合成线程中实现的是整个图层的几何变换，透明度变换，阴影等，这些变换都不会影响到图层的内容。
比如滚动页面的时候，整个页面内容没有变化，这时候做的其实是对图层做上下移动，这种操作直接在合成线程里面就可以完成了。
再比如文章题目列子中的旋转操作，如果样式里面使用了will-change ，那么这些box元素都会生成单独的一层，那么在旋转操作时，只要在合成线程将这些box图层整体旋转到设置的角度，再拿旋转后的box图层和背景图层合成一张新图片，这个图片就是最终输出的一帧，整个过程都是在合成线程中实现的。 4 18- 2019-09-28这篇文章信息量巨大，需要很多的知识储备，老师能不能提供一些课外阅读帮助理解呢，谢谢
作者回复: 这块资料比较少，都是通过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
不过源码看起来会比较吃力，里面充斥着大量的回调，梳理起来也是非常不轻松的 1 8 - 2019-09-28文中这段话中的“帧”应该改为“层”：
这段代码就是提前告诉渲染引擎 box 元素将要做几何变换和透明度变换操作，这时候渲染引擎会将该元素单独实现一帧，等这些变换发生时，渲染引擎会通过合成线程直接去处理变换，这些变换并没有涉及到主线程，这样就大大提升了渲染的效率。作者回复: 嗯。多谢指正
4 - 2019-11-20关于css动画和js动画效率的问题应该有点武断了，will-change只是优化手段，使用js改变transform也能享受这个属性带来的优化。既然css动画和js动画都能享受这个优化，那就不能说明css动画比js动画效率高
作者回复: 嗯 标题是不算严谨，修订时我会做一些调整
2 
2019-12-10Performance：使用‘ will-change: transform, opacity;‘后，主线程均匀分布，密集棱状性；GPU均匀稀疏，平均500ms一条棱;rasterizer thread1 持续paint;Summery中GPU占用一小点其它98%以上都是idle;FPS,CPU都很稳定。去掉‘ will-change: transform, opacity;‘后，主线程均匀分布，密集棱状性；GPU密集棱状形；rasterizer thread1 和 thread2 持续paint；Summery中rendering和paint占用约20%时间；FPS，CPU略微不稳定。结论：will-change可以减轻GPU负担（为什么？合成线程不用GPU？），可以减轻rasterizer 线程负担（是因为减少重绘和重排吗），减少重绘和重排，动画的针率更稳定，cpu计算更少（为什么？计算分配给别的核了？）。。。。Layers: ：使用‘ will-change: transform, opacity;‘后，会合成新的层，不使用‘ will-change: transform, opacity;‘后，没有新的层。结论：不使用‘ will-change: transform, opacity;‘由于没有新的层生成，更改都会在一个层改变，所以会涉及到更多重绘和重排。Memory： 使用‘ will-change: transform, opacity;‘这个后System会更少，应该是占有系统内存会更少吧。那就尴尬了，will-change会有新图层，应该内存会增加。展开 1 1
2019-09-29题设的问题答案会不会很牵强？因为使用will-change渲染引擎会通过合成线程去处理元素的变化，所以CSS动画比JavaScript高效？不是应该从CSS动画的原理实现层面去解释吗，will-change只是让CSS动画更高效的一个API，就像JavaScript中的requestAnimationFrame也只是一个优化方案而已。 3 1
2020-01-22使用 will-change 掉帧情况几乎没有，内存占用比不用will-change会减少三分之二左右，这个属性给力
2020-01-21请问老师，本节提到的 分层 分块 合成 等操作都是在skia中做的吗？ 查阅了一下源码并没找到，想请教一下具体的位置？- 2019-12-27Js动画操作使用translateX相比于position 中left值的改变优势是什么？它们都会重绘重拍？ 1
- 2019-12-10translate3d 相比于 translate 合成线程渲染，不仅合成线程会渲染还会有调用GPU加速？
2019-11-27老师，文中说的一副图片、一帧，指的就是一个图层？
2019-11-19希望老师就 重排、重绘、合成这一块弄个加餐，我自己测试出来感觉没什么变化，不知道为什么，也不知道怎么进行有针对性的分析作者回复: 加餐会提到一些，但是不是专门讲这几个的
2019-11-13compositing layer中不会进行重绘重排这些操作吗？作者回复: 这里面执行的是合成操作，效率最高
- 2019-10-13加will-change：开启动画后整个过程帧率在59.9。图层由60个排列的变为1个重叠的60层。load时间在80ms左右，fp时间在200ms左右。内存方面为2m左右。
不加will-change：透明度变为0的时候帧率会变成40左右，随后增加到60。图层由60个排列。load时间在80ms左右，fp时间在100ms左右。内存方面为2m左右。 
2019-10-11老师，是每一个指令生成一个图层吗？ 1
2019-10-09老师能讲解一下BFC和图层的区别与联系吗？总感觉它们之间有点相似。 1
2019-10-03打开Permance, 点击start按钮， 记录30秒内的性能监测， 发现如下区别： set-will-change(Main trhead, GPU, chrome_childIOThead, Compositor)/no-set-will-change(Main thread, Raster, GPU, chrome_childIOThead, Compositor) ， 两者区别也很大， no-set-will-change中发现GPU运行了很长时间， 似乎很繁忙。 老师 我猜测是不是， 没有独立的层， 每次改变css, 每次都要整体进行raster(光栅）光栅的过程进行GPU进程通讯调用(chrome_childIOThead task也比较频繁）所以最为繁忙的为GPU， 主线程的任务看了下基本上没有差别。但是每一帧的时间明显差了好多。 我看了Life of a Pixel， 感觉还有一些懵懂（可能英文不太好吧）， 老师有空是否可以结合一下， 把浏览器渲染流水线流程，在给剖析一下。- 2019-09-30chrome 无痕模式 开启more-tools -> Rendering -> FPS meter no-will-changes(fps:12, gpu-memory：15MB) set-will-change(fps:53， gpu-memory:4.5MB) 1
- 2019-09-30单独进程打开两个Tab, 一个tab设置set-will-change, 一个tab no-will-change, 打开浏览器任务管理器查看页面内存情况set-will-change:29M; no-will-change:21M; 有个疑问老师， 如果在一个Tab进行切换时当从no-will-change 到 set-will-change 再到no-will-change， 刷新发现内存变化21M -> 29M -> 29M降不下了 chrome canary版本
2019-09-29will-change有很多的局限性 而且浏览器兼容不是很好 在移动端 cpu开销很大 1