浏览器重绘与重排（回流）

最新推荐文章于 2024-05-20 13:11:50 发布
原创 最新推荐文章于 2024-05-20 13:11:50 发布 · 217 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

博客主要围绕浏览器重绘与重排展开。重绘和重排是浏览器渲染机制中的重要概念，了解它们有助于优化网页性能。
11.3 性能优化：懒加载、虚拟列表、浏览器重绘与回流
勤奋的码农
09-03 83
本文深入探讨了前端性能优化的三大核心技术：懒加载、虚拟列表以及浏览器重绘与回流。懒加载通过延迟加载非关键资源提升初始加载速度，介绍了图片、组件和路由的懒加载实现方案，并提供了自适应网络条件的优化策略。虚拟列表部分解析了大数据集渲染原理，展示了基础React实现和动态高度支持等高级技巧，包括滚动节流优化。这些技术可显著提升Web应用性能，减少资源消耗，改善用户体验。
介绍下重绘和回流（Repaint & Reflow），以及如何进行优化
weixin_30578677的博客
07-17 216
1. 浏览器渲染机制 浏览器采用流式布局模型（Flow Based Layout） 浏览器会把HTML解析成DOM，把CSS解析成CSSOM，DOM和CSSOM合并就产生了渲染树（Render Tree）。 有了RenderTree，我们就知道了所有节点的样式，然后计算他们在页面上的大小和位置，最后把节点绘制到页面上。 由于浏览器使用流式布局，对Render Tree的计算通常只需要遍...
浏览器：重绘（repaint）与回流/重排（reflow）
snow的博客
11-06 2857
3.1、理解回流/重排当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候，这时候是一定会发生回流的，因为要构建render tree。在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程成为重绘。回流：是布局或者几何属性需要改变就称为回流。
浏览器的重排和回流
我不要秃头的博客
06-18 379
浏览器的重排和回流 我们如果想了解浏览器的重绘和回流，首先要了解浏览器的渲染过程 接触到vue之后，就会有很多关于重绘和回流的情况。详细了解可以做到优化性能。 浏览器的构成 总所周知浏览器的主要是由 用户界面 浏览器引擎 渲染引擎(内核) js 引擎 我们常说的内核就是渲染内核，原本内核是指渲染引擎和js引擎，随着js引擎的越开独立，现在的内核专指渲染内核。 下边是常见的渲染内核： Chrome(谷歌): webkit(苹果内核),后单独采用了webkit的分支之一blink，类似脱胎于unix的
浏览器重排和重绘
本杰明的博客
06-08 3088
重排浏览器下载完页面中的所有组件（HTML、JavaScript、CSS、图片）之后会解析生成两个内部数据结构（DOM树和渲染树），DOM树表示页面结构，渲染树表示DOM节点如何显示。重排是DOM元素的几何属性变化，DOM树的结构变化，渲染树需要重新计算。重绘重绘是一个元素外观的改变所触发的浏览器行为，例如改变visibility、outline、背景色等属性。浏览器会根据元素的新属性重新绘制，使元
浏览器重绘与重排
蜗牛先生
09-20 931
当我们在做前端开发的时候，肯定会碰到操作DOM的情况，在操作DOM的时候，就会引起浏览器的重绘与重排。   ▍重绘 如果DOM变化仅仅影响的了visibility、outline、背景色等等非几何属性，此时就发生了重绘（repaint）而不是重排，因为布局没有发生改变。   ▍重排 当DOM变化影响了元素的几何属性（宽、高改变等等），浏览器此时需要重新计算元素几何属性，并且页面中...
css重绘与重排的方法
09-27
CSS重绘与重排是浏览器在处理页面渲染时的两个关键过程，它们直接影响着网页的性能表现。了解并掌握这两个概念对于优化网页加载速度和用户体验至关重要。 首先，我们来看一下**重绘**。重绘是指当一个元素的外观...
【CSS】回流/重排与重绘
qq_43057018的博客
08-08 1224
现代的浏览器都是很聪明的，由于每次重排都会造成额外的计算消耗，因此大多数浏览器都会通过队列化修改并批量执行来优化重排过程。浏览器会将修改操作放入到队列里，：将元素的透明度设置为 0，以此来实现元素的隐藏。：使用元素裁剪的方法来实现元素的隐藏，这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。：渲染树不会包含该渲染对象，因此该元素不会在页面中占据位置，也不会响应绑定的监听事件。：元素在页面中仍占据空间，但是不会响应绑定的监听事件。.
【浏览器渲染机制】回流（Reflow）和重绘（Repaint）
一起寻找DX3906-探索未知
05-20 1102
回流（Reflow）和重绘（Repaint）性能优化
高性能JavaScript 重排与重绘(2)
10-23
例如，浏览器会利用队列来延迟执行多次的DOM变化，通过批量处理的方式减少重排和重绘的次数。然而，开发者在使用诸如获取布局信息的操作时，会强制刷新队列并立即执行这些变化，如使用offsetWidth、offsetHeight、...
浏览器重绘和回流
wjbishe的博客
10-10 381
在讨论页面重绘、回流之前，需要对页面的呈现流程有些了解，页面是怎么把html结合css等显示到浏览器上的。下面的流程图显示了浏览器对页面的呈现的处理流程。 1.  浏览器把获取到的HTML代码解析成1个DOM树，HTML中的每个tag都是DOM树中的1个节点，根节点就是我们常用的document对象。DOM树里包含了所有HTML标签，包括display:none隐藏，还有用JS动态添
浏览器的重绘与回流
CedricD的博客
06-04 263
重绘和回流会在我们设置节点样式时频繁出现，同时也会很大程度上影响性能。 重绘是当节点需要改变外观而不会影响布局，比如改变color就称为重绘 回流是布局或者几何属性需要改变就称为回流。 回流必定会发生重绘，重绘不一定会引发回流。回流所需的成本比重绘高的多，改变父节点里的子节点很可能会导致父节点的一系列回流。 以下几个动作可能会导致性能问题： 改变 window 大小 改变字体 添加或删除样式 定位或者浮动 盒模型 减少重绘和回流 使用 transform 替代 top <div class
浏览器的重绘和回流
m0_37115637的博客
03-04 528
浏览器的重绘和回流是比较常见的，在文章的开始时，我们首先要知道，浏览器是怎么进行渲染的。 一、浏览器的渲染机制 从上面这个图上，我们可以看到，浏览器渲染过程如下： 解析HTML，生成DOM树，解析CSS，生成CSSOM树 将DOM树和CSSOM树结合，生成渲染树(Render Tree) Layout(回流):根据生成的渲染树，进行回流(Layout)，得到节点的几何信息...
浏览器的重绘与回流(Reflow&Repaint)
u17300032的博客
08-02 358
什么是重绘/回流？它们有什么区别？如何进行优化？ 浏览器渲染流程 1、解析HTML生成DOM树 2、解析CSS生成CSSOM规则树 3、将DOM树与CSSOM规则树合并在一起生成渲染树 4、遍历渲染树开始布局，计算每个节点的位置大小信息 5、将渲染树每个节点绘制到屏幕 什么是回流（重排reflow）？ 回流（重排reflow）：对DOM树进行渲染，只要修改DOM或修改元素的形状大小，就会触发reflow,reflow的时候，浏览器会使已渲染好受到影响的部分失效，并重新构造这部分，完成reflow后，浏览器
浏览器的重绘和重排
Jessica0906的博客
11-13 426
此文章参考以下链接：http://www.css88.com/archives/4991 根据参考文章结合自己理解，写成适合自己理解和记忆的方式。 ❤浏览器如何绘制页面？ 浏览器从下载文档到显示页面的大体过程如下：浏览器引擎解析html文档来构建DOM树，之后根据DOM元素的几何属性构建渲染树，渲染树的每个节点都有大小和边距等属性，类似盒子模型（隐藏元素不需显示，故渲染树中不包含隐
浏览器重绘和重排
霜叶的博客
03-01 769
重绘和重拍
说说 浏览器的重绘和回流
最新发布
06-25
### 浏览器渲染机制中的重绘与回流 #### 重排（Reflow）与重绘（Repaint）的概念及其区别 在浏览器的渲染过程中，**重排**（也称为回流）是指当 DOM 树或 CSSOM 树发生变化时，浏览器需要重新计算元素的位置和几何信息，并更新布局的过程。这一过程通常较为昂贵，因为它涉及到大量计算，包括元素的大小、位置以及父子节点之间的关系等[^1]。 **重绘**则是指在不改变元素布局的情况下，仅更新元素的视觉样式，例如颜色、背景色、透明度等。由于不需要重新计算布局信息，因此重绘的开销远小于重排[^2]。 两者的主要区别在于： - **重排会触发重绘**：当发生重排时，元素的布局变化会导致其视觉部分也需要重新绘制。 - **重绘不会触发重排**：如果只是改变了元素的颜色等外观属性，而没有影响其布局，则只需进行重绘。 #### 触发条件 以下是一些常见的触发重排和重绘的操作： - **触发重排**的操作包括但不限于： - 添加或删除可见的 DOM 元素 - 修改元素的尺寸（如宽度、高度） - 修改元素的位置（如 `top`、`left`） - 改变窗口大小 - 获取某些会引起布局刷新的属性，如 `offsetWidth`、`offsetHeight` 等[^1] ```javascript const element = document.getElementById('box'); element.style.width = '200px'; // 修改尺寸，触发重排 console.log(element.offsetWidth); // 获取 offsetWidth，可能触发同步重排 ``` - **触发重绘**的操作通常涉及样式的变化，但不涉及布局调整，例如： - 修改颜色 - 修改背景色 - 修改边框颜色或阴影 - 修改透明度（opacity） ```css .box { background-color: red; transition: background-color 0.3s ease; } ``` ```javascript document.getElementById('box').style.backgroundColor = 'blue'; // 触发重绘 ``` #### 性能优化策略 为了提高页面性能，减少不必要的重排和重绘是关键。以下是一些有效的优化手段： - **批量修改 DOM 和样式**：避免多次对 DOM 进行单独操作，可以先将多个修改合并后一次性执行，从而减少重排次数[^4]。 ```javascript const element = document.getElementById('box'); element.classList.add('new-style'); // 使用 class 替代 style 操作 ``` - **使用 CSS 动画替代 JS 动画**：对于动画效果，推荐使用 `transform`、`opacity` 等 CSS 属性，这些属性不会引起重排，且支持硬件加速，性能更优[^3]。 ```css .animate { transform: translateX(100px); opacity: 0.5; transition: all 0.3s ease; } ``` - **避免在循环中频繁访问布局属性**：在循环体内读取 `offsetWidth`、`clientHeight` 等属性会强制浏览器同步执行重排，影响性能[^1]。 ```javascript // 不推荐 for (let i = 0; i < elements.length; i++) { console.log(elements[i].offsetWidth); } // 推荐 const widths = []; for (let i = 0; i < elements.length; i++) { widths.push(elements[i].offsetWidth); } console.log(widths); ``` - **复杂动画使用绝对定位**：将动画元素设置为 `position: absolute` 或 `fixed`，使其脱离文档流，避免影响其他元素的布局。 ```css #animation { position: absolute; top: 0; left: 0; } ``` ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值