浏览器渲染层是一把双刃剑,用的好可以让你的性能大大的提高,但是用的不好,却会导致页面更加的卡顿。
打开chrome开发者工具,找到 More tools =》Layers,运行下面的代码,可以看到哪些情况下层级会进行提升
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>层级问题测试https://blog.csdn.net/cmyh100</title>
<style>
@keyframes opacityChange{
from{opacity: 1;}
to{opacity: 0;}
}
</style>
</head>
<body>
<div>
<div style="position:absolute;z-index: 20;transform: translate3d(0, 0, 0);top: 240px;">通过transform 3d调起GPU的div,会重新建一个层(下方新开渲染层的情况都是叠加在一起的时候出现,详情修改top属性值,查看博客 https://blog.csdn.net/cmyh100)</div>
<div>普通层的div</div>
<div style="z-index: 10;">加了zindex的div也在普通层</div>
<div style="position:relative;">加了relative的div在普通层</div>
<div style="position:relative;z-index: 10;">加了relative与zindex小于新层的div在普通层</div>
<div style="position:relative;z-index: 30;">加了relative与zindex大于等于新层的div会被默认认为是调起了GPU渲染</div>
<div style="position:absolute;">加了absolute的div在普通层</div>
<div style="position:absolute;z-index: 19;">加了absolute与zindex小于新层的div在普通层</div>
<div style="position:absolute;z-index: 40;">加了absolute与zindex大于等于新层的div会被默认认为是调起了GPU渲染</div>
<div style="position:absolute;z-index: 20;top: 140px;opacity: 1;animation: 2s opacityChange 2;">opacity属性在animation变化的时候也会新开一层</div>
</div>
</body>
</html>