回流和重绘

重绘

由于节点的几何属性发生改变或者由于样式发生改变而不会影响布局的,称为重绘。例如outline,visibility,colorbackground-color等,重绘的代价是高昂的,因为浏览器必须验证DOM树上其他节点元素的可见性。

回流

回流是布局或者几何属性需要改变就称为回流。回流是影响浏览器性能的关键因素,因为其变化涉及到部分页面(或是整个页面)的布局更新。一个元素的回流可能会导致了其所有子元素以及DOM中紧随其后的节点、祖先节点元素的随后的回流。

回流必定会发生重绘,重绘不一定会引发回流。

减少回流重绘
  1. 使用transform替代top
  2. 使用 visibility 替换 display: none ,因为前者只会引起重绘,后者会引发回流(改变了布局

guona
54 声望11 粉丝