前端常见问题以及处理方式 - - - (三) 页面重绘与回流篇

最新推荐文章于 2025-02-06 18:13:34 发布

彭式程序猿

最新推荐文章于 2025-02-06 18:13:34 发布

阅读量1.9w

点赞数 2

分类专栏：前端常见问题和解决方案汇总文章标签：前端 javascript html

本文链接：https://blog.csdn.net/weixin_43523043/article/details/126117814

版权

前端常见问题和解决方案汇总专栏收录该内容

24 篇文章

订阅专栏

本文详细讲解了前端开发中的重绘与回流概念，探讨了哪些属性会导致它们的发生，并提供了优化策略，如减少DOM操作、优化CSS动画等，帮助开发者提升页面性能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

提示：前端查漏补缺，仅代表个人观点，不接受如何批评

提示：回流必将引起重绘，而重绘不一定会引起回流

一、重绘是什么？

重绘：在渲染树中的一些元素需要更新属性，而这些属性只是影响元素的外观、风格，不影响布局（不影响该节点在页面当中的空间位置及大小），譬如某个div标签节点的背景颜色、字体颜色等等发生改变，但是该div标签节点的宽、高、内外边距并不发生变化，此时触发浏览器重绘。

**只触发重绘的属性：**
color
border-style
border-radius
visibility
text-decoration
background
background-image
background-position
background-repeat
background-size
outline-color
outline
outline-style
outline-width
box-shadow

二、回流是什么？

当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)

当页面布局和几何属性改变时就需要回流

触发页面重布局的属性：
1、盒子模型相关属性会触发重布局：width ，height，padding，margin，display，border-width，border，min-height。

2、定位属性及浮动也会触发重布局：top，bottom，left，right，position，float，clear

3、改变节点内部文字结构也会触发重布局：text-align，overflow-y，font-weight，overflow，font-family，line-height，vertival-align，white-space，font-size

何时发生回流？


 1. 添加或者删除可见的DOM元素 
 2. 元素的位置发生变化 
 3. 元素的尺寸发生变化（包括外边距、内边距、边框大小、高度和宽度等）
 4.  内容发生变化，文本或者图片被另一个不同尺寸的图片所代替
 5.  页面开始渲染的时候
 6. 浏览器的窗口尺寸变化（回流是根据视口的大小来计算元素的位置和大小的）

三:优化策略

1.减少 DOM 操作
最小化 DOM 访问次数，尽量缓存访问 DOM 的样式信息，避免过度触发回流。
如果在一个局部方法中需要多次访问同一个 DOM，可以在第一次获取元素时用变量保存下来，减少遍历时间。
用事件委托来减少事件处理器的数量。
用 querySelectorAll() 替代 getElementByXX() 。

querySelectorAll()：获取静态集合，通过函数获取元素后，之后的改变并不会影响之前获取后存储到的变量。即获取到元素后与 HTML 中的元素没有关系了。

getElementByXX()：获取动态集合，通过函数获取元素后，之后的改变还是会动态添加到已经获取的元素中。通过此方法获取元素存储到变量时，之后每一次在 JS 函数中使用此变量都会再访问所对应的 HTML 元素。

2.减少回流


 1. 使用 vue/react 数据影响视图模式。 
 2. 避免设置大量的 style 内联属性，通过设置 style属性改变结点样式，每次设置都会触发 reflow，应使用 class 添加样式。 
 3. 不要使用 table 布局，因为 table中某个元素触发了 reflow，所有 table 元素都会触发 reflow。如果有使用table的场景，可以设置table-layout: auto; 或 table-layout: fixed; 这样可以让 table 逐行渲染，限制reflow 的影响范围。
 4. display：none 会造成重排；可以用 visibility：hidden; 代替。
 5. 使用 resize 事件时，做防抖和节流处理。 分离读写操作，
 6. 目前的主流浏览器都有渲染队列机制。

3.CSS及优化动画


 1. 减少使用 CSS 表达式。 批量处理样式，减少使用 JS 代码修改元素样式，尽量用修改 class 名的方式操作样式或动画。
 2. 可以把动画效果应用到 position 属性为 absolute 或 fixed 的元素上，这样对其他元素影响较小。
 3. 在动画实现的速度的选择上，应牺牲平滑度换取速度。比如实现动画时，以1个像素为单位移动这样最平滑，但是 reflow 会过于频繁，消耗大量CPU 资源，以3个像素为单位移动会好很多。 
 4. 开启 CSS3 动画硬件加速，即 GPU 加速，把渲染计算交给 GPU。
 5. 优先选择transform，因为 transform 可以开启硬件加速，规避回流。
 6. 对具有复杂动画的元素使用绝对定位，使它脱离文档流，否则会引起父元素及后续元素频繁回流。