reflow
和重绘 repaint
;一个普通的网页,浏览器在渲染前须要先构建 DOM
(document object model) 和 CSSOM
(css object model) 树。css
DOM
DOM
树是怎么来的呢?咱们先假设有一个网页由一些文本,一幅图片组成:前端
浏览器会通过:浏览器
整个过程的最终输出是咱们这个普通页面的文档对象模型 (DOM),浏览器对页面的后续处理都会用到它。缓存
浏览器每次处理 HTML
标签时,都须要花费时间来完成上面的每一个步骤,一个页面有大量 HTML
处理时须要花费更多时间。网络
与处理 HTML 时同样,浏览器引擎须要将收到的 CSS 规则转化成浏览器能理解和处理的东西。数据结构
CSS
字节转换成字符,接着转换成令牌和节点,最后连接到一个称为“CSS 对象模型”(CSSOM) 的树结构内。构建 CSSOM
树是一个十分消耗性能的过程。布局
最后 CSSOM
树和 DOM
树合并成渲染树,并用它计算每一个可见元素的布局,而后输出给绘制流程,最终将像素渲染到屏幕上。性能
reflow
和重绘 repaint
reflow
有些地方译成重排。字体
字面意思上理解重绘:从新描绘某个区域。优化
理解回流要复杂一些,咱们增删 DOM 节点,修改一个元素尺寸,页面布局和 DOM 树结构发生变化,确定须要从新构建 DOM 树,而 DOM 树与渲染树是紧密相连的,DOM 树构建完,渲染树也会随之对页面进行再次渲染。
重绘:对 DOM 操做简单修改样式(好比修改元素的 visibility
、color
、background-color
等)、却并未影响页面布局时,浏览器不需从新计算元素的位置尺寸等,直接为该元素绘制新的样式。这个过程叫作重绘。
回流:对 DOM 操做致使 DOM 尺寸等属性的变化(好比修改元素的 width
、height
、top
)时,浏览器须要从新计算元素的属性,而后再将计算的结果绘制出来,这个过程叫作回流。
常见的会致使回流的操做:
总结:
由于频繁修改 DOM
或 CSSOM
自己是件特别耗费性能的事情,现代浏览器大多对于都作了必定的优化。好比会把一系列的操做放进队列机制来批量更新布局,至少一个浏览器刷新帧 16ms(即大多数显示屏幕的刷新率为 60Hz,一个刷新间隔为 1000ms/60)才会清空队列(节流优化~)。
但在获取布局尺寸等信息的时候,为了保证数据的准确性,队列中不管有没有会影响这些属性或方法返回值的操做,浏览器也会强制清空队列,触发回流与重绘。( IE 不保证有这些优化)
offsetTop
、offsetLeft
、offsetWidth
、offsetHeight
scrollTop
、scrollLeft
、scrollWidth
、scrollHeight
clientTop
、clientLeft
、clientWidth
、clientHeight
width
、height
getComputedStyle()
getBoundingClientRect()
CSS
表达式;transform
替代 top
;display:none
:临时把元素 脱离文档流,进行批量操做后再放回。这样只会有一次回流;createDocumentFragment
:建立文档片断,一次性把内容放进文档;DOM
树的最末端改变 class
:减少回流的范围;position
属性为 absolute
或 fixed
的元素上,避免影响其余元素的布局,这样只是一个重绘,而不是回流;