master

分支 (1)

管理

管理

master

geyao
/
重排和重绘220402.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>重排和重绘</title>
	</head>
	<body>
		<!-- 简单地总结下两者的概念：
		重排：无论通过什么方式影响了元素的几何信息(元素在视口内的位置和尺寸大小)，浏览器需要重新计算元素在视口内的几何属性，这个过程叫做重排。
		重绘：通过构造渲染树和重排（回流）阶段，我们知道了哪些节点是可见的，以及可见节点的样式和具体的几何信息(元素在视口内的位置和尺寸大小)，
		接下来就可以将渲染树的每个节点都转换为屏幕上的实际像素，这个阶段就叫做重绘。
		如何减少重排和重绘？
		最小化重绘和重排，比如样式集中改变，使用添加新样式类名 .class 或 cssText
		。 批量操作 DOM，比如读取某元素 offsetWidth
		属性存到一个临时变量，再去使用，而不是频繁使用这个计算属性； 又比如利用
		document.createDocumentFragment()
		来添加要被添加的节点，处理完之后再插入到实际 DOM 中。 使用 **absolute**
		或 **fixed**
		使元素脱离文档流，这在制作复杂的动画时对性能的影响比较明显。 开启 GPU
		加速，利用 css 属性 transform 、will-change
		等，比如改变元素位置，我们使用 translate 会比使用绝对定位改变其 left
		、top 等来的高效，因为它不会触发重排或重绘，transform
		使浏览器为元素创建⼀个 GPU
		图层，这使得动画元素在一个独立的层中进行渲染。
		当元素的内容没有发生改变，就没有必要进行重绘。 -->
	</body>
</html>