浏览器渲染层相关探索

最新推荐文章于 2024-03-01 16:53:34 发布

cmyh

最新推荐文章于 2024-03-01 16:53:34 发布

阅读量194

点赞数

分类专栏：优化与兼容文章标签：浏览器渲染层级

本文链接：https://blog.csdn.net/cmyh100/article/details/102457985

版权

优化与兼容专栏收录该内容

18 篇文章 1 订阅

订阅专栏

浏览器渲染层是一把双刃剑，用的好可以让你的性能大大的提高，但是用的不好，却会导致页面更加的卡顿。

打开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>

cmyh

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浏览器渲染层相关探索

浏览器渲染层是一把双刃剑，用的好可以让你的性能大大的提高，但是用的不好，却会导致页面更加的卡顿。打开chrome开发者工具，找到 More tools =》Layers，运行下面的代码，可以看到哪些情况下层级会进行提升<!DOCTYPE html><html> <head> <meta charset="utf-8"> &...
复制链接

扫一扫

专栏目录