回流：当一个元素的位置、尺寸等发生改变的时候 浏览器需要重新计算该元素的几何属性并且摆放到正确的位置的过程就叫做回流。一般像页面初次渲染、带有动画的元素、添加/删除功能、图片放大缩小、浏览器窗口发生改变的时候都会触发回流。 重绘：当一个元素的外观、样式发生改变而布局不会改变，重新绘制的过程叫做重绘。 回流必定会触发重绘，而重绘则不一定会触发回流。一般来说，回流对性能的损耗更多一点
发表于 2022-04-27 12:11:49
回复(5)
重排：当dom的变化影响元素的几何信息（元素的位置和尺寸大小），浏览器需要重新计算元素的几何属性，将其安放在界面的正确的位置。这个过程叫重排。重绘：一个元素外观发生改变，但没有改变布局，重新把元素绘制出来的过程。重排一定会发生重绘，重绘就不一定要重排，重排对性能的消耗要更多一些。触发重排的方法：改变元素的位置；改变元素的尺寸，比如边距，填充，边框，宽度，高度等；页面初始渲染，这是开销最大的一次重排；改变元素的字体大小；改变浏览器窗口大小，比如resize事件发生时；改变元素内容，字体数量，图片大小；激活css伪类；设置style属性的值，因为设置style属性会改变结点样式，就会触发重排。查询某些属性、或者调用某些计算方法:offsetwidth，offheight。避免重排的方法是样式集中改变；使用absolute或fixed脱离文档流；使用gpu加速，transform。
发表于 2022-07-04 12:30:45
回复(0)
重绘不一定引起重排、但重排一定会引起重绘。避免：使用translate替代top、使用visibility代替display:hidden、none、DOM离线后修改、使用class去修改样式、使用 absolute 或 fixed 脱离文档流 、使用GPU加速提升网站的动画渲染性能:transform、transform: translateZ(0); 或 transform: translate3d(0,0,0);不要选择table布局
发表于 2022-05-23 17:34:17
回复(0)
重排：页面DOM元素的布局发生变化，需要重新排列元素位置。重绘：页面DOM元素的样式发生变化，需要重新绘制元素图层。重排又叫回流，发生在重绘之前。 避免重排和重绘的方式，即避免JS频繁操作DOM： 1.使用fragment生成一个DOM切换，在切片上多次操作DOM然后一次性更新到真实DOM上。 2.Vue中虚拟DOM，多次操作虚拟DOM然后一次性与真实DOM进行比较，减少操作DOM引起的重绘。 此外，JS引擎每次执行完宏任务之后，页面会重绘一次。控制宏任务的产生频率也能减少重绘： 3.防抖和节流，控制事件处理程序的调用频率。
发表于 2022-08-18 20:42:18
回复(0)
回流：当文档流中的元素位置或者尺寸改变或者浏览器计算相关的几何属性，将其重新安排位置的过程叫做回流。 重绘：当文档流中的元素外观改变但是不影响布局时，重新渲染元素的外观的过程叫做重绘。重排必定触发重绘，但重绘不一定触发重排。 重绘跳过了创建布局树和分层的阶段，因此性能消耗比重排小。 触发重排的方法有： 1. 初始化页面 2.改变文字大小 3.浏览器计算offsetHeight/width，resize 4.设置css伪类 5. style属性。 避免重排的方法有 1.尽量用class类的方式统一修改样式 2. 脱离文档流 3.transform的方式调整位置 而不是 top、left、margin等，触发GPU加速 3.减少使用table布局 4. 使用visibility：hidden ，隐藏元素而不是 display：none 更改文档流
发表于 2022-10-16 23:44:30
回复(0)
重排：当dom的变化影响元素的几何信息（元素的位置和尺寸大小），浏览器需要重新计算元素的几何属性，将其安放在界面的正确的位置。这个过程叫重排。重绘：一个元素外观发生改变，但没有改变布局，重新把元素绘制出来的过程。重排一定会发生重绘，重绘就不一定要重排，重排对性能的消耗要更多一些。触发重排的方法：改变元素的位置；改变元素的尺寸，比如边距，填充，边框，宽度，高度等；页面初始渲染，这是开销最大的一次重排；改变元素的字体大小；改变浏览器窗口大小，比如resize事件发生时；改变元素内容，字体数量，图片大小；激活css伪类；设置style属性的值，因为设置style属性会改变结点样式，就会触发重排。查询某些属性、或者调用某些计算方法:offsetwidth，offheight。避免重排的方法是样式集中改变；使用absolute或fixed脱离文档流；使用gpu加速，transform。
发表于 2022-06-12 14:52:17
回复(0)
重绘与回流是浏览器渲染的时候进行的操作，当页面内容发生改变的时候，就会触发重绘或者回流
【重绘】
当渲染树中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color，则就叫称为重绘（Repaint）
【回流】
当渲染树中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建，这就称为回流（Reflow）,有些地方也称为重排，可理解为重新布局。每个页面至少需要一次回流，就是在页面第一次加载的时候，这时候是一定会发生回流的，因为要构建渲染树，回流一定触发重绘。（一般像页面初次渲染、带有动画的元素、添加/删除功能、图片放大缩小、浏览器窗口发生改变的时候都会触发回流。）
【二者关系】
- 回流必定会触发重绘，而重绘则不一定会触发回流。一般来说，回流对性能的损耗更多一点
- Reflow的成本比Repaint的成本高得多的多。DOM Tree里的每个结点都会有reflow方法，一个结点的reflow很有可能导致子结点，甚至父点以及同级结点的reflow。在一些高性能的电脑上也许还没什么，但是如果reflow发生在手机上，那么这个过程就会卡顿与耗电。
【重绘】
当渲染树中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color，则就叫称为重绘（Repaint）
【回流】
当渲染树中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建，这就称为回流（Reflow）,有些地方也称为重排，可理解为重新布局。每个页面至少需要一次回流，就是在页面第一次加载的时候，这时候是一定会发生回流的，因为要构建渲染树，回流一定触发重绘。（一般像页面初次渲染、带有动画的元素、添加/删除功能、图片放大缩小、浏览器窗口发生改变的时候都会触发回流。）
【二者关系】
- 回流必定会触发重绘，而重绘则不一定会触发回流。一般来说，回流对性能的损耗更多一点
- Reflow的成本比Repaint的成本高得多的多。DOM Tree里的每个结点都会有reflow方法，一个结点的reflow很有可能导致子结点，甚至父点以及同级结点的reflow。在一些高性能的电脑上也许还没什么，但是如果reflow发生在手机上，那么这个过程就会卡顿与耗电。
发表于 2023-01-10 12:42:15
回复(0)
重绘：只是改变元素的外观，而没有改变元素的位置，浏览器不需要重新计算元素的布局，只需要在页面重新绘制出元素； 重排：改变元素的几何属性，使元素的位置发生改变，浏览器就会重新计算元素在布局上的位置，重新排列； 重排一定会触发重绘，但重绘不一定触发重排 重绘：改变元素的颜色，边框等属性 重排：改变元素的大小、位置、文字、字号，窗口大小发生变化，图片的大小，伪类的触发就会触发重排， 要集中式的修改样式，使用transform，使用absoult和fixed脱离文档流
发表于 2024-04-29 16:12:36
回复(0)
重排是元素的几何信息发生改变比如位置和尺寸。重绘事元素的样式和外观发生改变：比如颜色。重排必然引起重绘，重绘不会 引起重排。位置改变可以用transsForm、和opcity不会导致重绘和重排。批量的重绘和重排可以放在内存中操作，然后在一次性的添加到页面中。
发表于 2024-04-24 14:38:26
回复(0)
当元素添加节点删除节点或者大小改变等触发的是重排，元素样式改变比如字体颜色改变是重绘，重排一定会产生重绘，重绘不一定会产生重排 避免：统一管理样式；使用定位是节点脱离文档流；使用transform代替top、left
编辑于 2024-03-21 17:25:07
回复(0)
重绘：指元素的几何属性不变，页面的外观发生变化，重新绘制，但不影响布局的情况，例如改变元素的颜色、背景色等 重绘不会带来重新计算布局的开销，因此性能影响相对较小。但是，如果重绘操作频繁发生，也会对性能产生影响。 避免方法：使用CSS的`transform`和`opacity`属性进行动画，这些变化会创建新的图层，不会触发重绘 通过`requestAnimationFrame`来控制动画，可以确保动画在合适的时间高效执行 重排：指元素的位置、尺寸等几何属性发生变化，需要重新计算页面布局的过程。 重排会重新计算整个页面的布局，因此性能影响较大。在某些情况下，如窗口大小改变、DOM元素的增删改等，都可能导致重排 避免方法：将多个对DOM的修改合并在一起，使用文档片段（document fragment）或先在非显示状态下进行批量更新，然后一次性应用到DOM上 使用局部变量缓存DOM元素的几何属性，如宽度、高度等，减少对样式的重复访问 利用现代浏览器提供的优化工具，如`requestAnimationFrame`和`willChange`属性，提前告知浏览器可能的变化 对于复杂的元素，可以使用`position: absolute`将其脱离文档流，这样对该元素的操作不会影响到其他元素 避免使用table布局，会形成多次计算
编辑于 2024-03-08 21:00:28
回复(0)
重排（回流）：当一个元素的位置、尺寸等发生改变时，浏览器需要重新计算元素的集合属性并且摆放到正确的位置就叫做回流。 一般像页面初次渲染、带有动画的元素、添加/删除功能、图片放大缩小、浏览器窗口发生改变的时候都会触发回流。 重绘：当一个元素的外观、样式发生改变而布局不会改变，重新绘制的过程叫做重绘。 回流必定会触发重绘，而重绘不一定会触发回流。一般来说，回流对性能损耗更大。 避免重排的方法：样式集中改变； 使用absolute或fixed脱离文档流； 使用GPU加速，transform；
发表于 2023-09-05 16:33:52
回复(0)
当一个元素的位置（margin、padding等）或者尺寸大小（width、height、font-size等）发生变化时，会触发重排。重排对性能的损耗更多。 当一个元素的样式（颜色）发生变化时，会触发重绘。 重绘不一定会触发重排，而重排一定会触发重绘。 避免重排的方法有 1.尽量用class类的方式统一修改样式（集中修改样式） 2. 使用absolute\fixed脱离文档流 3.用transform的方式调整位置 而不是 top、left、margin等，触发GPU加速 3.减少使用table布局 4. 使用visibility：hidden ，隐藏元素而不是 display：none 更改文档流
发表于 2023-06-11 10:41:06
回复(0)
当一个元素的位置，尺寸等属性发生改变，浏览器需要重新计算它的几何属性，并把它放到正确的位置上去的过程就叫回流。一般像页面初次渲染，删除添加动能，图片放大缩小，浏览器窗口改变，都会触发回流。重绘是元素的外观，样式发生改变，但不影响布局，重新绘制的过程叫重绘。回流一定会触发重绘，但重绘不一定会触发回流。回流对性能的损耗大一点
发表于 2023-03-24 00:13:32
回复(0)
问题信息
-
扫描二维码，关注牛客网
- 意见反馈
-
下载牛客APP，随时随地刷题
扫一扫，把题目装进口袋
- 求职之前，先上牛客
-
扫描二维码，进入QQ群
扫描二维码，关注牛客公众号
- 公司地址：北京市朝阳区北苑路北美国际商务中心K2座一层-北京牛客科技有限公司
- 联系方式：010-60728802 投诉举报电话：010-57596212（朝阳人力社保局）
- 牛客科技© All rights reserved admin@nowcoder.com
- 京ICP备14055008号-4 增值电信业务经营许可证 营业执照 人力资源服务许可证
-
京公网安备
11010502036488号
