【渲染性能】Planting 绘制 css的translateZ影响

话不多说看个例子，这个是使用translateZ的css 之后对渲染性能有多少影响
http://works.ibeeger.com/dev/chrome/
单纯从视觉角度就能感觉出来前后的差异，分析了6秒钟，结果页一目了然。
在这里插入图片描述
下图是启用translateZ的效果

Painting 占比很大，我简单的查了下影响panting的像背景图片、颜色等因素

然后取消使用咱们看看结果
在这里插入图片描述
差距很明显，下次进行位置样式对比 translate 和 top left ；
也可以自己动手实践下。
最后奉上源码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>transform-渲染性能</title>
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<style>
		*{ 
			margin: 0;
			padding: 0
		/*	-webkit-transform: translateZ(0);
			-ms-transform: translateZ(0);
			-o-transform: translateZ(0);
			transform: translateZ(0);*/
		 }
		 .box{
		 	width: 100px;
		 	height: 100px;
		 	box-sizing: border-box;
		 	border:1px solid #ccc;
		 	display: flex;
		 	float: left;
		 }
		 #btn{position: absolute; left: 50%; top: 50%;
			width: 300px;
		 	height: 80px;
		 	color: #c00;
		 	background-color: #fff;
		 	border:1px solid #f00;
		 	display: block;
		 	border-radius: 20px;
		 	cursor: pointer;
		 	-webkit-transform: translate(-50%, -50%);
		 	-ms-transform: translate(-50%, -50%);
		 	-o-transform: translate(-50%, -50%);
		 	transform: translate(-50%, -50%);
		 	z-index: 999;
		 }
	</style>
</head>
<body>
	<button id="btn">开启</button>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div><div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div><div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<script>
		var open = false;
		var doms = document.querySelectorAll('.box');
		document.getElementById('btn').addEventListener('click',function(e) {
		  open = !open;
		  this.innerHTML = open ? '关闭优化' : '开启优化'
		});

		function change() {
			 doms.forEach((dom) => {
			   !open ? dom.style.transform = ' translateZ(0)' : dom.style.transform = '';
			   dom.style.backgroundColor = `rgba(${parseInt(Math.random() * 255)},${parseInt(Math.random() * 255)},${parseInt(Math.random() * 255)},1)`
			 })
			requestAnimationFrame(change)
		}
		change()
	</script>
		
</body>
</html>

风不二

发布了77 篇原创文章 · 获赞 5 · 访问量 3万+

私信关注

【渲染性能】Planting 绘制 css的translateZ影响

猜你喜欢