浏览器渲染机制：重排（Reflow）与重绘（Repaint）以及Vue优化策略

在这里插入图片描述

浏览器渲染机制是一个复杂但有序的过程，其目的是将HTML、CSS和JavaScript代码转化为用户可以看到和交互的视觉界面。重排（Reflow）与重绘（Repaint）是浏览器渲染过程中对页面元素进行更新的两个重要步骤，理解它们的工作机制有助于我们进行性能优化。本文介绍了浏览器渲染机制，重排、重绘概念，以及何时会发生重排、重绘以及如何避免不必要的重排、重绘，提升性能。另外，介绍了Vue优化重排和重绘机制以及开发者在实际项目中可以采取的优化重排和重绘策略。

一、浏览器渲染机制：

1. 解析HTML并构建DOM树 (Document Object Model)

  • 当浏览器接收到HTML文档时，会通过HTML解析器逐行读取和解析文档内容，将标签、属性和文本内容转换为DOM节点，构建一棵表示文档结构的树状模型。

示例：

<html><head><title>页面标题</title></head><body><div id="content"><h1>Hello, World!</h1><p>这是一个简单的示例。</p></div></body>
</html>

对应的DOM树将有一个html根节点，下面依次挂载head和body节点，body内包含一个div节点和它的子节点h1和p节点。

2. 解析CSS并构建CSSOM树 (CSS Object Model)

  • 浏览器同时解析CSS样式表，无论是外链样式表还是内嵌样式，都将CSS规则转换成CSSOM树。CSSOM树记录了所有的样式规则和它们应用到哪些DOM元素上。

3. 生成渲染树 (Render Tree)

  • 渲染树是由DOM树和CSSOM树合并而成的，它仅包含可见内容（即没有display: none等隐藏属性的节点），且每个节点都包含了自身及其计算后的样式信息。
  • 示例中，渲染树将包括body内的div、h1和p节点，以及应用于它们的所有样式。

4. 布局 (Layout / Reflow)

  • 在生成渲染树之后，浏览器会进行布局（也称回流，Reflow）。此阶段，浏览器会计算每个渲染对象在视口(viewport)中的具体几何位置和尺寸，包括宽度、高度以及相对于父元素或视口的位置。
  • 假设CSS中设置了div#content { width: 80%; margin: auto }，那么在布局阶段，浏览器会计算div#content占据视口宽度的80%，并居中显示。

5. 绘制 (Paint / Repaint / Composite)

  • 完成了布局阶段后，浏览器按照渲染树顺序进行绘制，将各个节点的内容、背景、边框、阴影等视觉信息通过图形处理器（GPU）绘制到屏幕上。
  • 如果元素需要重叠，浏览器还会对部分或全部内容进行分层处理（compositing），例如使用transform或opacity属性的元素会被提升到单独的图层进行合成。

6. 增量渲染与优化

  • 当DOM变化时，浏览器尽可能地只重新计算受影响部分的布局和绘制，而不是全局重新渲染。例如，改变某个元素的颜色通常只会触发重绘（Repaint），而不改变布局的话，则不需要回流（Reflow）。

总之，浏览器通过以上步骤确保页面内容快速、准确地呈现在用户面前。在实际开发中，了解这一机制有助于优化页面性能，减少不必要的重排和重绘操作。

二、重排（Reflow）

重排（Reflow）是指在Web前端开发中，当浏览器渲染树中DOM元素的几何属性发生变化，或者由于某种原因需要重新计算布局时，浏览器重新计算元素的几何尺寸、相对位置以及其他相关的CSS属性，并更新渲染树的过程。这个过程可能会影响渲染树中其他元素的位置和尺寸，因此常常伴随着一系列连锁反应，对于复杂的页面结构和大量DOM元素而言，重排可能会消耗较大的计算资源，影响页面性能。

1.何时会发生重排：

重排通常发生在以下几种情况下：

1.1. DOM 结构变化：

  • 添加或删除可见DOM元素。
  • 元素的内容发生变化导致尺寸变化，比如文字数量改变使得容器高度增加。

1.2. 样式属性变更：

  • 影响元素几何属性的CSS属性发生变化，例如：
    • 宽度（width）、高度（height）、外边距（margin）、内边距（padding）、边框（border）等。
    • 顶部、底部、左边、右边定位（top, bottom, left, right）。
    • 浮动（float）状态改变。
    • display属性更改（例如从none变为block）。
    • flex或grid布局中的相关属性更改。

1.3. 获取某些布局信息：

  • 当JavaScript请求读取依赖于布局信息的样式属性，如offsetTop, offsetLeft, scrollTop, scrollWidth等时，浏览器可能会触发重排以便给出精确值。

1.4. 窗口或设备视口尺寸变化：

  • 用户调整浏览器窗口大小时，特别是响应式设计场景。

2.如何避免不必要的重排

2.1. 合并DOM操作：

  • 如果需要对多个元素进行改动，尽量一次性完成，而不是分散在多处代码中分别操作。
// 避免的做法
for (var i = 0; i < elements.length; i++) {elements[i].style.width = '100px';
}// 优化做法
var style = 'width: 100px;';
for (var i = 0; i < elements.length; i++) {elements[i].style.cssText += style; // 一次性设置所有元素样式
}

2.2. 离屏DOM操作：

  • 使用DocumentFragment创建子节点，完成后一次性插入DOM树中。
// 创建一个文档片段
var fragment = document.createDocumentFragment();// 在文档片段中构建DOM结构
for (var i = 0; i < 100; i++) {var el = document.createElement('div');el.textContent = 'Item ' + i;fragment.appendChild(el);
}// 一次性将文档片段加入DOM
document.getElementById('container').appendChild(fragment);

2.3. 使用CSS动画替代JavaScript动画：

  • 使用CSS3的transition或animation来改变元素的位置或尺寸，而非直接修改样式，因为CSS动画通常仅引发重绘而非重排。
.box {transition: all 0.5s ease-in-out;
}// JavaScript 中只需切换类名即可
element.classList.add('move');

2.4. 预读取布局信息：

  • 如果需要连续读取布局信息，先读取后操作，避免在操作过程中反复查询。
// 获取原始位置，同时触发一次重排
var originalTop = element.offsetTop;// 后续操作不再触发重排
element.style.top = originalTop + 'px';

2.5. 使用绝对定位：

  • 对于需要频繁改变位置或尺寸的元素，使用position: absolute或fixed可以使其脱离文档流，独立于常规布局系统，从而限制重排的影响范围。

2.6. 优化CSS选择器：

  • 避免过于复杂的选择器，以免每次样式更改时导致大量元素的重排。

2.7. 使用硬件加速：

  • 使用transform: translateZ(0)或will-change属性提示浏览器针对特定属性进行硬件加速，有助于减少重排。

通过以上措施，可以有效减少不必要的重排，从而提高页面渲染性能。注意，虽然这里提供了部分示例，但实际优化还需要结合具体应用场景进行分析。随着浏览器引擎的进步，一些低级别的优化细节可能有所变化，最新的最佳实践建议参考官方文档和最新的性能测试结果。

三、重排（Reflow）

重绘（Repaint）在Web前端开发领域特指浏览器的一种渲染操作。当网页中元素的样式（style）发生改变，但这种改变不影响元素在文档布局（layout）中的位置和尺寸时，浏览器仅需要重新绘制（即重绘）受影响部分的像素，以反映元素新的视觉表现。重排可能会消耗较大的计算资源，影响页面性能。

1.何时会发生重绘（Repaint）：

重绘通常发生在以下几种情况：

1.1. 视觉表现相关的样式属性改变：

  • 改变元素的颜色（color）、背景色（background-color）、边框颜色（border-color）、阴影（box-shadow）、不透明度（opacity）等不影响布局的视觉属性。
  • 图像资源（如src属性）加载完成或变化。
  • 文本内容变化，但并未引起元素尺寸变化。

1.2. 伪类或伪元素激活：

  • 当:hover、:focus等伪类被触发，或者:before、:after等伪元素样式发生变化时。

1.3. 元素透明度变化：

  • 当元素的opacity属性改变时，不仅当前元素会重绘，其下面的所有内容也可能受到影响，因为它们都需要重新混合。

2.如何避免不必要的重绘：

以下是减少重绘的策略及其示例：

2.1. 批量修改样式：

  • 避免逐个更改元素样式，可以先将新的样式保存在一个变量中，然后一次性赋值给元素。
// 避免的做法
element.style.color = 'red';
element.style.backgroundColor = 'blue';// 优化做法
element.style.cssText = 'color: red; background-color: blue;';
// 或
var newStyle = element.className;
newStyle += ' my-red-background-class';
element.className = newStyle;

2.2. 使用CSS类代替直接样式修改：

  • 修改元素的class属性来应用预先定义好的样式，而不是直接修改单个样式属性。
/* CSS */
.red-background { background-color: red; }// JavaScript
element.classList.add('red-background');

2.3. 避免不必要的视觉属性变化：

  • 如果只是简单地改变颜色或背景色，而这些改变并不影响用户体验，可以在用户交互的关键时刻（例如鼠标悬停或焦点事件）才触发重绘。

2.4. 利用CSS3动画与过渡：

  • 使用CSS transition 或 animation 规则来处理动画效果，相比JavaScript定时器不断修改样式属性，CSS动画能够更高效地处理重绘。
.box {transition: background-color 0.5s ease;
}// JavaScript 中只需切换类名
element.classList.add('change-color');

2.5. 利用合成层（Compositing Layers）：

  • 当元素启用3D变换或使用will-change属性时，浏览器可能将元素放入独立的图层进行渲染，这可以将重绘限制在单个图层内部，而不影响其他元素。
.element-to-animate {will-change: transform;/* 或 */transform: translateZ(0); /* 触发硬件加速 */
}

2.6. GPU加速：

  • 使用硬件加速特性（如transform或opacity）来进行动画处理，因为GPU能高效处理这类属性的变化，且通常不会触发其他元素的重绘。

通过上述方法，可以减少不必要的重绘次数，进而提升页面渲染效率。同样地，请关注浏览器性能优化的最佳实践和最新进展，以适应不断发展的技术和标准。

四、Vue 重排、重绘

在Vue.js中，由于其响应式设计和虚拟DOM（Virtual DOM）机制，Vue自动在很大程度上进行了重排（Reflow）和重绘（Repaint）相关的性能优化。Vue通过追踪数据变化并在必要时更新视图，而不是每次数据变动就立即操作实际DOM，有效地减少了无谓的重排和重绘。

1、Vue优化重排与重绘优化

1.1. 虚拟DOM：

  • 当数据发生变化时，Vue会基于新的数据生成一个新的虚拟DOM树。
  • Vue通过算法比较新旧虚拟DOM树的差异（diff算法），找出最小化的变更集。
  • 只将真正变化的部分反映到实际DOM中，这样极大地减少了触发浏览器重排和重绘的DOM操作。

1.2. 异步更新队列：

  • Vue并不会立即执行所有的数据更改，而是将它们收集在一个队列中。
  • 在下一个事件循环tick中，Vue会把队列中的变化批量更新到真实DOM，这有助于合并多个更新操作，避免连续的重排和重绘。

1.3. 组件级更新：

  • Vue组件有自己的局部作用域，因此组件内部的更新只会影响该组件及其子组件，不会引发全局的重排和重绘。

1.4. 事件委托与防抖节流：

  • Vue鼓励开发者采用事件委托，减少直接在DOM节点上的事件绑定，从而降低DOM操作带来的重排重绘风险。
  • 对于可能频繁触发更新的方法，可以通过防抖（debounce）或节流（throttle）函数进行优化，避免过度频繁的UI更新。

2、开发者优化重排和重绘

Vue.js 开发者在优化重排（reflow）和重绘（repaint）方面可以采取以下策略：

  • 利用Vue的响应式原理：

    • Vue.js通过虚拟DOM和高效的Diff算法自动优化了大部分DOM操作。当状态变化时，Vue只会更新受影响的DOM部分，而不是整个页面，以此减少不必要的重排和重绘。

  • 减少不必要的数据观察：

    • 尽量避免不必要的深度监听或大量对象属性的观察。对于大型对象，可以考虑浅层监听或使用Object.freeze()等方法防止意外修改。

  • 组件级别的优化：

    • 组件拆分和复用有助于限制DOM更新范围。在独立组件内做状态变更，能够使重排重绘的影响局限在组件内部。

  • CSS样式优化：

    • 使用CSS类名代替直接修改样式属性，因为修改类名通常只会触发重绘而不会触发重排。
    • 将不会改变布局的样式（如颜色、透明度等）单独更改，减少强制重排的情况。

  • 异步更新队列：

    • Vue会把同一事件循环 tick 中的数据变化集中起来，一次性更新DOM，利用 this.$nextTick() 确保在DOM更新后执行依赖于DOM状态的操作。

  • 列表渲染优化：

    • 对于大型列表，使用v-for时，给每一项加上唯一的key，Vue会更加高效地跟踪和更新项目。
    • 针对长列表滚动场景，可以结合Intersection Observer API或者Vue自己的<infinite-scroll>组件实现懒加载和虚拟滚动，仅渲染视口内的元素。

  • 避免频繁的DOM查询：

    • 减少在组件生命周期钩子或计算属性中使用document.querySelector()或this.$refs频繁查找DOM元素的操作，这类操作可能会触发重排。

  • 事件委托和节流防抖：

    • 将事件处理器委托到父元素上，减少直接绑定到大量子元素上的事件监听器。
    • 对于高频触发的事件，例如窗口大小变化或滚动事件，使用节流（throttle）或防抖（debounce）函数来限制更新频率。

  • 批处理DOM更新：

    • 如果需要执行一系列可能导致DOM更新的操作，尝试将其合并到一个Vue实例的生命周期钩子（如updated）中一次性完成。

  • 使用Portals或者Render Functions：

    • 在特定情况下，可以通过Vue的render函数或者Portal技术将组件渲染到非当前组件树层级的位置，这样可以避免深层嵌套组件导致的过度重排。

综上所述，Vue开发人员在实践中应当充分理解Vue的工作原理，并结合上述建议来编写高性能、低重排重绘开销的代码。

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/650573.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

QML中使用正则表达式

QML中使用正则表达式

我想在TextField控件中使用正则表达式&#xff0c;然后GPT4给出的回答是这样的&#xff1a; TextField {id: versionInputplaceholderText: qsTr("输入版本号")validator: RegExpValidator { regExp: /^[a-zA-Z0-9]*$/ } // 仅允许字母和数字width: 120 // 设置合…
阅读更多...
Linux系统-DHCP原理与配置

Linux系统-DHCP原理与配置

目录 一.DHCP工作原理 1.了解DHCP服务 2.使用DHCP的好处 3.DHCP的分配方式 4.DHCP的租约过程 二.DHCP服务器的配置 1.首先先关闭防火墙 2. 安装DHCP有关软件包 3.查看系统的配置文件​编辑 4.设置参数 5.网络配置 一.DHCP工作原理 1.了解DHCP服务 DHCP(Dynamic Hos…
阅读更多...
【Linux】详解信号产生的方式

【Linux】详解信号产生的方式

一、kill命令 在命令行中通过kill -数字 pid指令可以给指定进程发送指定信号。这里说明一下几个常见的信号&#xff1a; SIGINT&#xff08;2号信号&#xff09;&#xff1a;中断信号&#xff0c;通常由用户按下CtrlC产生&#xff0c;用于通知进程终止。SIGQUIT&#xff08;3号…
阅读更多...
路由重分布的概念与配置

路由重分布的概念与配置

路由重分布的概念 l 路由重分布是指连接不同路由域&#xff08;自治系统&#xff09;的边界路由器&#xff0c;它在路由协议之间交换和通告路由信息 从一种协议&#xff08;含静态/直连路由&#xff09;到另一种协议 同一种协议的多个实例 路由重分布的背景 网络出口位置…
阅读更多...
Liunx下用C语言模拟实现 —— 封装文件操作接口

Liunx下用C语言模拟实现 —— 封装文件操作接口

一、前提 本篇博客将循序渐进的模拟实现C语言中&#xff0c;简单版的对FILE和一些简单的文件操作接口的实现&#xff0c;在上一篇文件操作原理篇我们知道&#xff0c;实际的实现就是对系统接口的封装&#xff0c;为了巩固和练习之前学到的概念&#xff0c;我们也来简单的实现对…
阅读更多...
day05 51单片机-外部中断、定时器

day05 51单片机-外部中断、定时器

1 外部中断——按键控制LED亮灭 1.1 需求描述 本案例通过检测SW3触发的外部中断实现P00对应LED的亮灭。 1.2 硬件设计 1.2.1 中断简介 单片机中断是一种重要的计算机编程概念，用于处理在程序执行过程中突然发生的事件或条件。这些事件可以是外部硬件触发的，如按下按钮、…
阅读更多...
【Leetcode每日一题】 穷举vs暴搜vs深搜vs回溯vs剪枝_全排列 - 子集（难度⭐⭐）（65）

【Leetcode每日一题】 穷举vs暴搜vs深搜vs回溯vs剪枝_全排列 - 子集（难度⭐⭐）（65）

1. 题目解析 题目链接&#xff1a;78. 子集 这个问题的理解其实相当简单&#xff0c;只需看一下示例&#xff0c;基本就能明白其含义了。 2.算法原理 算法思路详解&#xff1a; 为了生成数组 nums 的所有子集&#xff0c;我们需要对数组中的每个元素进行“选择”或“不选择…
阅读更多...
【面试经典 150 | 回溯】电话号码的字母组合

【面试经典 150 | 回溯】电话号码的字母组合

文章目录 写在前面Tag题目来源解题思路方法一&#xff1a;回溯 写在最后 写在前面 本专栏专注于分析与讲解【面试经典150】算法&#xff0c;两到三天更新一篇文章&#xff0c;欢迎催更…… 专栏内容以分析题目为主&#xff0c;并附带一些对于本题涉及到的数据结构等内容进行回顾…
阅读更多...
低代码技术与仓储管理的新纪元：革命性的供应链变革

低代码技术与仓储管理的新纪元：革命性的供应链变革

引言 在当今数字化时代&#xff0c;企业对于创新和效率的追求越发迫切。在这样的背景下&#xff0c;低代码技术应运而生&#xff0c;成为企业数字化转型的重要工具之一。低代码技术的崛起为企业提供了一种快速、灵活、成本效益高的开发方式&#xff0c;大大缩短了软件开发周期…
阅读更多...
人工智能好多人都在用，那么用户画像要怎么看？

人工智能好多人都在用，那么用户画像要怎么看？

用户画像是通过对用户行为、偏好、兴趣等数据进行分析和整理&#xff0c;从而形成的关于特定用户群体的描述和模型。在人工智能应用中&#xff0c;用户画像可以起到指导个性化推荐、精准营销、产品设计等方面的作用。以下是用户画像在人工智能应用中的几个重要方面&#xff1a;…
阅读更多...
SecuPress Pro 专业级WordPress网站安全防护插件优化版

SecuPress Pro 专业级WordPress网站安全防护插件优化版

下载地址&#xff1a;SecuPress Pro 专业版.zip SecuPress Pro&#xff1a;专业的WordPress安全解决方案 如果您没有时间进行每周扫描&#xff0c;SecuPress Pro将是您的理想选择。SecuPress Pro提供了所有SecuPress Free的功能&#xff0c;同时还增加了一些高级选项&#xff…
阅读更多...
java 词法分析练习

java 词法分析练习

import parser.Parser;import java.util.ArrayList; import java.util.Arrays; import java.util.List;public class Main {public static void main(String[] args) {// 关键词List<String> keyList new ArrayList<>(Arrays.asList("int","String…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023