reflow （回流）和 repaint（重绘)理解

reflow 和 repaint

repaint 就是重绘，reflow 就是回流。

严重性：在性能优先的前提下，性能消耗 reflow 大于 repaint。

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

如何触发：style 变动造成 repaint 和 reflow。

不涉及任何 DOM 元素的排版问题的变动为 repaint，例如元素的 color/text-align/text-decoration 等等属性的变动。
除上面所提到的 DOM 元素 style 的修改基本为 reflow。例如元素的任何涉及长、宽、行高、边框、display 等 style 的修改。

常见触发场景

触发 repaint：

color 的修改，如 color=#ddd；
text-align 的修改，如 text-align=center；
a:hover 也会造成重绘。
:hover 引起的颜色等不导致页面回流的 style 变动。

触发 reflow：

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

如何避免：

尽可能在 DOM 末梢通过改变 class 来修改元素的 style 属性：尽可能的减少受影响的 DOM 元素。
避免设置多项内联样式：使用常用的 class 的方式进行设置样式，以避免设置样式时访问 DOM 的低效率。
设置动画元素 position 属性为 fixed 或者 absolute：由于当前元素从 DOM 流中独立出来，因此受影响的只有当前元素，元素 repaint。
牺牲平滑度满足性能：动画精度太强，会造成更多次的 repaint/reflow，牺牲精度，能满足性能的损耗，获取性能和平滑度的平衡。
避免使用 table 进行布局：table 的每个元素的大小以及内容的改动，都会导致整个 table 进行重新计算，造成大幅度的 repaint 或者 reflow。改用 div 则可以进行针对性的 repaint 和避免不必要的 reflow。
避免在 CSS 中使用运算式：学习 CSS 的时候就知道，这个应该避免，不应该加深到这一层再去了解，因为这个的后果确实非常严重，一旦存在动画性的 repaint/reflow，那么每一帧动画都会进行计算，性能消耗不容小觑。

reflow （回流）和 repaint（重绘)理解相关推荐

reflow(回流)和repaint(重绘)
文章目录目录前言一.什么是reflow和repaint ? 二.reflow(回流)和repaint(重绘) 1.reflow(回流) 2.repaint(重绘) 3.尽量减少reflow 总结 ...
repaint(重绘)和reflow(回流)
文章目录前言 reflow(回流) repaint(重绘) 总结前言 repaint(重绘)和reflow(回流),其实是老生常谈的事情,一直从没正式写过总结,晚上偶然想起,不如简单写一下. 首先 ...
重排和重绘理解及解决方法
一.重排的概念当DOM的变化影响了元素的几何信息(元素的的位置和尺寸大小),浏览器需要重新计算元素的几何属性,将其安放在界面中的正确位置,这个过程叫做重排. 重排也叫回流,简单的说就是重新生成布局, ...
asp.net ajax 怎么获取前端ul li_字节前端提前批面试题：触发了几次回流几次重绘...
一道字节面试题刷新了我的认知,又学到了新知识,开心. 刚开始我说了答案是各3次,因为获取一次offsetWidth一次,然后改变样式一次. 但是后来发现之所以offsetWidth会触发重排是因为刷新 ...
什么是重绘repaint?什么是回流reflow?
什么是重绘? 重绘(repaint): 当我们对Dom的修改,导致了样式的变化比如:颜色.font-weight等属性的时候,却并未影响到几何属性(:比如盒子的weidth/height/positi ...
介绍下重绘和回流（Repaint Reflow），以及如何进行优化
1. 浏览器渲染机制浏览器采用流式布局模型(Flow Based Layout) 浏览器会把HTML解析成DOM,把CSS解析成CSSOM,DOM和CSSOM合并就产生了渲染树(Render Tre ...
自定义字体样式引入使用方法、文本阴影、边框阴影、（边框）圆角、渐变、理解重绘与回流、渐进增强和优雅降级的区别
目录 1.文本阴影 text-shadow 2.边框阴影 box-shadow 3.自定义字体样式方法引入与使用方法举例: 4.(边框)圆角 5.渐变 6.过渡 transition 7.理论知识 ...
重排(reflow) 重绘(repaint)
在页面的生命周期中:至少会发生一次渲染,在用户访问的过程中,还会不断的触发重排(reflow)重绘(repaint) 重绘和重排都会影响性能,尤其是重排,会使我们付出高昂的性能代价. 页面生成的过程( ...
如何理解浏览器的回流与重绘
一.浏览器渲染过程 1.浏览器会开启两条线程,一条渲染UI层(即html标签和css样式),一条渲染JavaScript脚本: 2.浏览器会将html标签渲染成一个DOM树,每个标签都是一个节点,挂载 ...

reflow （回流）和 repaint（重绘)理解

reflow 和 repaint

reflow （回流）和 repaint（重绘)理解相关推荐

最新文章

热门文章