浏览器渲染原理，回流，重绘
在前端开发中，理解浏览器的渲染原理、回流（Reflow）和重绘（Repaint）是至关重要的。这不仅有助于我们编写高效的代码，还能显著提升页面的性能和用户体验。本文将深入探讨浏览器渲染的核心原理，并详细解析回流和重绘的概念、触发条件以及如何优化。
文章目录
一、浏览器渲染原理
浏览器渲染页面的过程可以分为以下几个关键步骤：
1. 解析HTML生成DOM树
浏览器从网络下载HTML文件，然后解析生成DOM（Document Object Model）树。DOM树是表示文档结构的树形模型。
2. 解析CSS生成样式树
浏览器下载并解析CSS文件，生成样式树（也称为CSSOM）。样式树表示文档中所有样式规则的树形结构。
3. 生成Render树
浏览器将DOM树和样式树结合，生成Render树。Render树包含要显示的可见节点，并且按照样式信息进行布局。
4. 布局（Reflow）
浏览器计算每个节点的几何信息（位置和大小），这个过程称为布局或Reflow。布局阶段确定页面上每个元素的确切位置和尺寸。
5. 绘制（Painting）
最后，浏览器将页面绘制在屏幕上。这一步包括绘制文本、颜色、形状、图像和其他装饰。
二、什么是回流？哪些情况会导致回流？如何避免？
回流是指浏览器重新计算页面布局的过程。当页面的某部分发生改变，并且影响到其他部分的布局时，浏览器会触发回流以重新计算所有受影响元素的位置和尺寸。
1. 添加或删除元素
添加或删除DOM中的元素会导致回流。
代码案例：
// 回流：添加新元素
document.body.appendChild(document.createElement('div'));
避免方法：
使用文档片段（DocumentFragment）来批量添加元素，最后一次性插入DOM。
let fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
fragment.appendChild(document.createElement('div'));
}
document.body.appendChild(fragment);
2. 改变元素尺寸
修改元素的宽度、高度、内边距、外边距或边框等属性，会触发回流。
代码案例：
// 回流：修改元素宽度
let box = document.getElementById('box');
box.style.width = '200px';
避免方法：
尽量集中修改，避免多次触发回流。
let box = document.getElementById('box');
box.style.cssText = "width: 200px; height: 100px; padding: 10px; margin: 5px;";
3. 获取某些属性
某些属性（如offsetHeight、scrollTop）的读取会触发回流，因为浏览器需要计算这些值。
代码案例：
// 回流：读取offsetHeight
let box = document.getElementById('box');
let height = box.offsetHeight;
避免方法：
尽量减少不必要的属性读取，或者将读取操作集中在一起。
4. 改变元素的位置
使用position属性或改变元素的top、left值也会触发回流。
代码案例：
// 回流：改变元素位置
let box = document.getElementById('box');
box.style.position = 'absolute';
box.style.top = '10px';
避免方法：
使用CSS动画或变换（transform）代替直接改变位置，以减少回流。
5. 改变字体
字体变化会影响文本的大小和布局，从而触发回流。
代码案例：
// 回流：改变字体
let box = document.getElementById('box');
box.style.fontSize = '20px';
避免方法：
尽量在页面加载时确定字体样式，避免动态修改。
6. 浏览器窗口大小变化
调整浏览器窗口大小会触发整个页面的回流。
避免方法：
使用CSS媒体查询和响应式设计，尽量减少窗口大小变化对布局的影响。
7. CSS动画和过渡
频繁的CSS动画和过渡效果会导致多次回流。
避免方法：
使用transform和opacity进行动画，因为它们只触发重绘而不会触发回流。
三、什么是重绘？哪些情况会导致重绘？如何避免？
重绘是指当页面元素的外观发生变化（如颜色、背景、透明度等），但没有影响布局时，浏览器会触发重绘来更新显示。
1. 改变元素颜色
修改元素的颜色属性会触发重绘。
代码案例：
// 重绘：改变元素颜色
let box = document.getElementById('box');
box.style.color = 'red';
避免方法：
集中修改样式，减少重绘次数。
2. 改变背景色或图片
修改元素的背景色或背景图片也会触发重绘。
代码案例：
// 重绘：改变背景色
let box = document.getElementById('box');
box.style.backgroundColor = 'blue';
避免方法：
尽量使用CSS类来管理样式，避免频繁修改内联样式。
3. 改变透明度
修改元素的透明度（opacity）会触发重绘。
代码案例：
// 重绘：改变透明度
let box = document.getElementById('box');
box.style.opacity = '0.5';
避免方法：
使用CSS动画或过渡效果，让透明度变化更平滑。
4. 改变visibility
将元素的visibility属性从hidden改为visible，会触发重绘。
代码案例：
// 重绘：改变visibility
let box = document.getElementById('box');
box.style.visibility = 'visible';
避免方法：
使用display属性代替visibility，以减少不必要的重绘。
5. CSS伪类和伪元素
使用伪类和伪元素（如:hover、:before、:after）进行样式修改，也会触发重绘。
避免方法：
合理使用伪类和伪元素，避免过度依赖导致性能问题。
6. 滚动
页面滚动时，可能会触发部分元素的重绘。
避免方法：
使用overflow: hidden或contain: paint来限制滚动区域的绘制。
四、性能影响
-
回流：
- 性能消耗：回流通常需要更多的计算资源，因为它涉及到重新计算页面的布局，这可能会导致整个页面的重新渲染。
- 影响范围：回流不仅会影响触发它的元素，还可能引起其他元素的重新排列和渲染，从而导致性能问题。
-
重绘：
- 性能消耗：相对于回流来说，重绘的性能消耗较少，因为它只是重新绘制元素的外观，不涉及页面布局的计算。
- 影响范围：重绘只影响触发它的元素，不会对其他元素造成影响。
五、关系与区别
-
关系：回流会引起重绘，但重绘不一定会引起回流。当一个元素的样式属性发生变化时，浏览器会首先进行重绘，然后根据新的样式属性重新计算元素的位置和大小（如果需要），这可能会导致回流。
-
区别：
- 触发条件：回流由DOM结构变化触发，重绘由样式属性变化触发。
- 性能消耗：回流性能消耗大，重绘性能消耗小。
- 影响范围：回流可能影响整个页面布局，重绘只影响元素外观。
六、总结 ：优化建议
- 减少DOM操作：尽量避免频繁地修改DOM结构，可以将多次修改合并为一次。
- 使用CSS类：通过更改CSS类来批量修改样式属性，而不是逐个修改样式。
- 避免在循环中操作样式：可以将元素先脱离文档流，修改完样式后再插入文档。
- 使用CSS动画：使用CSS3的动画和变换属性（如transform和opacity）来代替JavaScript操作样式，因为这些属性通常不会引起回流。
- 使用文档片段：通过Document Fragment来批量插入或删除元素，以减少回流的次数。
综上所述，回流和重绘在网页渲染过程中扮演着不同的角色，了解它们的区别并采取相应的优化措施对于提高网页性能至关重要。
看到这里的小伙伴，欢迎点赞、评论，收藏！
看到这里的小伙伴，欢迎点赞、评论，收藏！
看到这里的小伙伴，欢迎点赞、评论，收藏！