首页 > 试题广场 >

下列对 Reflow（回流）和 Repaint（重绘）的描述

[单选题]

下列对 Reflow（回流）和 Repaint（重绘）的描述正确的是？

repaint 比 reflow 更加花费时间影响性能

一条条地修改 DOM 的样式要比先定义好 css 的 class 然后修改 DOM 的 className 减少 reflow/repaint

为 HTML 标签使用 fixed 或 absolute 的 position，那么修改他们的 CSS 是不会 reflow 的

改变了某个元素的背景颜色，文字颜色等会导致 reflow

查看答案及解析

岁月如故

发表于 2019-08-20 19:44:38 回复(0)

狗佳蛋

都脱流了当然不会回流啦

发表于 2019-10-25 12:54:15 回复(5)

擎

我理解的，回流是页面结构变化（元素大小，定位），所以是整体刷新；重绘是某些元素外观风格（颜色等）变化，不影响整体布局结构，只需要局部刷新。

发表于 2019-03-28 11:01:16 回复(0)

藤景树

浏览器渲染过程：

1.解析HTML，生成DOM树，解析CSS，生成CSSOM树。

2.将DOM树和CSSOM树结合，生成渲染树（Render tree）。

3.Layout（回流）：根据生成的渲染树，进行回流，得到节点的几何信息。

4.Painting（重绘）：根据渲染树以及回流得到的节点，获取绝对像素。

5.Display：将像素发给GPU，展示在页面上

发表于 2019-09-10 23:57:17 回复(0)

Kim_Yang

简单来说，回流是页面整体结构发生改变（宽高，位置、窗口改变等）是从 CSSOM 到 Render Tree 全部重新生成，但是重绘是页面局部样式发生变化（颜色等），只是针对 Render Tree 局部的更新。

一句话总结，回流一定触发重绘，但重绘不一定触发回流

分析选项：

A：Repaint比Reflow更加花费时间影响性能
从局部和整体的关系就可以看出应该是 Reflow比Repaint更加花费时间影响性能
B：一条条地修改DOM的样式要比先定义好css的class然后修改DOM的className减少reflow/repaint
每一次修改都触发 reflow/repaint ，所以当然是用class统一修改更能减少触发概率，提升性能；另外现代的游览器对一段时间内的平凡修改样式做了优化，不会每修改一次便 reflow/repaint 一次，而是等待最后一次修改完成之后再统一 reflow/repaint
C：为HTML标签使用fixed或absoult的position，那么修改他们的CSS是不会reflow的
标签的position设置为fixed或absolut会导致标签脱流，故再修改它们的样式不会引起reflow，但还是有 repaint 哒，如果不能 repaint 就意味着你不能修改标签的样式啦！
D: 改变了某个元素的背景颜色，文字颜色等会导致Reflow
如上文所述，颜色只会导致 repaint 不会 Reflow

发表于 2021-01-10 18:00:02 回复(0)

lucky123

回流，重绘这些都是啥啊。。没学过

发表于 2019-07-24 19:58:57 回复(3)

媛大可爱(๑•.•๑)

什么是回流

当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候，这时候是一定会发生回流的，因为要构建render tree。在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程成为重绘。

什么是重绘

当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。

发表于 2020-05-13 11:56:47 回复(0)

阿木亮

reflow是重排，repaint是重绘。修改CSS可以是positioin、width、height、color等等，即便是脱流的元素在改变例如width属性时，也是要触发重排的。我认为没有正确答案。

发表于 2019-11-10 18:56:18 回复(1)

此生固短

当我们需要对DOM对一系列修改的时候，可以通过以下步骤减少回流重绘次数：

a.使元素脱离文档流

b.对其进行多次修改

c.将元素带回到文档中

该过程的第一步和第三步可能会引起回流，但是经过第一步之后，对DOM的所有修改都不会引起回流，因为它已经不在渲染树了

编辑于 2020-10-07 19:20:39 回复(0)

Tone6

都脱流了当然不会回流啦

发表于 2022-07-15 23:39:52 回复(0)

formoney

可以参考：https://www.cnblogs.com/dll-ft/p/5810639.html

写的很形象

发表于 2021-01-06 10:33:41 回复(0)

冰雪无霜

reflow（回流）：当浏览器发现某个部分发生了变化从而影响了布局，这个时候就需要倒回去重新渲染，大家称这个回退的过程叫 reflow。

repaint（重绘）： repaint则是当我们改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性时，屏幕的一部分要重画，但是元素的几何尺寸和位置没有发生改变。

发表于 2020-10-19 16:43:34 回复(0)

牛客138406320号

有人能解释一下B么。。

发表于 2022-12-03 23:33:43 回复(0)

你是真的棒

那我给你页面元素全干成position： fixed/absolute得了

发表于 2021-11-21 19:45:31 回复(0)

日晞呀

脱流了也就不会回流

发表于 2021-11-04 14:46:57 回复(0)

在开会的懒羊羊很幸运

在前端开发中，回流（reflow）和重绘（repaint）是涉及浏览器渲染过程的两个重要概念。回流指的是当DOM结构发生变化影响到了元素的几何属性（例如宽度、高度、位置等）时，浏览器会重新计算元素的几何属性，并重新构建渲染树，这个过程就是回流。回流是一种比较昂贵的操作，因为它会涉及到重新布局整个页面的过程，影响的范围可能比较大。重绘指的是当元素的样式发生改变（例如颜色、背景色、字体等），但不影响其几何属性时，浏览器会重新绘制受影响的元素，这个过程就是重绘。相对于回流，重绘的性能消耗较小，因为它只需要更新特定元素的样式而不需要重新布局。需要注意的是，回流和重绘通常是连续发生的，当某个元素触发了回流，它所包含的所有子元素也会进行回流和重绘。为了提高页面性能，我们需要尽量减少回流和重绘的次数。常见的优化方法包括： 1. 使用CSS的transform属性替代top和left等属性来进行动画效果，因为transform不会触发回流。 2. 在进行批量DOM操作时，先将元素脱离文档流（例如使用display:none），然后再进行操作，最后再将元素重新插入文档流，以减少回流次数。 3. 使用虚拟DOM框架（如React、Vue）进行局部更新，减少不必要的回流和重绘。 4. 避免频繁读取布局信息（例如offsetTop、offsetWidth等），因为这些操作会导致浏览器强制进行回流。通过合理的优化，可以降低回流和重绘的次数，提高页面的性能和用户体验。

发表于 2023-11-17 09:53:59 回复(0)

想减肥的大菠萝说我这儿没问题啊

什么是回流当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候，这时候是一定会发生回流的，因为要构建render tree。在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程成为重绘。什么是重绘当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。

发表于 2022-10-11 14:41:45 回复(0)

六识

reflow（回流）：当浏览器发现某个部分发生了变化从而影响了布局，这个时候就需要倒回去重新渲染，大家称这个回退的过程叫 reflow。 repaint（重绘）： repaint则是当我们改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性时，屏幕的一部分要重画，但是元素的几何尺寸和位置没有发生改变。

发表于 2022-10-05 09:25:51 回复(0)

要求不高有饭就饱

啊啊只有我看成“为标签使用......position不会回流”吗

发表于 2022-10-04 19:29:59 回复(0)

牛客229620143号

回流和重绘回流是元素的尺寸，位置，隐藏等发生重大变化，影响了布局，渲染树要重新渲染，重绘是对某个元素的样式进行修改，局部更新渲染树脱标后不会回流

发表于 2022-06-05 01:20:44 回复(0)

提交观点

问题信息

安卓工程师 CSS 前端工程师 2019 顺丰集团 HTML

来自：顺丰科技2019秋招前...

上传者：小小

难度：

29条回答 1678收藏 5945浏览

下列对 Reflow（回流）和 Repaint（重绘）的描述

什么是回流

什么是重绘

问题信息

热门推荐

相关试题