网页渲染中的重绘与重排

重绘

当改变那些不会影响元素在网页中的位置的元素样式时,譬如background-color(背景色), border-color(边框色), visibility(可见性),浏览器只会用新的样式将元素重绘一次(这就是重绘,或者说重新构造样式)。

重排

当改变影响到文本内容或结构,或者元素位置时,重排或者说重新布局就会发生。这些改变通常由以下事件触发:

  • DOM操作(元素添加,删除,修改,或者元素顺序的改变);
  • 内容变化,包括表单域内的文本改变;
  • CSS属性的计算或改变;
  • 添加或删除样式表;
  • 更改“类”的属性;
  • 浏览器窗口的操作(缩放,滚动);
  • 伪类激活(:悬停)。