回流和重绘 如何避免？

最新推荐文章于 2024-05-22 10:23:00 发布
最新推荐文章于 2024-05-22 10:23:00 发布
阅读量324 收藏
点赞数
文章标签： 前端 Powered by 金山文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangshuaibinggg/article/details/129045139
版权
文章详细阐述了重绘和回流的概念，它们在页面加载和更新样式时的角色。重绘涉及元素外观的改变，而回流则因布局变化触发，两者的关系是回流必定导致重绘。页面首次加载和浏览器窗口尺寸变化等都会引起回流。为了优化性能，应尽量减少不必要的回流和重绘，如避免使用table布局和CSS表达式，以及批量修改样式。
摘要由CSDN通过智能技术生成

重绘

当元素需要更新样式，但是这些样式属性只是改变元素的外观 风格，而不会引起布局变化的，只需要浏览器根据元素的新属性重新绘制，使元素呈现新的外观叫做重绘

回流

当render树中的一部分或者全部因为元素的尺寸、布局、隐藏等改变而需要重新构建，称之为回流

首屏加载触发回流和重绘

每个页面至少一次回流，就是在页面第一次加载的时候，这个时候是一定会发生回流。因为要构建render书，在回流的时候，浏览器会使渲染树中受到影响的部分消失，并重新构造这部分渲染书，完成回流之后，浏览器会重新绘制受影响的部分到屏幕中，该过程称之为重绘

重绘不一定引起回流，但回流一定会引起重绘

导致重绘与回流的操作

重绘

  1. 修改文本颜色

  1. 修改文本的样式

回流

首次加载

浏览器窗口大小发生变化

元素的尺寸，位置发生改变

元素的内容发生变化

删除添加可见元素

减少重绘与回流

  1. 需要要对元素进行复杂的操作时，可以先隐藏（display：none），操作完成后再显示

  1. 尽量避免用table布局（table元素一旦触发回流就会导致table里所有的其他元素回流）

  1. 避免使用css表达式（expression），因为每次调用都会重新计算值

  1. 尽量使用css属性简写

  1. 批量修改元素样式

星星落兜里了哟
关注
什么是重绘和回流?display:none和visibility:hidden的区别
频繁记录
06-14 1959
什么是重绘和回流?display:none和visibility:hidden的区别
笔试学习（三）回流和重绘
qq_45434172的博客
09-03 398
回流，重绘，优化
回流与重绘，以及解决回流与重绘的办法
m0_72089989的博客
07-19 1587
重绘当渲染树中的一些元素需要更新属性，而这些属性只是影响元素的外观、风格，而不会影响布局的操作，比如background-color，我们将这样的操作称为重绘。避免触发同步布局事件，我们在获取offsetwidth这类的属性时，可以使用变量将查询结果存起来，避免多次查询，每次对offset/scroll/client等属性进行操作时都会触发回流。回流任何会改变元素几何信息（元素的位置和尺寸大小）的操作，都会触发回流。回流（重排）一定会触发重绘，重绘不一定会触发回流（重排）。...
页面重绘、回流、重排
running_shuai的博客
07-11 460
前言： DOM Tree 和样式结构体组合后构建render tree 回流重排（重构/回流/reflow） 当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构 建。这就称为回流(reflow)，每个页面至少需要一次回流，就是在页面第一次加载的时候。 在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流 ...
重绘和回流（重排）是什么，如何避免？
m0_71955188的博客
09-12 471
重绘：当元素的外观样式发生改变，但不影响其布局时，浏览器会执行重绘操作。这意味着浏览器会重新绘制受影响的元素，以更新其可见的外观，但不会改变元素在文档流中的位置。 回流：当元素的尺寸、布局或其他影响其几何属性的属性发生变化时，浏览器会执行回流操作。回流会导致浏览器重新计算元素的布局和位置，并重新绘制受影响的部分或整个页面。 为了避免频繁的重绘和回流，可以采取以下措施： 使用 CSS3 动画：CSS3 动画利用 GPU 加速，可以更高效地实现动画效果，减少重绘和回流的次数。 批量修改样式：通过改变元素的 cl
什么是重绘和重排(回流)？怎么避免重绘和重排？
weixin_45866961的博客
07-17 369
重排一般是由于元素的大小和布局的改变，或者节点的增添、删除引起的。重排一定会引起重绘，重绘不一定会引起重排。：重绘一般是由于元素样式的改变引起的。
【bug】【vue+el-table】数据重绘,刷新数据（组件嵌套较深，数据结构包含children），页面未及时更新，已解决
花椒和蕊的博客
05-22 474
这个bug应该不是组件嵌套过深的原因，而是新增的时候没有加children，组件的渲染依赖于特定的数据结构或状态，利用索引直接设置一个项，Vue 可能无法追踪它的变化。然后log打印父组件列表的数据，发现打印有值，但是页面上什么都不展示。父组件列表，用的是element文档上树形数据与懒加载示例的第一个。通过确定按钮，将勾选的list数组传到父组件，进行赋值操作。新的弹窗用来勾选数据回显到列表中，处理为当前项的子节点。弹窗中还有列表，通过弹窗中的新增按钮操作列表。列表页面，通过新增按钮打开弹窗。
浏览器渲染机制：重排（Reflow）与重绘（Repaint）以及Vue优化策略
JINGWHALE
04-25 1475
本文介绍了浏览器渲染机制，重排、重绘概念，以及何时会发生重排、重绘以及如何避免不必要的重排、重绘，提升性能。另外，介绍了Vue优化重排和重绘机制以及开发者在实际项目中可以采取的优化重排和重绘策略。重排（Reflow）与重绘（Repaint）是浏览器渲染过程中对页面元素进行更新的两个重要步骤，理解它们的工作机制有助于我们进行性能优化。
页面优化---减少页面重绘和回流
weixin_30681121的博客
03-04 145
触发回流： 1.调整窗口大小（Resizing the windown）; 2.改变字体（changing the font）; 3.增加或移除样式表（adding or removing a stylesheet）； 4.内容变化，比如用户在input输入框中输入文字（content changes ,such as a user typing text in an input box）...
HTML中的重绘与回流
01-08
在认识重绘和回流之前，我们先认识一下一个页面加载的时候，会发生什么？ 　页面加载时，生成一个DOM树，DOM Tree里包含了构成页面所有的标签。Style Sheets（CSS样式表）会生成一个Style Rules。当DOM Tree和Style ...
HTML回流和重绘.md
最新发布
06-13
HTML回流和重绘
回流和重绘
weixin_57259948的博客
10-07 775
构建 frame, 以建立DOM树。 回流(reflow) 引起Dom树结构变化，改变页面布局。 重绘(repaint) 不会引起Dom树变化及页面布局变化，只重新渲染页面样式 回流(Reflow)和重绘(Repaint) 重绘是当节点需要更改外观而不会影响布局，比如改变color就称为重绘。 回流是布局或者集合属性需要改变就称为回流。 回流必定会发生重绘，重绘不一定会引发回流。回流所需要的成本你重回高的多，改变深层次的节点很可能导致父节点的一系列回流。 所以以下几个动作可能会导致性能问题： .
vue计算属性，过滤器，侦听器，JS中的回流与重绘
m0_57923701的博客
09-11 622
重绘与回流(重排)的概念： 回流(重排): 当浏览器必须重新处理和绘制部分或全部页面时，回流就会发生 重绘: 不影响布局, 只是标签页面发生变化, 重新绘制 注意: 回流(重排)必引发重绘, 重绘不一定引发回流(重排) JSON的方法使用： JSON.stringify(JS数据) - 把JS数据序列化成JSON格式字符串 JSON.parse(JSON字符串) - 把JSON格式化字符串, 再转回成JS数据 v-for 更新监测 数组变更方法, 就会导致v-for更新, 页面更新...
如何减少页面的重绘和回流(14)
qq_59076775的博客
12-26 3158
一.减少页面重绘和回流的方法 1.尽量使用css属性简写:如：用boder代替boder-width，boder-style，boder-color 2.批量修改元素样式elem.className 3.尽量避免用table布局(table元素一旦触发回流就会导致table里所有的其它元素回流) 4.需要创建多个DOM节点时,使用DocumentFragment创建。 因为:每次创建一个页面就会发生回流，所以采用DocumentFragment批量创建 5.尽量去写css表达式。因为每次调用都.
什么是重绘和回流以及如何避免回流
piaojiancong的博客
04-13 6820
重绘: 当渲染树中的一些元素需要更新属性，而这些属性只是影响元素的外观、风格，而 不会影响布局的操作，比如 background color，我们将这样的操作称为重绘。 回流：当渲染树中的一部分（或全部）因为元素的规模尺寸、布局、隐藏等改变而需要重新构建的操作，会影响到布局的操作，这样的操作我们称为回流。 简而言之，任何会改变元素几何信息（元素的位置和尺寸大小）的操作，都会触发回流。 比如： （1）添加或者删除可见的 DOM 元素(不可见元素不会触发回流)； （2）元素尺寸改变——边距、填充、边框、宽度和.
vue(1)--指令,回流与重绘---2019.5.20学习笔记
weixin_34198881的博客
05-20 1528
Vue作者:尤雨溪框架:MVVM渐进式的Javascript框架框架与类库的区别?举例:jquery好处:1.抹平了各个浏览器之间的差异2.链式操作DOM套餐框架:全家桶渐进式:vue只会包含核心语法,如需其他功能需要单独安装,例如:路由 vuex 前后端数据交互的方式什么是MVVM?mvc:model view controller 大多数会用在后端MVVM: 大多数用在前端M:m...
vue 上拉加载页面不重新加载,强行刷新组件导致画面重绘的解决方案
Cahier
04-15 869
将需要渲染的list改成数组对象,每次加载下一页时将所有数据push到list中,页面用for循环list <div v-for="(item,index) in list" :key="index"> <myList v-if="!loading" :listData="item" /> </div> // 通过push的方法每次新增一列改变list的...
extjs tabpanel第一次切换不显示 改变浏览器窗口的大小就显示_浅谈浏览器的渲染过程，重绘与回流...
weixin_39863759的博客
11-21 139
浏览器的渲染过程 首先，我们先来了解一下浏览器的渲染过程是什么样的，也就是说浏览器把一堆代码呈现到页面上的过程是什么样子的，浏览器采用流式布局模型(Flow Bsaed Layout)，根据下图，我们可以总结出浏览器的渲染步骤为：步骤： 1.解析HTML代码，生成DOM树(DOM Tree)；解析CSS代码，生成CSSOM树(CSS Tree)； 2.将DOM树和CSSOM树进行结合从而构建起渲染...
浏览器的回流和重绘详解，怎么避免
binlety
08-04 6765
重绘：当元素的外观或外观可见性（visibility）发生变化时会触发重绘 回流：render树中的部分或全部因为元素的规模尺寸、布局、隐藏等改变，需要重新计算render树。 避免回流和重绘方法      减少回流、重绘其实就是需要减少对render tree的操作，并减少对一些style信息的请求，尽量利用好浏览器的优化策略    （1） 避免操作DOM，创建一个documentFragme...
如何最小化重绘和回流？
03-21
3. 使用requestAnimationFrame代替setTimeout或setInterval，因为requestAnimationFrame可以优化动画性能，避免引起重绘和回流。 4. 使用虚拟DOM技术，例如React和Vue.js，可以减少DOM操作次数，从而减少重绘和回流...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值