阅读 127

回流一定会重绘?未必吧

想必大家经常看到----回流一定会重绘,重绘不一定回流----的话语。

但回流一定会重绘?大家可以通过以下代码试试

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>Document</title>
		<style type="text/css">
			.main {
				width: 100px;
				height: 100px;
				border: 1px solid red;
				position: relative;
				top: 0px;
				transform: translateY(0px);

			}
		</style>
	</head>
	<body>
		<div id="app" class="main"></div>
		<script type="text/javascript">
			let app = document.getElementById('app')
			setTimeout(function() {
				app.style.top = '10px' 
				//app.style.transform = 'translateY(10px)' 
			}, 1000)
		</script>
	</body>
</html>
复制代码

以上代码运行在google浏览器

image.png 从Performance可以看到,1S后主线程执行的是 Recalculate Style、Layout(Layout这里为回流,后续并没paint,即并没重绘)、Update Layer Tree、Composite Layers。

通过以上实践,回流也并一定会重绘。

欢迎大佬们提供意见,毕竟前端性能这块,比较系统且全面且正确的资料不多。

文章分类
前端