CSS中避免重排和重绘的小技巧

最新推荐文章于 2024-08-20 16:10:24 发布

初漆微芽

最新推荐文章于 2024-08-20 16:10:24 发布

阅读量3.6k

点赞数 1

分类专栏：前端小技巧碎片知识 CSS

碎片知识同时被 3 个专栏收录

12 篇文章 0 订阅

订阅专栏

前端小技巧

2 篇文章 0 订阅

订阅专栏

CSS

1 篇文章 0 订阅

订阅专栏

页面渲染的一般过程为JS > CSS > 计算样式 > 布局 > 绘制 > 渲染层合并。

其中，Layout(重排)和Paint(重绘)是整个环节中最为耗时的两环，所以我们尽量避免着这两个环节。从性能方面考虑，最理想的渲染流水线是没有布局和绘制环节的，只需要做渲染层的合并即可。

那怎么知道哪些CSS属性的改变是会影响这两个环节的呢？

会影响重排和重绘的CSS属性有background-color,box-shadow,display,height

在实际的应用里，最为简单的一个注意点就是，触发动画的开始不要用diaplay:none属性值，因为它会引起Layout、Paint环节，通过切换类名就已经是一种很好的办法。

还有就是，translate属性值来替换top/left/right/bottom的切换，scale属性值替换width/height，opacity属性替换display/visibility等等

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

初漆微芽

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

重排(回流)和重绘

weixin_55967216的博客

03-30

1950

界面：appearance、outline、background、mask、box-shadow、box-reflect、filter、opacity、clip、border-radius、background-size、visibility。重绘：当页面中元素样式的改变并不影响它在文档流中的位置时（例如：color、background-color、visibility等），这些属性只是影响元素的外观，风格，而不会影响布局的，浏览器会将新样式赋予给元素并重新绘制它，这个过程称为重绘。

CSS重绘和重排

JiAyInNnNnN123的博客

01-24

1042

定义重绘：当元素的一部分属性发生改变，如外观、背景、颜色等不会引起布局变化，只需要浏览器根据元素的新属性重新绘制，使元素呈现新的外观叫做重绘。重排（回流）:当render树中的一部分或者全部因为大小边距等问题发生改变而需要DOM树重新计算的过程。什么属性会触发重绘或者重排引起重绘的属性： color text-decoration //设置文本的装饰，下划线，上划线，删除线等。 outline outline-color //轮廓颜色 outline-width //轮廓宽度

参与评论您还未登录，请先登录后发表或查看评论

前端如何避免重排（reflow）和重绘（repaint）

最新发布

weixin_47588164的博客

08-20

分批更新：将多个DOM操作放在一个函数里，并通过来执行。使用合成层：对于频繁更新的元素，考虑将其置于合成层中。优化样式表：尽量避免使用触发重排和重绘的CSS属性。最小化DOM树的复杂性：简化DOM结构可以减少元素的变化对整个页面的影响。通过上述方法，你可以显著提高网页的性能和响应速度。

浅谈CSS重绘和回流（重排）—— 如何减少重绘和回流（重排）

༺隆冬飘落の初霁༻的博客

04-10

4656

浏览器的渲染过程解析HTML，构建DOM树解析CSS，生成CSS规则树合并DOM树和CSS规则，生成render树布局render树（Layout/reflow），负责各元素尺寸、位置的计算绘制render树（paint），绘制页面像素信息浏览器会将各层的信息发送给GPU，GPU会将各层合成（composite），显示在屏幕上基本概念重绘：当页面...

css回流与重绘?如何进行规避

qq_57035859的博客

01-04

460

回流也叫重排,是指一个元素的尺寸或位置变化时,浏览器重新计算元素的几何尺寸并重新绘制的过程;当读取元素尺寸位置时,浏览器为保证即时性,也会回流重绘是指元素样式发生变化时,重新绘制元素样式的过程重绘不一定导致回流，回流一定会导致重绘如何规避css.回流与重绘,提高渲染效率? 避免在循环或事件函数中频繁的读取元素尺寸位置,可以用变量提前记录尺寸位置,在频繁执行的代码中操作变量，最后统一更新，减少回流次数避免逐条改变样式，使用类名去合并样式，减少重绘次数在设置DO...

重绘和回流（重排）是什么，如何避免？

m0_71955188的博客

09-12

480

重绘：当元素的外观样式发生改变，但不影响其布局时，浏览器会执行重绘操作。这意味着浏览器会重新绘制受影响的元素，以更新其可见的外观，但不会改变元素在文档流中的位置。回流：当元素的尺寸、布局或其他影响其几何属性的属性发生变化时，浏览器会执行回流操作。回流会导致浏览器重新计算元素的布局和位置，并重新绘制受影响的部分或整个页面。为了避免频繁的重绘和回流，可以采取以下措施：使用 CSS3 动画：CSS3 动画利用 GPU 加速，可以更高效地实现动画效果，减少重绘和回流的次数。批量修改样式：通过改变元素的 cl

css3中不需要回流和重绘的属性

guolinengineer的博客

12-17

996

众所周知，页面的回流和重绘会造成额外的计算消耗，降低用户体验，而css3自带的硬件加速则根本不需要回流和重绘 css3不需要回流和重绘的属性： transform opacity filter Will-change transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜 opacity属性设置元素的不透明级别。如 opacity: 0...

前端性能优化（二）03-页面性能优化之浏览器——重排reflow与重绘repaint & 导致重排的操作 & 只触发重绘不触发重排的CSS属性 & 减少重排与重绘

weixin_44867717的博客

12-16

634

前端性能优化（二）03-页面性能优化之浏览器——重排reflow与重绘repaint & 导致重排的操作 & 只触发重绘不触发重排的CSS属性 & 减少重排与重绘重排reflow与重绘repaint 重排reflow reflow指的是重新计算页面布局。某个节点reflow时会重新计算节点的尺寸和位置，而且还有可能触发其子节点、祖先节点和页面上的其他节点reflow。在这之后再触发一次repaint。当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏

重绘与重排

notagoodwriter的博客

09-13

359

重绘跟重排

css重绘与重排的方法

12-13

浏览器加载页面原理通常在文档初次加载时，浏览器引擎会解析HTML文档来构建DOM树，之后根据DOM元素的几何属性构建一棵用于渲染的树。渲染树的每个节点都有大小和边距等属性，类似于盒子模型（由于隐藏元素不需要显示，渲染树中并不包含DOM树中隐藏的元素）。当渲染树构建完成后，浏览器就可以将元素放置到正确的位置了，再根据渲染树节点的样式属性绘制出页面。由于浏览器的流布局，对渲染树的计算通常只需要遍历一次就可以完成。但table及其内部元素除外，它可能需要多次计算才能确定好其在渲染树中节点的属性，通常要花3倍于同等元素的时间。这也是为什么我们要避免使用table做布局的一个原因。重绘重绘是

canvas+CSS打地鼠小游戏

11-06

6. **优化和性能**：为了保证游戏流畅，开发者需要注意优化代码，减少不必要的重绘和重排，以及合理使用requestAnimationFrame()进行动画更新，确保游戏在不同设备上都能有良好的性能表现。通过学习和实践“canvas...

【css】说说你对重绘和重排的理解和如何避免

小墨鱼的前端问题录

07-10

218

前端 css 重绘重排

css3宇宙中流星天体动画场景特效代码

06-01

比如，使用CSS3硬件加速，合理设置动画帧率，以及对大量元素的优化处理，如合并CSS规则、减少重排和重绘等。 9. **响应式设计**：考虑到不同设备的屏幕尺寸，应确保动画在不同分辨率下都能良好呈现，可能需要结合...

CSS：重绘与重排、优化图片、渐进式渲染、CSS3新增属性、CSS hack

weixin_62548988的博客

07-11

617

渐进式渲染是用于提高网页性能(尤其是提高用户感知的加载速度)，以尽快呈现页面的技术在以前互联网带宽较小的时期，这种技术更为普遍。如今，移动终端的盛行，而移动网络往往不稳定，渐进式渲染在现代前端开发中仍然有用武之地图片懒加载–页面上的图片不会一次性全部加载，当用户滚动页面到图片部分时，JavaScript 将加载并显示图像。

03渲染优化-05减少重绘

trust_future99的博客

02-27

159

使用动画的时候，尽量使用transform

【面试css篇】

weixin_53488675的博客

04-03

660

标准盒模型（box-sizing:content-box） width=content 总宽度=width+padding+border+margin IE盒模型（怪异盒模型）(box-sizing:border-box) width=content+padding+border 总宽度=width+margin 注：其实最终结果是一样的，只是浏览器解析的区别 2.css选择器和优先级优先级：

CSS display | opacity | visibility的区别；回流与重绘

xx_yan的博客

03-29

4002

opacity=0 该元素变透明，但是不会改变页面布局。并且若此元素绑定了事件，点击该元素所占区域时，响应事件同样会被触发。 visibility=hidden 该元素变为不可见，但是不会改变页面布局。对用户不可见后，点击相应的区域也无法触发绑定的事件 display=none 该元素不再展示，会改变页面布局点击相应的区域也无法触发绑定的事件 ...

减少重排提高性能的方式

ll13352976097的博客

05-25

745

尽管网页达到了2MB，但是性能却成了一个热点话题。你的应用越舒畅，用户体验就越好，转换率就越高。也就是说，添加粗浅的CSS3动画或者不考虑后果的控制多个DOM元素会让我感到很惭愧。当在应用视觉效果时，浏览器中用到了两个术语：重绘重绘放生在元素的改变影响显示但不影响布局的时候。例如，opacity, background-color, visibility, 和outline。重绘是很昂贵的，因为浏览器必须检查DOM中所有的节点——在发生改变的元素下，一个或多个元素变的可见！重排重排会有更大的影响。

前端优化方案--减少重排重绘

Web_boom的博客

11-14

1374

最近找到一个VUE的文档，它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位。有需要的小伙伴，可以点击下方卡片领取，无偿分享。