css回流和重绘

最新推荐文章于 2025-06-15 16:39:27 发布

原创最新推荐文章于 2025-06-15 16:39:27 发布 · 274 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

当元素样式改变不影响布局时，会发生重绘，仅更新UI。回流则涉及布局变化，如尺寸、位置改变，更耗性能。触发回流的操作包括页面初始化、窗口大小调整、DOM元素变更等；而颜色、文本方向等修改会导致重绘。回流必定伴随重绘，但重绘不一定会引发回流。了解这些有助于优化网页性能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

重绘（repaint）

当元素样式的改变不会影响布局时、浏览器将使用重绘对元素进行更新、此时由于只需要UI层面的重新像素绘制、因此损耗较少

回流（reflow）

当元素的尺寸、结构或触发某些属性时、浏览器会重新渲染页面、称为回流、此时、浏览器需要经过重新计算、计算后好需要重新页面布局、因此是较重的操作

触发回流的操作

页面初次渲染

浏览窗口大小发生改变

元素尺寸、位置、内容发生改变

添加或者删除可见的我dom元素

激活css伪类（例如：:hover）

查询某些属性或调用某些方法

8、clientWidth、clientHeight、clientTop、clientLeft、offsetWidth、offsetHeight、offsetTop、offsetLeft、scrollWidth、scrollHeight、scrollTop、scrollLeft、getComputedStyle()、getBoundingClientRect()、scrollTo()

触发重绘的操作

触发回流一定会触发重绘、重绘不一定触发回流、重绘的开销较小、回流的开销较大

1、颜色的修改

2、文本方向的修改

3、阴影的修改

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

WenBo、

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

CSS之重绘与回流

dachaoxuexi的博客

02-18

818

当需要对DOM进行大量修改时，最好的做法是使用DocumentFragment或者是clone一个元素，在副本上进行所有操作，然后再把它放回文档中。当元素的大小、位置、隐藏等改变时，浏览器需要重新计算元素的几何信息，并重新渲染页面，这个过程称为回流。当页面中元素样式的改变并不影响它在文档流中的位置时（例如改变颜色、阴影等），浏览器会进行重绘，即重新绘制元素的外观。这段代码改变了盒子的外观而没有改变它的布局，因此仅仅会导致重绘。为了减少回流，可以合并多次改变样式的操作，使用。

【前端知识之CSS】回流和重绘

weixin_44337386的博客

05-17

616

本系列主要整理前端面试中需要掌握的知识点。本节介绍回流和重绘以及什么时候会触发。

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

css 重绘和回流

weixin_43294560的博客

02-17

3172

浏览器渲染过程解析HTML，生成DOM树，解析CSS，生成CSSOM树将DOM树和CSSOM树结合，生成渲染树(Render Tree) Layout(回流):根据生成的渲染树，进行回流(Layout)，得到节点的几何信息（位置，大小） Painting(重绘):根据渲染树以及回流得到的几何信息，得到节点的绝对像素 Display:将像素发送给GPU，展示在页面上。（比如会在GPU将多个合成层合并为同一个层，并展示在页面中。而css3硬件加速的原理则是新建合成层）生成渲染树过程从DOM树的

回流和重绘机制

liuchuan__csdn的博客

06-15

659

回流指浏览器根据元素的几何属性（位置、尺寸、间距等）重新计算布局，并更新页面物理结构的过程。

【前端面经】CSS-回流和重绘

欢迎光临~

01-11

985

回流(回流)必将引起重绘, 重绘不一定引起回流(重排)

css 的重绘与回流

qq_45465689的博客

10-26

545

什么是重绘? 页面发生样式的改变但是不会影响他的位置(例如:字体,背景颜色等等) 什么是回流(重排)? 因为元素的规模尺寸、布局、隐藏等改变时,也就是位置发生改变时,浏览器会重新渲染这个DOM的这一过程称为回流. (回流肯定伴随着重绘,但是重绘不一定会有回流的出现) 什么时候会触发回流(重排)或重绘？增删dom元素的时候,改变元素位置,改变元素样式宽高大小,页面第一次渲染,浏览器窗口的改变,获取元素的宽高也会出发回流如何减少重绘和回流（重排）? 在DOM树的最后一个元素改变class,避免设置多层内联.

一文大白话讲清楚CSS的回流（重排）和重绘以及解决策略

xiaobangkeji的博客

01-03

1337

一文大白话讲清楚CSS的回流（重排）和重绘以及解决策略

【CSS】回流/重排与重绘

qq_43057018的博客

08-08

1174

现代的浏览器都是很聪明的，由于每次重排都会造成额外的计算消耗，因此大多数浏览器都会通过队列化修改并批量执行来优化重排过程。浏览器会将修改操作放入到队列里，：将元素的透明度设置为 0，以此来实现元素的隐藏。：使用元素裁剪的方法来实现元素的隐藏，这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。：渲染树不会包含该渲染对象，因此该元素不会在页面中占据位置，也不会响应绑定的监听事件。：元素在页面中仍占据空间，但是不会响应绑定的监听事件。.

CSS回流（Reflow）与重绘（Repaint）

qq_48113035的博客

03-07

1490

CSS之重绘和回流

风萧萧兮易水寒

09-09

1356

浏览器渲染机制浏览器使用流式布局模型 (Flow Based Layout) 所有的浏览器渲染引擎工作流程大致分为5步：创建DOM树 —> 创建Style Rules-> 构建Render树 —> 布局Layout-—> 绘制Painting。第一步，构建 DOM 树：用 HTML 分析器，分析 HTML 元素，构建一棵 DOM 树；第二步，...

CSS重绘与重排(回流)

weixin_45932733的博客

01-28

325

重绘（repaint或redraw）当盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来之后，浏览器便把这些原色都按照各自的特性绘制一遍，将内容呈现在页面上。重绘是指一个元素外观的改变所触发的浏览器行为，浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。重排（重构/回流/reflow）当渲染树中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建, 这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候。重绘和重排的关系在回流的时候，浏览器

CSS知识点汇总(十一)--回流&重绘

qq_42445025的博客

06-29

733

当我们对 DOM 的修改导致了样式的变化（color或background-color），却并未影响其几何属性时，浏览器不需重新计算元素的几何属性、直接为该元素绘制新的样式，这里就仅仅触发了重绘。当我们对 DOM 的修改引发了 DOM 几何尺寸的变化（比如修改元素的宽、高或隐藏元素等）时，浏览器需要重新计算元素的几何属性，然后再将计算的结果绘制出来。在页面初始渲染阶段，回流不可避免的触发，可以理解成页面一开始是空白的元素，后面添加了新的元素使页面布局发生改变。触发回流一定会触发重绘。

css重绘和回流

一个希望世界和平的前端程序猿的博客

02-21

540

css重绘和回流

css回流和重绘是什么？

Gerrn的博客

07-08

329

(1) 重绘(repaint):当页面中元素样式的改变并不影响它在文档流中的位置时（例如color、background-color、visibility等)，浏览器会将新样式赋予给元素并重新绘制它，这个过程称为重绘。(2) 回流(reflow):当渲染树中部分或全部元素的尺寸、结构、或某些属性发生改变时，浏览器重新渲染部分或全部文档的过程称为回流。(5) 浏览器的窗口尺寸变化(因为回流是根据视口的大小来计算元素的位置和大小的)(3) 元素的尺寸发生变化（包括外边距、内边框、边框大小、高度和宽度等)

CSS篇之重绘(Repaint)与回流(Reflow)

Humphrey的博客

08-15

565

CSS篇之重绘(Repaint)与回流(Reflow) 概念回流(Reflow) 当我们对DOM的修改引发了DOM几何尺寸的变化（比如修改元素的宽高或隐藏元素等）时，浏览器需要重新计算元素的几何属性（其他元素的的几何属性和位置也会因此受到影响），然后再将计算结果绘制出来。这个过程就叫做回流（也叫重排）。 width / height / padding / margin / display / border-width / border / min-height / top / bottom /

【前端学习 - CSS（20）回流（重排）和重绘】

weixin_60364883的博客

02-22

249

1. 回流（重排）和重绘区别？回流（重排），reflow:当 render tree 中的一部分（或全部）因为元素的规模尺寸，布局，隐藏等改变时而需要重新构建；重绘（repaint）:当 render tree 中的一些元素需要更新属性，而这些属性只影响元素的外观，风格，而不会影响布局时，称其为重绘，例如颜色改变等。注意：每个页面至少需要引发一次重排+重绘，而且重排（回流）一定会引发重绘。触发重排（回流）的条件：增加或者删除可见的 dom 元素；元素的位置发生了改变；元素的尺寸发

css的回流和重绘

LPLIFE的博客

05-25

324

浏览器的的渲染过程 1.将 HTML 文档解析成 DOM 树 2.将 CSS 解析成 CSS 规则树 3.将 DOM 树和 CSSOM 合并为 Rendering Tree（渲染树） 4.计算元素位置 5.遍历 render 树进行绘制页面回流（重排）：页面中的某个部分发生了改变并且影响了布局，需要重新排页面结构重绘：仅仅样式变化，不会引起页面结构变化，如改变字体颜色、边框颜色、背景颜色等可以想象成搭积木，如果我们抽离其中的一块木块或者把添加一块木块，那么原来的结构会发生改变了，这时..

CSS重绘和重排(回流)

GreyCastle的博客

02-24

361

一、什么是重绘Repaint和重排（回流reflow）重绘: 当元素的一部分属性发生改变，如外观、背景、颜色等不会引起布局变化，只需要浏览器根据元素的新属性重新绘制，使元素呈现新的外观叫做重绘。重排（回流）: 当render树中的一部分或者全部因为大小边距等问题发生改变而需要DOM树重新计算的过程重绘不一定需要重排（比如颜色的改变），重排必然导致重绘（比如改变网页位置）引起重...

css的重绘回流