CSS重绘与回流/重排

最新推荐文章于 2023-02-02 10:00:30 发布
最新推荐文章于 2023-02-02 10:00:30 发布
阅读量176 收藏
点赞数
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42794977/article/details/89946137
版权

CSS重绘与回流/重排

任何对渲染树的修改都有可能会导致下面两种操作：

1、回流

渲染树的一部分必须要更新且节点的尺寸发生了变化，会触发回流操作。每个页面至少在初始化的时候会有一次回流操作。

2、重绘

部分节点需要更新，但没有改变其形状，会触发重绘操作。

会触发重绘或回流/重排的操作

1、添加、删除元素(回流+重绘)

2、移动元素，如改变top、left或移动元素到另外1个父元素中(重绘+回流)

3、隐藏元素，display:none(回流+重绘)，visibility:hidden(只重绘，不回流)

4、改变浏览器大小(回流+重绘)

5、改变浏览器的字体大小(回流+重绘)

6、改变元素的padding、border、margin(回流+重绘)

7、改变浏览器的字体颜色（只重绘，不回流）

yuanyuchengyyc
关注
CSS之重绘与回流
dachaoxuexi的博客
02-18 691
当需要对DOM进行大量修改时，最好的做法是使用DocumentFragment或者是clone一个元素，在副本上进行所有操作，然后再把它放回文档中。当元素的大小、位置、隐藏等改变时，浏览器需要重新计算元素的几何信息，并重新渲染页面，这个过程称为回流。当页面中元素样式的改变并不影响它在文档流中的位置时（例如改变颜色、阴影等），浏览器会进行重绘，即重新绘制元素的外观。这段代码改变了盒子的外观而没有改变它的布局，因此仅仅会导致重绘。为了减少回流，可以合并多次改变样式的操作，使用。
浅谈CSS重绘与回流/重排
筱葭的博客
04-24 5589
任何对渲染树的修改都有可能会导致下面两种操作： 1、回流/重排 渲染树的一部分必须要更新且节点的尺寸发生了变化，会触发重排操作。每个页面至少在初始化的时候会有一次重排操作。 2、重绘 部分节点需要更新，但没有改变其形状，会触发重绘操作。   会触发重绘或回流/重排的操作 1、添加、删除元素(回流+重绘) 2、隐藏元素，display:none(回流+重绘)，visibility:h
css 重绘和回流
weixin_43294560的博客
02-17 3015
浏览器渲染过程 解析HTML，生成DOM树，解析CSS，生成CSSOM树 将DOM树和CSSOM树结合，生成渲染树(Render Tree) Layout(回流):根据生成的渲染树，进行回流(Layout)，得到节点的几何信息（位置，大小） Painting(重绘):根据渲染树以及回流得到的几何信息，得到节点的绝对像素 Display:将像素发送给GPU，展示在页面上。（比如会在GPU将多个合成层合并为同一个层，并展示在页面中。而css3硬件加速的原理则是新建合成层） 生成渲染树过程 从DOM树的
css 的重绘与回流
qq_45465689的博客
10-26 497
什么是重绘? 页面发生样式的改变但是不会影响他的位置(例如:字体,背景颜色等等) 什么是回流(重排)? 因为元素的规模尺寸、布局、隐藏等改变时,也就是位置发生改变时,浏览器会重新渲染这个DOM的这一过程称为回流. (回流肯定伴随着重绘,但是重绘不一定会有回流的出现) 什么时候会触发回流(重排)或重绘？ 增删dom元素的时候,改变元素位置,改变元素样式宽高大小,页面第一次渲染,浏览器窗口的改变,获取元素的宽高也会出发回流 如何减少重绘和回流（重排）? 在DOM树的最后一个元素改变class,避免设置多层内联.
CSS的重绘和回流
weixin_40189038的博客
08-05 156
回流 定义：当RenderTree中的一部分（或全部）因为元素的规模尺寸，布局，隐藏等改变而需要重新构建，则称为回流 触发回流属性 1.盒子模型相关属性：width height display padding margin border border-width min-height 2.定位属性及浮动：position left right top bottom float clear 3....
CSS之 重绘和回流
风萧萧兮易水寒
09-09 1293
浏览器渲染机制 浏览器使用流式布局模型 (Flow Based Layout) 所有的浏览器渲染引擎工作流程大致分为5步：创建DOM树 —> 创建Style Rules-> 构建Render树 —> 布局Layout-—> 绘制Painting。 第一步，构建 DOM 树：用 HTML 分析器，分析 HTML 元素，构建一棵 DOM 树； 第二步，...
【CSS】回流/重排与重绘
qq_43057018的博客
08-08 1045
现代的浏览器都是很聪明的，由于每次重排都会造成额外的计算消耗，因此大多数浏览器都会通过队列化修改并批量执行来优化重排过程。浏览器会将修改操作放入到队列里，：将元素的透明度设置为 0，以此来实现元素的隐藏。：使用元素裁剪的方法来实现元素的隐藏，这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。：渲染树不会包含该渲染对象，因此该元素不会在页面中占据位置，也不会响应绑定的监听事件。：元素在页面中仍占据空间，但是不会响应绑定的监听事件。.
css重绘与重排的方法
09-27
CSS重绘与重排是浏览器在处理页面渲染时的两个关键过程，它们直接影响着网页的性能表现。了解并掌握这两个概念对于优化网页加载速度和用户体验至关重要。 首先，我们来看一下**重绘**。重绘是指当一个元素的外观...
回流(重排/重构)和重绘
weixin_45392559的博客
03-22 643
知识普及： 浏览器会把获取到的HTML解析成一个 DOM tree； 浏览器会把所有样式解析成样式结构体； DOM tree (树) 和样式结构体组合后构建成 render tree; 一旦render tree构建完毕后，浏览器就可以根据render tree来绘制页面了； 回流：当render中的一部分（或全部）因为元素的规模尺寸，布局，隐藏等改变而需要重新构建，这就称为回流（reflow）;每个页面至少需要一次回流，就是在页面第一次加载的时候。 回流过程：在回流的时候，浏览器会是渲染
重排(回流)和重绘
weixin_42679876的博客
08-02 1004
重排(回流)和重绘
CSS重绘、回流
Jacoh的专栏
07-15 313
CSS 重绘、回流 触发页面重布局的一些css属性 盒子模型相关属性会触发重布局 width height padding margin display border-width border min-height 定位属性及浮动也会触发重布局 top bottom left right position float clear 改变节点内部文字结构也会触发重布局 text-align...
CSS中的重绘和回流
weixin_39676449的博客
12-25 2007
一.浏览器的渲染过程： 1.渲染图： 2.浏览器渲染过程： （1）解析HTML，生成DOM树，解析CSS，生成CSSOM树 （2）将DOM树和CSSOM树结合，生成渲染树(Render Tree) （3）Layout(回流):根据生成的渲染树，进行回流(Layout)，得到节点的几何信息（位置，大小） （4）Painting(重绘):根据渲染树以及回流得到的几何信息，得到节点的绝对像素 （5）D...
CSS重绘与重排(回流)
weixin_45932733的博客
01-28 295
重绘（repaint或redraw） 当盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来之后，浏览器便把这些原色都按照各自的特性绘制一遍，将内容呈现在页面上。重绘是指一个元素外观的改变所触发的浏览器行为，浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。 重排（重构/回流/reflow） 当渲染树中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建, 这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候。 重绘和重排的关系 在回流的时候，浏览器
CSS系列之回流和重绘
老__L的博客
03-07 570
当 render tree 中的一部分（或全部）因为元素的规模尺寸，布局，隐藏等改变而需要重新构建，这就称为回流（reflow）。每个页面至少需要一次回流，就是在页面第一次加载的时候，这时候是一定会发生回流的，因为要构建 render tree。在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程称为重绘。
css重绘和回流（重排）
CWZSB的博客
01-08 263
一.浏览器的渲染过程： 1.渲染图： 2.浏览器渲染过程： （1）解析HTML，生成DOM树，解析CSS，生成CSSOM树 （2）将DOM树和CSSOM树结合，生成渲染树(Render Tree) （3）Layout(回流，重排):根据生成的渲染树，进行回流(Layout)，得到节点的几何信息（位置，大小） （4）Painting(重绘):根据渲染树以及回流得到的几何信息，得到节点的绝对像素 （5）Display:将像素发送给GPU，展示在页面上 二.生成渲染树： 1.生成图： 2.为了构建渲染树，浏览器
css的回流和重绘
Jonathan的博客
03-18 862
回流和重绘 当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(其实我觉得叫重新布局更简单明了些)。每个页面至少需要一次回流，就是在页面第一次加载的时候。 当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。 注：从上面可以看出，回流...
重绘与回流
油墨香^-^的博客
07-05 79
1
css回流和重绘
weixin_44741665的博客
02-02 220
css回流和重绘的理解
css重绘和重排（回流）
最新发布
09-14
重绘和重排是CSS渲染过程中的两个重要概念。 重绘（Repaint）指的是当元素的样式发生变化，但不影响其布局时，浏览器会将新样式应用到元素上，重新绘制元素的外观。重绘的开销相对较小，不会引起布局的变化。 而重排（Reflow）指的是当页面布局发生变化时，例如修改了元素的尺寸、位置、内容等，浏览器会重新计算并更新元素的几何属性（如大小、位置），然后重新布局页面。重排的开销相对较大，因为它涉及到整个页面或部分页面的重新渲染。 重绘和重排的区别在于是否引起布局的变化。重绘只会重新绘制元素的外观，而不会影响其周围元素的布局；而重排会导致整个渲染树的重新构建和布局。 在性能优化方面，我们通常要尽量减少重排和重绘的次数，因为它们会消耗大量的计算资源。一些常见的优化方法包括： 1. 使用 CSS3 动画或过渡代替 JavaScript 实现的动画效果，因为后者可能会导致频繁的重排和重绘； 2. 使用类似 flexbox 和 grid 等布局技术，可以减少页面布局的复杂性，降低重排和重绘的次数； 3. 避免频繁访问会引起重排和重绘的属性，例如 offsetTop、offsetLeft、scrollTop、clientWidth 等； 4. 批量更新样式或布局，可以使用 CSS 类名的方式一次性修改多个元素的样式，而不是逐个修改； 5. 将需要执行多次重排的 DOM 操作尽量合并为一次，使用文档片段（DocumentFragment）进行缓存。 通过合理优化和减少重排和重绘的次数，可以提升页面的性能和响应速度。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值