元素提升为合成层后,transform 和 opacity 才不会触发 paint,如果不是合成层,则其依然会触发 paint。
在 Blink 和 WebKit 内核的浏览器中,对于应用了 transition 或者 animation的 opacity 元素,浏览器会将渲染层提升为合成层。也可以使用 translateZ(0) 或者 translate3d(0,0,0) 来人为地强制性地创建一个合成层。
使用 Chrome DevTools 工具来查看页面中合成层的情况。
比较简单的方法是打开 DevTools,勾选上 Show layer borders:
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…