如何减少重绘和重排

最新推荐文章于 2024-03-01 09:39:52 发布
最新推荐文章于 2024-03-01 09:39:52 发布
阅读量1.7k 收藏 4
点赞数 2
分类专栏： CSS JS 文章标签： javascript 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_67948827/article/details/127077446
版权
JS 同时被 2 个专栏收录
29 篇文章 1 订阅
订阅专栏
CSS
17 篇文章 1 订阅
订阅专栏

如何减少重绘和重排
1、减少直接操作dom元素，改用className用于控制
2、尽量减少table使用，table属性变化使用会直接导致布局重排或者重绘
3、当dom元素position属性为fixed或者absolute, 可以通过css形变触发动画效果，此时是不会出发reflow的
4、不要把 DOM 结点的属性值放在一个循环里当成循环里的变量
5、如果需要创建多个DOM节点，可以使用DocumentFragment创建完后一次性的加入document

浏览器自身的优化
浏览器会维护1个队列，把所有会引起回流、重绘的操作放入这个队列，等队列中的操作到了一定的数量或者到了一定的时间间隔，浏览器就会flush队列，进行一个批处理。这样就会让多次的回流、重绘变成一次回流重绘

more名奇妙
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端性能优化之重排和重绘
01-27
有经验的大佬对这个概念一定不会陌生，“浏览器输入URL发生了什么”。估计大家已经烂熟于心了，从计算机网络到JS引擎，一路飞奔到浏览器渲染引擎。 经验越多就能理解的越深。感兴趣的同学可以看一下这篇文章，深度和广度俱佳从输入URL到页面加载的过程?如何由一道题完善自己的前端知识体系!切回正题，我们继续探讨何为重排。浏览器下载完页面所有的资源后，就要开始构建DOM树，于此同时还会构建渲染树(Render Tree)。
重绘和重排应该如何理解和避免
最新发布
Poggie的博客
03-05 414
重绘和重排是浏览器渲染过程中的两个重要概念，它们都会影响页面的性能。
前端优化方案--减少重排重绘
Web_boom的博客
11-14 1274
最近找到一个VUE的文档，它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位。有需要的小伙伴，可以点击下方卡片领取，无偿分享。
什么是重排与重绘，如何减少重排
WZH15075051915的博客
03-01 939
10.查询某些属性或调用某些计算方法：offsetWidth、offsetHeight 等，除此之外，当我们调用 getComputedStyle 方法，或者 IE 里的 currentStyle 时，也会触发重排，原理是一样的，都 为求一个 “即时性” 和 “准确性”。浏览器会维护一个队列，把所有会引起重排、重绘的操作放入这个队列，等队列中的操作到了一定数量或者到了一定的时间间隔，浏览器就会 flush 队列，进行一个批处理。1. 减少直接操作 DOM 元素。
浏览器的重绘repaints与重排reflows深入分析
12-13
在项目的交互或视觉评审中，前端同学常常会对一些交互效果质疑，提出这样做不好那样做不好。主要原因是这些效果通常会产生一系列的浏览器重绘和重排，需要付出高昂的性能代价。那么，什么是浏览器的重绘和重排呢？二者何时发生以及如何权衡？如何在具体的开发过程中将重绘和重排引发的性能问题考虑进去？本文期待可以部分解释以上三个问题。 　　浏览器从下载文档到显示页面的过程是个复杂的过程，这里包含了重绘和重排。各家浏览器引擎的工作原理略有差别，但也有一定规则。简单讲，通常在文档初次加载时，浏览器引擎会解析HTML文档来构建DOM树，之后根据DOM元素的几何属性构建一棵用于渲染的树。渲染树的每个节点都有大小和边距等属
重绘和回流（重排）是什么，如何避免？
m0_71955188的博客
09-12 301
重绘：当元素的外观样式发生改变，但不影响其布局时，浏览器会执行重绘操作。这意味着浏览器会重新绘制受影响的元素，以更新其可见的外观，但不会改变元素在文档流中的位置。 回流：当元素的尺寸、布局或其他影响其几何属性的属性发生变化时，浏览器会执行回流操作。回流会导致浏览器重新计算元素的布局和位置，并重新绘制受影响的部分或整个页面。 为了避免频繁的重绘和回流，可以采取以下措施： 使用 CSS3 动画：CSS3 动画利用 GPU 加速，可以更高效地实现动画效果，减少重绘和回流的次数。 批量修改样式：通过改变元素的 cl
什么是重排、重绘？以及如何去避免重排、重绘？
qq_51679817的博客
10-31 1006
什么是重绘、重排，重绘重排的区别，以及怎么避免重排重绘？
什么是重排(回流)和重绘？如何避免他们？
djwhwj的博客
08-25 1063
重排(reflow)和重绘(repaint)是浏览器渲染的一个过程，并且十分影响性能，让我们先来看看浏览器网页渲染的全过程
减少重绘和重排(重流)
Flora_SM的博客
12-21 653
1. 最小化重绘和重流 由于重绘和重排代价可能较为昂贵，因此最好可以减少它的发生次数。可以合并多次对dom和样式的修改，然后一次处理掉。例如 const el = document.getElementById(‘test’); el.style.padding = ‘5px’; el.style.borderLeft = ‘1px’; el.style.borderRight = ‘2px’; 该例中有3个样式属性被修改了，那么可以采取合并所有的改变然后一次处理。 ※ 方案一：使用cssText（设置
了解重排与重绘
10-16
重绘和重排操作都是代价昂贵的操作，它们会导致web应用程序的UI反应迟钝，所以应该尽可能减少这类过程的发生。下面我们来简单了解一下
css重绘与重排的方法
09-27
主要介绍了css重绘与重排的方法的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
说一下重绘、重排区别如何避免？
油墨香^-^的博客
10-13 436
重绘：当一个元素的外观发生改变，但没有改变布局，重新把元素外观绘制出来的过程，所以重绘跳过了创建布局树和分层的阶段。重排需要重新计算布局树，重绘不需要，重排必定发生重绘，但是涉及到重绘不一定要重排。1页面初始渲染，这是开销最大的一次重排 -添加/删除可见的DOM元素 -改变元素位置 -改变元素尺寸，比如边距、填充、边框、宽度和高度等。重排 ：当DOM的变化影响了元素的几何信息(元素的的位置和尺寸大小)，浏览器需要重新计算元素的几何属性，将其安放在界面中的正确位置，这个过程叫做重排。
页面渲染有哪些过程可以优化
weixin_43800477的博客
11-17 935
1、DNSprefetch：DNS预解析就是根据浏览器定义的规则，提前解析之后可能会用到的域名，使解析结果缓存到系统缓存中，缩短dns解析时间，来提高网站的访问速度 2、利用缓存机制，缓存又分为CDN缓存，浏览器缓存，本地缓存 1）CDN缓存，CDN就是内容分发网络，往往用来存放像js，css，图片等资源 2）浏览器缓存机制里重要的是http缓存，http缓存分为强制缓存和协商缓存，强制缓存：当缓存数据库中有客户端需要的数据，客户端直接将数据从其中拿出来使用，当缓存中没有需要的数据时，客户端才会向服务
什么是重绘和重排(回流)？怎么避免重绘和重排？
weixin_45866961的博客
07-17 297
重排一般是由于元素的大小和布局的改变，或者节点的增添、删除引起的。重排一定会引起重绘，重绘不一定会引起重排。：重绘一般是由于元素样式的改变引起的。
性能优化系列之『怎样才能减少浏览器的回流和重绘？』
老__L的博客
01-02 495
性能优化系列之『怎样才能减少浏览器的回流和重绘？』
【css】说说你对重绘和重排的理解和如何避免
小墨鱼的前端问题录
07-10 158
前端 css 重绘 重排
了解重绘和重排吗，知道怎么去减少重绘和重排吗，让文档脱离文档流有哪些方法
wanghe1111_的博客
03-24 1132
了解重绘和重排吗，知道怎么去减少重绘和重排吗，让文档脱离文档流有哪些方法
css重绘和重排（回流）
09-14
重绘和重排是CSS渲染过程中的两个重要概念。 重绘（Repaint）指的是当元素的样式发生变化，但不影响其布局时，浏览器会将新样式应用到元素上，...通过合理优化和减少重排和重绘的次数，可以提升页面的性能和响应速度。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值