浏览器渲染机制：重排（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.rhkb.cn/news/315057.html

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

相关文章

系统设计 --- E2E Test System

系统设计 --- E2E Test System

系统设计 --- E2E Test System 什么是E2EE2E Architecture Example 什么是E2E E2E&#xff08;端到端&#xff09;测试是一种软件测试方法&#xff0c;旨在模拟真实的用户场景&#xff0c;测试整个应用程序或系统的端到端功能和交互流程。E2E 测试涵盖了从用户界面到后端系统的…
阅读更多...
物联网实战--平台篇之(一)架构设计

物联网实战--平台篇之(一)架构设计

本项目的交流QQ群:701889554 物联网实战--入门篇https://blog.csdn.net/ypp240124016/category_12609773.html 物联网实战--驱动篇https://blog.csdn.net/ypp240124016/category_12631333.html 一、平台简介 物联网平台这个概念比较宽&#xff0c;大致可以分为两大类&#x…
阅读更多...
APP自定义身份证相机(Android +iOS)

APP自定义身份证相机(Android +iOS)

基本上同时兼容安卓和苹果的插件都需要付费&#xff0c;这里我找了2个好用的免费插件 1.仅支持安卓&#xff1a;自定义身份证相机&#xff08;支持蒙版自定义&#xff09;&#xff0c;内置蒙版&#xff0c;照片预览&#xff0c;身份证裁剪 - DCloud 插件市场、 2.支持iOS(已测…
阅读更多...
【Unity】AssetBundle加载与卸载

【Unity】AssetBundle加载与卸载

unity官方apiAssetBundle-LoadFromFileAsync - Unity 脚本 API 异步加载AB包 using UnityEngine; using System.Collections; using System.IO;public class LoadFromFileAsyncExample : MonoBehaviour {IEnumerator Start(){var bundleLoadRequest AssetBundle.LoadFromFil…
阅读更多...
区块链安全应用------压力测试

区块链安全应用------压力测试

测试要求&#xff1a; 1. 对以下AccountManager智能合约进行压测(基础要求set函数测试&#xff0c;balanceOf涵为20分加分项)2. 在本地链进行测试&#xff0c;需要监控本地进程的资源使用情况。每个进程的multiOutput属性为Avg3. 需要将每一个更改的配置文件截图&#xff0c;和…
阅读更多...
深度解析 Spring 源码：三级缓存机制探究

深度解析 Spring 源码：三级缓存机制探究

文章目录 一、 三级缓存的概述二、 三级缓存的实现原理2.1 创建Bean流程图2.2 getBean()2.3 doGetBean()2.4 createBean()2.5 doCreateBean()2.4 getSingleton() 三、 三级缓存的使用场景与注意事项3.1 在实际开发中如何使用三级缓存3.2 三级缓存可能出现的问题及解决方法 一、…
阅读更多...
【服务器部署篇】Linux下Ansible安装和配置

【服务器部署篇】Linux下Ansible安装和配置

作者介绍&#xff1a;本人笔名姑苏老陈&#xff0c;从事JAVA开发工作十多年了&#xff0c;带过刚毕业的实习生&#xff0c;也带过技术团队。最近有个朋友的表弟&#xff0c;马上要大学毕业了&#xff0c;想从事JAVA开发工作&#xff0c;但不知道从何处入手。于是&#xff0c;产…
阅读更多...
不可重复读，幻读和脏读

不可重复读，幻读和脏读

不可重复读一般在读未提交&#xff0c;读已提交这两种隔离级别出现&#xff0c;第一次读和第二次读的数据不一致。 幻读一般在读未提交&#xff0c;读已提交&#xff0c;可重复读出现&#xff0c;原因是第一个事务执行时&#xff0c;第二个事务完成了提交&#xff0c;在第一个…
阅读更多...
CISSP通关学习笔记：共计 9 个章节（已完结）

CISSP通关学习笔记：共计 9 个章节（已完结）

1. 笔记说明 第 0 章节为开篇介绍&#xff0c;不包括知识点。第 1 - 8 章节为知识点梳理汇总&#xff0c;8 个章节的知识框架关系如下图所示&#xff1a; 2. 笔记目录 「 CISSP学习笔记 」0.开篇「 CISSP学习笔记 」1.安全与风险管理「 CISSP学习笔记 」2.资产安全「 CISSP…
阅读更多...
网络安全实训Day15

网络安全实训Day15

写在前面 电子垃圾&#xff0c;堂堂恢复连载。本来不想分天数梳理了&#xff0c;但是最后要写实训报告&#xff0c;报告里还要有实训日记记录每日学的东西&#xff0c;干脆发这里留个档&#xff0c;到时候写报告提供一个思路。 网络空间安全实训-渗透测试 渗透测试概述 定义 一…
阅读更多...
react引入iconfont的svg图标

react引入iconfont的svg图标

react引入iconfont的svg图标 本文目录 react引入iconfont的svg图标普通图标通过link引入css组件内引入css使用 svg图标通过script引入js组件内引入js使用 通过封装组件自定义封装组件中调用 通过antd封装使用 普通图标 通过link引入css <link rel"stylesheet" h…
阅读更多...
Labelme安装和使用

Labelme安装和使用

简介&#xff1a;labelme是图形图像注释工具&#xff0c;它是用Python编写的&#xff0c;并将Qt用于其图形界面&#xff0c;是麻省理工&#xff08;MIT&#xff09;的计算机科学和人工智能实验室&#xff08;CSAIL&#xff09;研发的图像标注工具&#xff0c;人们可以使用该工具…
阅读更多...
【微信小程序调用百度API实现图像识别实战】-前后端加强版

【微信小程序调用百度API实现图像识别实战】-前后端加强版

前言&#xff1a;基于前面两篇图像识别项目实战文章进行了改造升级。 第一篇 入门【微信小程序调用百度API实现图像识别功能】----项目实战 第二篇 前后端结合 【微信小程序调用百度API实现图像识别实战】----前后端分离 这一篇主要讲述的是在第二篇的基础上新增意见反馈功能&a…
阅读更多...
QFD赋能人工智能：打造智能化需求分析与优化新纪元

QFD赋能人工智能：打造智能化需求分析与优化新纪元

在科技飞速发展的今天&#xff0c;人工智能(AI)已经渗透到我们生活的方方面面。然而&#xff0c;如何让AI更加贴合用户需求&#xff0c;提供更加精准和个性化的服务&#xff1f;这成为了一个亟待解决的问题。质量功能展开&#xff08;Quality Function Deployment&#xff0c;简…
阅读更多...
go设计模式之工厂方法模式

go设计模式之工厂方法模式

工厂方法模式 什么是工厂方法模式 工厂方法模式是一种创建型设计模式&#xff0c;它定义了一个用于创建对象的接口&#xff0c;让子类决定实例化哪一个类。工厂方法使一个类的实例化推迟到其子类。 这个接口就是工厂接口&#xff0c;子类就是具体工厂类&#xff0c;而需要创…
阅读更多...
Android 开发工具使用

Android 开发工具使用

c调试 在NDK调试的时候&#xff0c;如果找不到 符号的话&#xff0c;我们可以在调试配置中添加符号地址的全路径一直到根目录&#xff1a;&#xff0c;xxx/armeabi-v7a&#xff1a; You must point the symbol search paths at the obj/local/ directory. This is also not a …
阅读更多...
黑盒优化系列（一）：自动化提示词优化【一、绪论】

黑盒优化系列（一）：自动化提示词优化【一、绪论】

大语言模型的提示词 随着ChatGPT等大语言模型的问世&#xff0c;我们获取知识的方式从单一的搜索引擎如Google转变为类似ChatGPT这种通过 Q & A 方式提供的方法。 我们尝试对比一下不同提示词&#xff0c;对应的模型输出 ChatGPT无提示词 API&#xff1a; ChatGPT 3.5 …
阅读更多...
解决HttpServletRequest中的InputStream/getReader只能被读取一次的问题

解决HttpServletRequest中的InputStream/getReader只能被读取一次的问题

一、事由 由于我们业务接口需要做签名校验&#xff0c;但因为是老系统了签名规则被放在了Body里而不是Header里面&#xff0c;但是我们不能在每个Controller层都手动去做签名校验&#xff0c;这样不是优雅的做法&#xff0c;然后我就写了一个AOP&#xff0c;在AOP中实现签名校…
阅读更多...
mysql-sql-练习题-2-窗口函数

mysql-sql-练习题-2-窗口函数

窗口函数 访问量max sum建表窗口函数连接 直播间人数 第1、3名建表排名sum 访问量max sum 每个用户截止到每月为止&#xff0c;最大单月访问次数&#xff0c;累计到该月的总访问次数 建表 create table visit(uid1 varchar(5) comment 用户id,month1 varchar(10) comment 月…
阅读更多...
Rust 实战练习 - 12. Axum Web 简单demo

Rust 实战练习 - 12. Axum Web 简单demo

Rust Web 历程 Rust 的异步框架tokio非他莫属&#xff0c;而web框架一直是悬而未决&#xff0c;说到底还是因为没有官方成熟的方案指引&#xff0c;大家各玩各的&#xff0c;互不兼容&#xff0c;白白浪费精力。 这个事情一直等到半官方组织tokio推出axum有了改善。但是市场上…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023