javascript - 为什么opacity还是会触发重排layout、重绘repaint，不是说opacity只会触发composite吗？
本文介绍了javascript - 为什么opacity还是会触发重排layout、重绘repaint，不是说opacity只会触发composite吗？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
随便弄了个例子：
<!DOCTYPE html>
<html lang="en">
<body>
<div id="target">
某个元素
</div>
<script>
var flag = false
setInterval(function () {
flag = !flag
target.style.opacity = flag ? 0.1 : 1
},1000)
</script>
</body>
</html>
在chrome dev tools的timeline里可以看到每次更改target元素的opacity都会触发重排、重绘(Paint,图中绿色的Pa...3)然后是composite，不是说只会触发composite的吗？
解决方案
元素提升为合成层后，transform 和 opacity 才不会触发 paint，如果不是合成层，则其依然会触发 paint。
在 Blink 和 WebKit 内核的浏览器中，对于应用了 transition 或者 animation的 opacity 元素，浏览器会将渲染层提升为合成层。也可以使用 translateZ(0) 或者 translate3d(0,0,0) 来人为地强制性地创建一个合成层。
使用 Chrome DevTools 工具来查看页面中合成层的情况。
比较简单的方法是打开 DevTools，勾选上 Show layer borders：
这篇关于javascript - 为什么opacity还是会触发重排layout、重绘repaint，不是说opacity只会触发composite吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
