以下哪些操作会触发Reflow：() var obj ..._用友笔试题

旺仔大馒头

正确答案： BC。

B计算了offsetHeight，C重新设置了高度。

A打印出类名，无影响。

D重新设置背景，引起重绘。

简要：整个在浏览器的渲染过程中（页面初始化，用户行为改变界面样式，动画改变界面样式等）reflow(回流)和repaint(重绘) 会大大影响web性能，尤其是手机页面。因此我们在页面设计的时候要尽量减少reflow和repaint。

什么是reflow和repaint（原文链接：http://www.cnblogs.com/Peng2014/p/4687218.html）

reflow：例如某个子元素样式发生改变，直接影响到了其父元素以及往上追溯很多祖先元素（包括兄弟元素），这个时候浏览器要重新去渲染这个子元素相关联的所有元素的过程称为回流。

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

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

下面情况会导致reflow发生

1：改变窗口大小

2：改变文字大小

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

4：激活伪类，如:hover

5：操作class属性

6：脚本操作DOM

7：计算offsetWidth和offsetHeight

8：设置style属性

发表于 2019-09-07 16:46:19 回复(10)

汪伟明

alert()这个方法弹出来的框算不算是脚本操作DOM?

发表于 2020-04-13 13:10:31 回复(0)

6pences

获取一个元素的scrollTop、scrollLeft、scrollWidth、offsetTop、offsetLeft、offsetWidth、offsetHeight之类的属性，浏览器为了保证值的正确也会回流取得最新的值

发表于 2019-09-22 13:06:41 回复(0)

不遇清辰色

字体大小改变（font size change）窗口大小改变（screen change）样式表添加或者删除（add/delete stylesheets） JS更改DOM元素（js changing dom） hover动作（:hover）位置计算（offset cats）用户输入（user input）改变样式属性（changing class attribute）都会触发reflow

发表于 2019-07-08 14:21:58 回复(0)

哔哔哩哩

获取一个元素的scrollTop、scrollLeft、scrollWidth、offsetTop、offsetLeft、offsetWidth、offsetHeight之类的属性，浏览器为了保证值的正确也会回流取得最新的值

发表于 2020-10-12 08:05:01 回复(2)

zgtnf

B选项很疑惑，单单是获取了高度，怎么就会发生了重排呢？样式还是原来的样式啊，布局还是原来的布局啊。

编辑于 2019-10-25 18:57:41 回复(10)

闫坤来咯

reflow(回流)和repaint(重绘) 简要：整个在浏览器的渲染过程中（页面初始化，用户行为改变界面样式，动画改变界面样式等）reflow(回流)和repaint(重绘) 会大大影响web性能，尤其是手机页面。因此我们在页面设计的时候要尽量减少reflow和repaint。什么是reflow和repaint（原文链接：http://www.cnblogs.com/Peng2014/p/4687218.html） reflow：例如某个子元素样式发生改变，直接影响到了其父元素以及往上追溯很多祖先元素（包括兄弟元素），这个时候浏览器要重新去渲染这个子元素相关联的所有元素的过程称为回流。 reflow：几乎是无法避免的。现在界面上流行的一些效果，比如树状目录的折叠、展开（实质上是元素的显示与隐藏）等，都将引起浏览器的 reflow。鼠标滑过、点击……只要这些行为引起了页面上某些元素的占位面积、定位方式、边距等属性的变化，都会引起它内部、周围甚至整个页面的重新渲染。通常我们都无法预估浏览器到底会 reflow 哪一部分的代码，它们都彼此相互影响着。 repaint：如果只是改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性，将只会引起浏览器 repaint（重绘）。repaint 的速度明显快于 reflow 下面情况会导致reflow发生 1：改变窗口大小 2：改变文字大小 3：内容的改变，如用户在输入框中敲字 4：激活伪类，如:hover 5：操作class属性 6：脚本操作DOM 7：计算offsetWidth和offsetHeight 8：设置style属性

发表于 2021-07-29 00:23:32 回复(0)

牛客955794565号

reflow(回流)和repaint(重绘)

简要：整个在浏览器的渲染过程中（页面初始化，用户行为改变界面样式，动画改变界面样式等）reflow(回流)和repaint(重绘) 会大大影响web性能，尤其是手机页面。因此我们在页面设计的时候要尽量减少reflow和repaint。

什么是reflow和repaint（原文链接：http://www.cnblogs.com/Peng2014/p/4687218.html）

reflow：例如某个子元素样式发生改变，直接影响到了其父元素以及往上追溯很多祖先元素（包括兄弟元素），这个时候浏览器要重新去渲染这个子元素相关联的所有元素的过程称为回流。

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

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

下面情况会导致reflow发生

1：改变窗口大小

2：改变文字大小

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

4：激活伪类，如:hover

5：操作class属性

6：脚本操作DOM

7：计算offsetWidth和offsetHeight

8：设置style属性

发表于 2021-09-14 19:52:14 回复(0)

迷途小学生

会引起重绘的操作有这些：

1.访问offset,client,scroll等相关属性

2.元素大小发生改变

3.窗口大小发生改变

4.浏览器刷新

5.元素通过display改变了可视性

6.元素定位发生改变

7.元素的font-size发生改变

8.元素的伪类触发

发表于 2022-02-07 11:01:50 回复(1)

牛客362130879号

感觉只要不是元素结构改变就不会引起回流

发表于 2021-08-06 23:14:46 回复(0)

牛客744496046号

<p>回流是重拍，改变元素的颜色不会引起重拍</p>

发表于 2020-09-25 09:46:24 回复(0)

蒲公英想养花

获取一个元素的scrollTop、scrollLeft、scrollWidth、offsetTop、offsetLeft、offsetWidth、offsetHeight之类的属性，浏览器为了保证值的正确也会回流取得最新的值。下面情况会导致reflow发生 1：改变窗口大小 2：改变文字大小 3：内容的改变，如用户在输入框中敲字 4：激活伪类，如:hover 5：操作class属性 6：脚本操作DOM 7：计算offsetWidth和offsetHeight 8：设置style属性

发表于 2023-04-10 14:05:29 回复(0)

一叶遮惊鸿

对B，由于js是单线程的，js执行线程和渲染线程只能同时执行一个

box.style.height='100px' box.style.width='100px'

js在执行完height为100px时，会把他缓存起来，但还没有渲染，直到执行完js代码或者下一行代码不是改变style类型时，才会进行渲染，在此之前不会重绘重排

box.style.height='100px' box.style.width=(box.clientHeight+100)+'px'

js在执行height时没有开始渲染，但是在执行到box.clientHeight时为了获取实时的高度，会强制渲染一遍，触发了重排，然后再执行width触发了第二次重排

发表于 2023-03-22 10:46:34 回复(0)

随便来个offer就行

https://blog.csdn.net/weixin_49343253/article/details/118327284

发表于 2022-10-31 22:05:42 回复(0)

二叉树先生

真是山羊放洋屁，又骚又洋气

发表于 2021-11-29 22:20:00 回复(0)

心台。

reflow回流，会更改页面窗口大小使浏览器进行重新渲染。

发表于 2021-11-17 21:49:15 回复(0)

new一个前端大佬

改变几何比如高度位置都会发生重汇

发表于 2021-06-09 23:04:42 回复(0)

牛客205968298号

回流和重绘还是要区分一下，重绘一般只影响自身，而回流则会导致重新计算其他节点

发表于 2021-04-10 15:07:18 回复(0)

江南以南

重绘不一定重排，重排一定重绘

发表于 2021-03-13 01:01:27 回复(0)

广园

回流意味着要重新计算元素的位置信息，一般选择会影响位置信息的

发表于 2021-03-08 21:24:18 回复(0)

以下哪些操作会触发Reflow：() var obj ...

问题信息

热门推荐

相关试题