CSS重绘、回流

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

CSS 重绘、回流

https://juejin.im/post/5c011e0c5188252ea66afdfa
https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/24

触发页面重布局的一些css属性

  • 盒子模型相关属性会触发重布局
    width
    height
    padding
    margin
    display
    border-width
    border
    min-height

  • 定位属性及浮动也会触发重布局
    top
    bottom
    left
    right
    position
    float
    clear

  • 改变节点内部文字结构也会触发重布局
    text-align
    overflow-y
    font-weight
    overflow
    font-family
    line-height
    vertical-align
    white-space
    font-size

优化点：使用不触发回流的方案替代触发回流的方案

Zhi.C.Yue
关注
专栏目录
【前端知识之CSS】回流和重绘
weixin_44337386的博客
05-17 549
本系列主要整理前端面试中需要掌握的知识点。本节介绍回流和重绘以及什么时候会触发。
CSS之重绘与回流
最新发布
dachaoxuexi的博客
02-18 703
当需要对DOM进行大量修改时，最好的做法是使用DocumentFragment或者是clone一个元素，在副本上进行所有操作，然后再把它放回文档中。当元素的大小、位置、隐藏等改变时，浏览器需要重新计算元素的几何信息，并重新渲染页面，这个过程称为回流。当页面中元素样式的改变并不影响它在文档流中的位置时（例如改变颜色、阴影等），浏览器会进行重绘，即重新绘制元素的外观。这段代码改变了盒子的外观而没有改变它的布局，因此仅仅会导致重绘。为了减少回流，可以合并多次改变样式的操作，使用。
css 的重绘与回流
qq_45465689的博客
10-26 505
什么是重绘? 页面发生样式的改变但是不会影响他的位置(例如:字体,背景颜色等等) 什么是回流(重排)? 因为元素的规模尺寸、布局、隐藏等改变时,也就是位置发生改变时,浏览器会重新渲染这个DOM的这一过程称为回流. (回流肯定伴随着重绘,但是重绘不一定会有回流的出现) 什么时候会触发回流(重排)或重绘？ 增删dom元素的时候,改变元素位置,改变元素样式宽高大小,页面第一次渲染,浏览器窗口的改变,获取元素的宽高也会出发回流 如何减少重绘和回流（重排）? 在DOM树的最后一个元素改变class,避免设置多层内联.
css 重绘和回流
weixin_43294560的博客
02-17 3032
浏览器渲染过程 解析HTML，生成DOM树，解析CSS，生成CSSOM树 将DOM树和CSSOM树结合，生成渲染树(Render Tree) Layout(回流):根据生成的渲染树，进行回流(Layout)，得到节点的几何信息（位置，大小） Painting(重绘):根据渲染树以及回流得到的几何信息，得到节点的绝对像素 Display:将像素发送给GPU，展示在页面上。（比如会在GPU将多个合成层合并为同一个层，并展示在页面中。而css3硬件加速的原理则是新建合成层） 生成渲染树过程 从DOM树的
CSS的重绘和回流
weixin_40189038的博客
08-05 162
回流 定义：当RenderTree中的一部分（或全部）因为元素的规模尺寸，布局，隐藏等改变而需要重新构建，则称为回流 触发回流属性 1.盒子模型相关属性：width height display padding margin border border-width min-height 2.定位属性及浮动：position left right top bottom float clear 3....
CSS中的重绘和回流
weixin_39676449的博客
12-25 2015
一.浏览器的渲染过程： 1.渲染图： 2.浏览器渲染过程： （1）解析HTML，生成DOM树，解析CSS，生成CSSOM树 （2）将DOM树和CSSOM树结合，生成渲染树(Render Tree) （3）Layout(回流):根据生成的渲染树，进行回流(Layout)，得到节点的几何信息（位置，大小） （4）Painting(重绘):根据渲染树以及回流得到的几何信息，得到节点的绝对像素 （5）D...
【CSS】回流/重排与重绘
qq_43057018的博客
08-08 1083
现代的浏览器都是很聪明的，由于每次重排都会造成额外的计算消耗，因此大多数浏览器都会通过队列化修改并批量执行来优化重排过程。浏览器会将修改操作放入到队列里，：将元素的透明度设置为 0，以此来实现元素的隐藏。：使用元素裁剪的方法来实现元素的隐藏，这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。：渲染树不会包含该渲染对象，因此该元素不会在页面中占据位置，也不会响应绑定的监听事件。：元素在页面中仍占据空间，但是不会响应绑定的监听事件。.
HTML中的重绘与回流
01-08
在认识重绘和回流之前，我们先认识一下一个页面加载的时候，会发生什么？ 　页面加载时，生成一个DOM树，DOM Tree里包含了构成页面所有的标签。Style Sheets（CSS样式表）会生成一个Style Rules。当DOM Tree和Style ...
css重绘与重排的方法
09-27
CSS重绘与重排是浏览器在处理页面渲染时的两个关键过程，它们直接影响着网页的性能表现。了解并掌握这两个概念对于优化网页加载速度和用户体验至关重要。 首先，我们来看一下**重绘**。重绘是指当一个元素的外观...
CSS之 重绘和回流
风萧萧兮易水寒
09-09 1305
浏览器渲染机制 浏览器使用流式布局模型 (Flow Based Layout) 所有的浏览器渲染引擎工作流程大致分为5步：创建DOM树 —> 创建Style Rules-> 构建Render树 —> 布局Layout-—> 绘制Painting。 第一步，构建 DOM 树：用 HTML 分析器，分析 HTML 元素，构建一棵 DOM 树； 第二步，...
CSS重绘与重排(回流)
weixin_45932733的博客
01-28 301
重绘（repaint或redraw） 当盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来之后，浏览器便把这些原色都按照各自的特性绘制一遍，将内容呈现在页面上。重绘是指一个元素外观的改变所触发的浏览器行为，浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。 重排（重构/回流/reflow） 当渲染树中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建, 这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候。 重绘和重排的关系 在回流的时候，浏览器
CSS重绘与回流/重排
qq_42794977的博客
05-08 183
浅谈CSS重绘与回流/重排 任何对渲染树的修改都有可能会导致下面两种操作： 1、回流/重排 渲染树的一部分必须要更新且节点的尺寸发生了变化，会触发重排操作。每个页面至少在初始化的时候会有一次重排操作。 2、重绘 部分节点需要更新，但没有改变其形状，会触发重绘操作。 会触发重绘或回流/重排的操作 1、添加、删除元素(回流+重绘) 2、隐藏元素，display:none(回流+重绘)，visibili...
css的回流和重绘
LPLIFE的博客
05-25 288
浏览器的的渲染过程 1.将 HTML 文档解析成 DOM 树 2.将 CSS 解析成 CSS 规则树 3.将 DOM 树和 CSSOM 合并为 Rendering Tree（渲染树） 4.计算元素位置 5.遍历 render 树 进行绘制页面 回流（重排）：页面中的某个部分发生了改变并且影响了布局，需要重新排页面结构 重绘：仅仅样式变化，不会引起页面结构变化，如改变字体颜色、边框颜色、背景颜色等 可以想象成搭积木，如果我们抽离其中的一块木块或者把添加一块木块，那么原来的结构会发生改变了，这时..
【前端面经】CSS-回流和重绘
欢迎光临~
01-11 847
回流(回流)必将引起重绘, 重绘不一定引起回流(重排)
CSS回流（Reflow）与重绘（Repaint）
qq_48113035的博客
03-07 1411
1.
重绘与回流
油墨香^-^的博客
07-05 82
1
css回流和重绘
weixin_44741665的博客
02-02 229
css回流和重绘的理解
页面重绘与回流
ReadyChange的博客
09-12 572
渲染：就是把浏览器把HTML代码以css定义的规则显示在浏览器窗口的过程。 浏览器解析HTML的基本过程： 1  用户输入网址，浏览器向服务器发出请求，服务器返回html文件 2  浏览器载入html代码，发现标签内有一个标签引用外部css文件 3 浏览器又发出css文件的请求，服务器返回这个css文件 4 浏览器继续载入html中的部分的代码，并
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、付费专栏及课程。

余额充值