Presumably you often see —- reflux will be redrawn, redrawn does not necessarily reflux —- words.

But the reflux must be redrawn, right? You can try through the following code

<! DOCTYPEhtml>
<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>
Copy the code

The above code runs in The Google Browser

Recalculate Style, Layout, Update Layer Tree, Composite Layers

Through the above practice, the reflux will not necessarily be redrawn.

Welcome to provide advice, after all, the front – end performance of this piece, more systematic and comprehensive and correct data is not much.