我要招人

去企业版

首页 > 试题广场 >

下列哪些情况可触发reflow

[不定项选择题]

下列哪些情况可触发reflow

```
改变块级元素的width/height
```
```
改变background-color
```
```
visibility:hidden
```
```
改变font-size
```

查看正确选项

治电小白菜

体现：

repaint是某个DOM元素进行重绘；reflow是整个页面进行重排，也就是页面所有DOM元素渲染。

如何触发：

style变动造成repaint和reflow。

不涉及任何DOM元素的排版问题的变动为repaint，例如元素的color/text-align/text-decoration等等属性的变动。

除上面所提到的DOM元素style的修改基本为reflow。例如元素的任何涉及长、宽、行高、边框、display等style的修改。

常见触发场景：

触发repaint：
1. color的修改，如color=#ddd；
2. text-align的修改，如text-align=center；
3. a:hover也会造成重绘。
4. :hover引起的颜色等不导致页面回流的style变动。
5. 等等太多，一时间写出来也太难想了。
触发reflow：
1. width/height/border/margin/padding的修改，如width=778px；
2. 动画，:hover等伪类引起的元素表现改动，display=none等造成页面回流；
3. appendChild等DOM元素操作；
4. font类style的修改；
5. background的修改，注意着字面上可能以为是重绘，但是浏览器确实回流了，经过浏览器厂家的优化，部分background的修改只触发repaint，当然IE不用考虑；
6. scroll页面，这个不可避免；
7. resize页面，桌面版本的进行浏览器大小的缩放，移动端的话，还没玩过能拖动程序，resize程序窗口大小的多窗口操作系统。
8. 读取元素的属性（这个无法理解，但是技术达人是这么说的，那就把它当做定理吧）：读取元素的某些属性（offsetLeft、offsetTop、offsetHeight、offsetWidth、scrollTop/Left/Width/Height、clientTop/Left/Width/Height、getComputedStyle()、currentStyle(in IE))；

发表于 2018-02-13 10:26:48 回复(5)

菏妹

C选项：visibility保留物理空间，即使设置了visibility:hidden但页面结构没有改变

发表于 2018-09-29 10:09:24 回复(1)

平平无奇的小废物

摘自百度：

reflow：几乎是无法避免的。现在界面上流行的一些效果，比如树状目录的折叠、展开（实质上是元素的显示与隐藏）等，都将引起浏览器的 reflow。鼠标滑过、点击……只要这些行为引起了页面上某些元素的占位面积、定位方式、边距等属性的变化，都会引起它内部、周围甚至整个页面的重新渲染。通常我们都无法预估浏览器到底会 reflow 哪一部分的代码，它们都彼此相互影响着。

repaint：如果只是改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性，将只会引起浏览器 repaint（重绘）。repaint 的速度明显快于 reflow

下面情况会导致reflow发生

1：改变窗口大小

2：改变文字大小

3：内容的改变，如用户在输入框中敲字

4：激活伪类，如:hover

5：操作class属性

6：脚本操作DOM

7：计算offsetWidth和offsetHeight

8：设置style属性

那么为了减少回流要注意哪些方式呢？

1：不要通过父级来改变子元素样式，最好直接改变子元素样式，改变子元素样式尽可能不要影响父元素和兄弟元素的大小和尺寸

2：尽量通过class来设计元素样式，切忌用style

发表于 2021-04-14 15:44:57 回复(0)

Lydiagogo1162

请问c选项为什么不会引起reflow？？

发表于 2018-03-08 09:28:53 回复(3)

Moeyua

CSS属性 visibility 显示或隐藏元素而不更改文档的布局。该属性还可以隐藏<table>中的行或列。

不更改布局所以不会发生重排

渲染树转换为网页布局，称为“布局流”（flow）；布局显示到页面的这个过程，称为“绘制”（paint）。它们都具有阻塞效应，并且会耗费很多时间和计算资源。

页面生成以后，脚本操作和样式表操作，都会触发“重流”（reflow）和“重绘”（repaint）。用户的互动也会触发重流和重绘，比如设置了鼠标悬停（a:hover）效果、页面滚动、在输入框中输入文本、改变窗口大小等等。

重流和重绘并不一定一起发生，重流必然导致重绘，重绘不一定需要重流。比如改变元素颜色，只会导致重绘，而不会导致重流；改变元素的布局，则会导致重绘和重流。

编辑于 2020-08-24 09:39:18 回复(0)

念离

reflow(回流)是指浏览器为了重新渲染部分或者全部的文档,重新计算文档中的元素的位置和几何构造的过程。因为回流可能导致整个Dom树的重新构造,对性能影响很大

发表于 2022-08-16 11:02:09 回复(0)

sensitivemix

<p>visibility hidden 本身就暂居元素空间，所以改变其可见性，不会影响空间结构，造成重排</p>

发表于 2020-10-15 12:44:34 回复(0)

拒绝996的小刺猬很喜欢溜溜球

重绘不一定导致重排，但重排一定会导致重绘。

编辑于 2023-12-25 18:38:06 回复(0)

大卢同学

重绘：repaint-color、text-align、text-decoration、a：hover引起的颜色变动，background-color......
重排：reflow-长宽高变动，边框变动，大小变动font-size、动画、background修改、scroll、读取元素的某些属性、resize页面，能够改变桌面浏览器大小。

发表于 2022-11-29 15:35:26 回复(0)

都是小爷的

reflow是对整个页面进行重排

发表于 2022-11-12 15:49:20 回复(0)

牛客2254713号

浮动元素会reflow吗？

发表于 2022-04-24 17:51:40 回复(0)

／＼暮雨

行级元素设置宽高不会生效，那就不会进行重排吧？这个A为什么对呢？

发表于 2018-09-25 19:16:09 回复(1)

提交观点

问题信息

上传者：小小

难度：

12条回答 884收藏 3880浏览

下列哪些情况可触发reflow

问题信息

热门推荐

相关试题