34 css 怎么开启硬件加速(GPU 加速)

浏览器在处理下面的 css 的时候，会使用 GPU 渲染

• transform（当 3D 变换的样式出现时会使用 GPU 加速）
• opacity
• filter
• will-change

• 采用 transform: translateZ(0)
• 采用 transform: translate3d(0, 0, 0)
• 使用 CSS 的 will-change属性。 will-change 可以设置为opacity、transform、top、left、bottom、right`

注意！层爆炸，由于某些原因可能导致产生大量不在预期内的合成层，虽然有浏览器的层压缩机制，但是也有很多无法进行压缩的情况，这就可能出现层爆炸的现象（简单理解就是，很多不需要提升为合成层的元素因为某些不当操作成为了合成层）。解决层爆炸的问题，最佳方案是打破 overlap 的条件，也就是说让其他元素不要和合成层元素重叠。简单直接的方式：使用 3D 硬件加速提升动画性能时，最好给元素增加一个 z-index 属性，人为干扰合成的排序，可以有效减少创建不必要的合成层，提升渲染性能，移动端优化效果尤为明显。