概念
- CSS3 硬件加速又叫做 GPU 加速，是利用 GPU 进行渲染，
减少 CPU 操作的一种优化方案。由于 GPU 中的 transform 等 CSS
属性不会触发 repaint，所以能大大提高网页的性能
触发硬件加速的属性
- will-change： 哪一个属性即将发生变化，进而进行优化
- transform
- opacity
- filter
带来的问题
- 不能让每个元素都启用硬件加速，这样会暂用很大的内存，使页面会有很强的卡顿感
- GPU渲染会影响字体的抗锯齿效果。这是因为GPU和CPU具有不同的渲染机制，即使最终硬件加速停止了，文本还是会在动画期间显示得很模糊。
硬件加速的原理
- 浏览器接收到页面文档后，会将文档中的标记语言解析为DOM树。DOM树和CSS结合后形成浏览器构建页面的渲染树。渲染树中包含了大量的渲染元素，每一个渲染元素会被分到一个图层中，每个图层又会被加载到GPU形成渲染纹理，而图层在GPU中
transform是不会触发 repaint 的，这一点非常类似3D绘图功能，最终这些使用transform的图层都会由独立的合成器进程进行处理。
网友评论