DOM回流和重绘

最新推荐文章于 2023-12-27 07:45:00 发布
最新推荐文章于 2023-12-27 07:45:00 发布
阅读量263 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： HTML 文章标签： DOM 回流 重绘
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/one_four_two/article/details/88953218

1、回流：浏览器通过计算盒子模型的宽高、位置、样式将元素放到它该出现的位置称为回流。
2、重绘：盒子模型的宽高、位置、样式确定后浏览器把这些元素绘制出来称为重绘。

前端 Interview - 回流和重绘，如何避免？
一个平平无奇的程序媛
12-02 834
在前端性能优化中，我们经常提到的两个概念 回流 和 重绘，今天我们详细来说说，什么是回流、重绘？什么情况下会触发回流或重绘？如何避免？
JS动画 与 CSS3动画 及 回流和重绘
YuLong的博客
11-14 2300
文章目录JS动画CSS3动画浏览器的渲染流程回流(重排) 和 重绘 JS动画 JS动画：也被称为 逐帧动画，在时间帧上绘制内容，一帧一帧的，所以它的可再造性很高，几乎可以完成任何想要的动画形式。 缺点： 有可能造成丢帧的情况。JavaScript在浏览器的主线程中运行，而主线程中还有其它需要运行的JavaScript脚本、样式计算、布局、绘制任务等，对其干扰导致线程可能出现阻塞，从而造成丢帧。 代码的复杂度高于CSS动画。 优点： JavaScript动画控制能力很强，可以在动画播放过程中对动画进行控
DOM的回流和重绘
xiaocuizao的博客
08-12 385
DOM的回流：当页面中的元素的位置，大小或结构，定位发生改变，会引发浏览器对当前页面的结构进行重新的计算，非常耗性能。 DOM的重绘：当元素的背景，透明度，颜色等发生变化，那么浏览器会对元素进行重新描绘；这个过程就是浏览器的重绘。 我们前端通常会做一些首屏优化，来增强用户的体验，在首屏优化里，常常会用到懒加载，按需引入一些处理。但是这时也同时会导致DOM的回流和重绘 ...
DOM的重绘以及回流
李耀书
03-29 660
​ ** 首先**要想了解什么是DOM的重绘和回流，首先我们要知道的是什么是DOM！ ​ DOM的全拼为 Domcument Object Model(文档对象模型)是一种用于HTML和XML文档的编程接口，它给文档提供了一种结构化的标识方法，可以改变文档的内容和呈现方式。 1、什么是DOM的回流 当页面中元素的位置,大小或结构、定位发生改变，会引发浏览器对当前页面的结构进行重新的计算、这是非常耗性能的。 2、什么是DOM的重绘 ​ 就是当元素中的背景、透明度、颜色发生变化后，浏览器会
DOM的重绘和回流
yanchuidong的博客
03-06 327
dom的重绘和回流： 1,html 加载时发生了什么 浏览器会把HTML解析成DOM tree，把CSS解析成CSSOM tree，DOM和CSSOM合并就产生了渲染树（Render Tree） 有了render tree，浏览器根据render tree节点绘制到页面上 2，回流： DOM树和CSSOM树结合后的render tree后，将可见DOM节点以及它对应的样式结合起来， 可是我们还需要...
DOM的重绘与回流
gmh1118的博客
02-08 258
DOM的重绘与回流 计算DOM结构 加载CSS 生成渲染树 浏览器基于显卡按照渲染树画页面 重绘 当某一个DOM元素样式更改（位置没有变，只是样式更改），浏览器就会重新渲染这个元素 box.style.color = 'red';//触发了一次重绘 box.style.fontSize = '16px';//又触发了一次重绘 ... //优化方案： //=>一次性将需要修改的样式搞定，例： //先写个样式类 .xxx{ color = 'red', fontSize =
HTML中的重绘与回流
01-08
在认识重绘和回流之前，我们先认识一下一个页面加载的时候，会发生什么？ 　页面加载时，生成一个DOM树，DOM Tree里包含了构成页面所有的标签。Style Sheets（CSS样式表）会生成一个Style Rules。当DOM Tree和Style ...
【前端知识之CSS】回流和重绘
weixin_44337386的博客
05-17 612
本系列主要整理前端面试中需要掌握的知识点。本节介绍回流和重绘以及什么时候会触发。
【CSS】回流/重排与重绘
qq_43057018的博客
08-08 1172
现代的浏览器都是很聪明的，由于每次重排都会造成额外的计算消耗，因此大多数浏览器都会通过队列化修改并批量执行来优化重排过程。浏览器会将修改操作放入到队列里，：将元素的透明度设置为 0，以此来实现元素的隐藏。：使用元素裁剪的方法来实现元素的隐藏，这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。：渲染树不会包含该渲染对象，因此该元素不会在页面中占据位置，也不会响应绑定的监听事件。：元素在页面中仍占据空间，但是不会响应绑定的监听事件。.
39：浏览器底层渲染机制3：DOM回流和重绘
Mint周的文章
07-20 507
DOM的重绘和回流 重绘：元素样式的改变（但宽高、大小、位置等不变） 如 outline, visibility, color、background-color等 回流：元素的大小或者位置发生了变化（当页面布局和几何信息发生变化的时候），触发了重新布局，导致渲染树重新计算布局和渲染 如添加或删除可见的DOM元素 ; 元素的位置发生变化; 元素的尺寸发生变化; 内容发生变化（比如文本变化或图片被另一个不同尺寸的图片所替代）; 页面一开始渲染的时候（这个无法避免）; 因为回流是根据视口的大小来计算元素
JS DOM 重绘与回流
qq_35112578的博客
08-07 343
重绘不一定会引起回流，但回流一定会引起重绘。重绘：颜色与布局的结合，在页面显示前的渲染。回流：布局的重新渲染。
Js_Dom(4)__Dom基础<回流与重绘>
Richard_xx的博客
08-08 629
1.页面呈现过程 不同的浏览器略微会有些不同。但基本上都是类似的 ①.浏览器把html代码解析成1个Dom树，html中的每个tag都是Dom树中的1个节点，根节点就是我们常用的document对象。dom树就是html结构，里面包含了所有的html tag，包括用JS添加的元素。   ②浏览器把所有样式(主要包括css和浏览器自带的样式设置)解析成样式结构体，在解析的过程中会
JavaScript 进阶课程笔记 第三天
RockyBlogs
02-15 626
JavaScript 进阶课程笔记 第三天 DOM 节点操作
『JavaScript』DOM回流与重绘深度剖析：提升Web应用性能的必修课
老陈聊架构
12-27 1338
📣读完这篇文章里你能收获到：理解DOM回流（Reflow）和重绘（Repaint）的基本概念及其区别，了解哪些DOM操作会触发回流和重绘，探讨如何优化DOM操作以减少不必要的回流和重绘，学习使用现代浏览器提供的性能工具来检测和分析回流与重绘
2-DOM的回流与重绘
Tx457973的博客
09-01 142
回流与重绘
DOM的重排（回流）和重绘（页面渲染过程、重排、回流和重绘概念及其触发操作、浏览器对重排和重绘的优化策略、其它优化方法（基于HTML、CSS方面优化、基于JavaScript方面优化））
AIWWY的博客
09-20 730
目录 页面的渲染过程 重排（回流） 触发操作 重绘 触发操作 重排（回流）和重绘关系 浏览器本身优化策略 优化方法 HTML、CSS方面优化 Javascript方面优化 页面的渲染过程 （1）Javascript：通过JS实现动画效果或者操作DOM实现交互 （2）Style：计算样式，如果样式有改变将重新计算，并返回给DOM （3）Layout：根据DOM的样式，重新布局（重排、回流） （4）Paint：在多个渲染层上，对新的布局重新渲染（重绘） （5）Composi.
回流和重绘的区别
最新发布
03-19
### 浏览器渲染中的回流与重绘 #### 回流（Reflow） 回流是指当 DOM 的结构或元素的几何属性（如大小、位置等）发生变化时，浏览器需要重新计算这些元素的位置和尺寸，并更新整个页面布局的过程。这一过程通常涉及多个节点的重新计算以及可能引发后续子树的调整[^1]。 例如，如果动态改变了某个元素的高度或者宽度，或者是隐藏了一个可见的元素，则会触发回流操作。每次回流都会带来一定的性能开销，尤其是复杂的布局场景下更为显著[^5]。 #### 重绘（Repaint） 相比之下，重绘指的是由于某些视觉样式的更改而不需要改变文档流的情况下发生的绘制行为。比如颜色的变化、背景图片替换等情况只会导致像素级别的刷新而不影响整体布局结构[^3]。 需要注意的是，尽管单独来看重绘似乎比回流轻量级一些，但如果频繁发生也可能累积成较大的性能瓶颈[^2]。 #### 主要区别 | 特性 | 回流 | 重绘 | |--------------|-------------------------------|-------------------------| | **定义** | 布局变化引起的重新计算 | 只有外观上的变动 | | **触发条件** | 修改了影响布局的因素 | 改变了不影响布局的样式 | | **范围** | 影响较大 | 较小 | | **频率控制** | 应尽量减少 | 同理需加以管理 | 为了提升网页加载速度并改善用户体验，在开发过程中应当采取措施来降低不必要的回流和重绘事件的发生几率。可以通过批量处理DOM变更动作、使用虚拟dom技术等方式实现优化目的；另外还可以考虑采用GPU加速特性明显的 CSS 属性如 `transform` 和 `opacity`, 这些不会引起常规意义上的reflow/repaint流程而是交由更高效的图形处理器完成相应工作[^4]。 ```javascript // 减少回流的一个例子：先移除元素再做多次修改最后放回去 let parentElement = document.getElementById('parent'); let childToModify = document.createElement('div'); childToModify.style.width = '200px'; childToModify.style.height = '200px'; childToModify.style.backgroundColor = '#ff0000'; parentElement.appendChild(childToModify); ``` 上述代码展示了如何通过创建新节点而非直接操作现有DOM节点的方式来避免连续性的回流问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值