浏览器渲染层相关探索

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

打开chrome开发者工具,找到 More tools =》Layers,运行下面的代码,可以看到哪些情况下层级会进行提升

浏览器渲染层相关探索_第1张图片



	
		
		层级问题测试https://blog.csdn.net/cmyh100
    
	
	
    
通过transform 3d调起GPU的div,会重新建一个层(下方新开渲染层的情况都是叠加在一起的时候出现,详情修改top属性值,查看博客 https://blog.csdn.net/cmyh100)
普通层的div
加了zindex的div也在普通层
加了relative的div在普通层
加了relative与zindex小于新层的div在普通层
加了relative与zindex大于等于新层的div会被默认认为是调起了GPU渲染
加了absolute的div在普通层
加了absolute与zindex小于新层的div在普通层
加了absolute与zindex大于等于新层的div会被默认认为是调起了GPU渲染
opacity属性在animation变化的时候也会新开一层

 

你可能感兴趣的:(优化与兼容)