Open ZhelinCheng opened 1 year ago
https://zhelin.me/post/514d343a2be74cd510d0545c213c3c4f/
使用3D硬件加速提升动画性能时，最好给元素增加一个z-index属性，人为干扰复合层的排序，可以有效减少chrome创建不必要的复合层，提升渲染性能，移动端优化效果尤为明显。
常听人说：
移动端要想动画性能流畅，应该使用3d硬件加速
最近深入了解了一些浏览器内核的细节，感觉这里面其实有坑啊。。。
事情要从最近看的《WebKit技术内幕》说起，第二章介绍了网页的结构，其中提到了Webkit硬件加速的方式，会把需要渲染的元素放到特定的『Composited Layer』中，在chrome的控制台可以这样开启：
选择『Show composited layer borders』以后，就能看到有动画3d变换的元素会被一个黄色的边框圈起来，表示放到了一个新的『复合层（composited layer）』中渲染，大概长这个样子：
蓝色的细线是浏览器渲染时候的『瓦片』，浏览器绘制页面的时候只会绘制可视区域一定范围内的瓦片，以节省性能开销，而黄色的边框框起来的，就代表了这个元素被放到特殊的复合层中渲染，跟主文档不在一个层中
然后我觉得这个视图挺有意思的，就拿来看
https://zhelin.me/post/514d343a2be74cd510d0545c213c3c4f/
使用3D硬件加速提升动画性能时，最好给元素增加一个z-index属性，人为干扰复合层的排序，可以有效减少chrome创建不必要的复合层，提升渲染性能，移动端优化效果尤为明显。
常听人说：
移动端要想动画性能流畅，应该使用3d硬件加速
最近深入了解了一些浏览器内核的细节，感觉这里面其实有坑啊。。。
事情要从最近看的《WebKit技术内幕》说起，第二章介绍了网页的结构，其中提到了Webkit硬件加速的方式，会把需要渲染的元素放到特定的『Composited Layer』中，在chrome的控制台可以这样开启：
选择『Show composited layer borders』以后，就能看到有动画3d变换的元素会被一个黄色的边框圈起来，表示放到了一个新的『复合层（composited layer）』中渲染，大概长这个样子：
蓝色的细线是浏览器渲染时候的『瓦片』，浏览器绘制页面的时候只会绘制可视区域一定范围内的瓦片，以节省性能开销，而黄色的边框框起来的，就代表了这个元素被放到特殊的复合层中渲染，跟主文档不在一个层中
然后我觉得这个视图挺有意思的，就拿来看