学习记录_0902

最新推荐文章于 2025-12-25 14:13:56 发布

原创最新推荐文章于 2025-12-25 14:13:56 发布 · 119 阅读

0 ·

CC 4.0 BY-SA版权

回流和重绘

https://juejin.im/post/6844903734951018504#comment

浏览器的渲染过程

解析html，生成DOM树，解析CSS，生成CSSDOM树
将DOM树和CSSDOM树结合，生成渲染树（Render Tree）
Layout（回流）：根据生成的渲染树，进行回流（Layout），得到节点的几何信息（位置、大小）
Painting（重绘）：根据渲染树以及回流得到的几何信息，得到节点的绝对像素
Display：将像素发送给GPU，展示在页面上

生成渲染树

浏览器主要工作：

从DOM树的根节点开始遍历每个可见节点
从每个可见的节点，找到CSSDOM树中对应的规则，并应用他们
根据每个可见节点及其对应的样式，组合生成渲染树。

note：第一步中要遍历可见的节点，不可见的节点包括：

一些不会渲染节点的节点，比如script、meta、link
一些通过css隐藏的节点，比如display：none。（利用visibility和opacity隐藏的节点，还是会显示在渲染树上，只有display：none的节点才不会显示在渲染树上）

回流（重排）

通过构造渲染树，将可见DOM节点以及它对应的样式结合起来，然后需要计算他们在设备视口（viewport）内的确切位置和大小，这个计算的阶段就是回流。
为了弄清每个对象在网站上的确切大小和位置，浏览器从渲染树的根节点开始遍历，实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div style="width:50%">
        <div style="width:50%">hello world!</div>
    </div>
</body>
</html>

第一个div将节点的显示尺寸设置为视口宽度的50%，第二个div将其尺寸设置为父节点的50%。而在回流阶段，需要根据视口具体宽度，将其转成实际的像素值。

重绘

通过构造渲染树和回流阶段，知道了那些节点是可见的，以及可见节点的样式和具体的几何信息（位置、大小），那么就可以将渲染树的每个节点转换成屏幕上的实际像素，这个阶段就叫重绘节点。

何时发生回流重绘

回流阶段主要计算节点的位置和几何信息，，所以当页面布局和几何信息发生变化就需要回流。比如以下情况：

添加或删除可见的DOM元素
元素的位置发生变化
元素的尺寸发生变化（包括内外边距、内边框、边框大小、宽度和高度等）
内容发生变化（比如文本变化或图片被另外一张不同尺寸的图片替代）
页面一开始渲染的时候
浏览器窗口尺寸变化

回流一定会触发重绘，而重绘不一定会回流。
根据改变的范围和程度，渲染树中或大或小的部分都需要重新计算，有些改变会触发整个页面的重排，比如，滚动条出现的时候或者修改了根节点。

浏览器的优化机制

由于每次重排都会造成额外的计算消耗，因此大多数浏览器会通过队列化修改并批量执行来优化重排过程。浏览器会将修改操作放入队列里，直到过了一段时间或者操作达到了一个阈值，才清空队列。但是，当获取布局信息的操作时，会强制队列刷新，比如访问一下属性或者使用以下方法：

offsetTop、offsetLeft、offsetWidth、offsetHeight
scrollTop、scrollLeft、scrollWidth、scrollHeight
clientTOP、clientLeft、clientWidth、clientHeight
getComputedStyle（）
getBoundingClientRect（）

以上属性需要访问最新的布局信息，因此浏览器不得不清空队列，触发回流重绘来返回正确的值。因此修改样式时候，避免使用以上属性，如果要使用，最好将值缓存啊起来。

减少回流和重绘

最小化重绘和重排

减少发生次数，合并多次对DOM和样式的修改，然后一次处理好

const el = document.getElementById('test')
el.style.padding = '5px';
el.style.borderLeft = '1px';
el.style.borderRight = '2px';

例子中有3个样式属性都被修改了，每一个都会影响元素的几何结构，引起回流。大部分现代浏览器对其做出了优化，因此只会触发一次重排。但如果在旧版浏览器，就会导致三次重排。

const el = document.getElementById('test')
el.style.cssText += 'border-left: 1px; border-right: 2px; padding: 5px;';

批量修改DOM

当需要对DOM对一系列修改时，可通过以下步骤减少回流重绘次数：

使元素脱离文档流
对其进行多次修改
将元素带回文档中

第一步和第三步可能会引起回流，但第一步之后，对DOM所有修改都不会引起回流，因为他已经不在渲染树了。

让DOM脱离文档流：

隐藏元素，应用修改，重新显示
使用文档片段（DocumentFragment ）在当前DOM之外构建一个子树，再把他拷贝会文档
将原始元素拷贝到另一个脱离文档的节点中，修改节点后，在替换原始的元素

避免触发同步布局事件

当访问元素的一些属性时候，会导致浏览器强制清空队列，进行强制同步布局。
举例：想让一个p标签数组的宽度赋值给另一个元素的宽度

function initP() {
	for(let i=0;i< paragraphs.length;i++) {
		paragraphs[i].style.width = box.offsetWidth + 'px'	
	}
}

以上代码每次执行时都读取了box的offsetWidth属性，然后利用它更新p标签的width属性。就导致每次循环时，浏览器都必须使上一次循环中的样式更新操作生效，才能响应本次循环的样式读取操作。每次循环都强制浏览器刷新队列。优化如下：

const width = box.offsetWidth
function initP() {
	for(let i=0;i< paragraphs.length;i++) {
		paragraphs[i].style.width = width + 'px'	
	}
}

对于复杂动画效果,使用绝对定位让其脱离文档流

css3硬件加速（GPU加速）