重排与重绘

  • 重排reflow(回流)

  • 当浏览器发现某个部分发生了变化影响了布局,需要倒回去重新渲染。

    添加、删除可见的DOM元素
    元素位置改变、尺寸改变、内容改变
    页面初始化、resize事件等

  • 重绘repaint
    改变某个元素的背景色、文字颜色、边框颜色等影响周围或内部布局的属性时,屏幕的一部分要重画,但元素的几何尺寸不变

  • 注意:
    回流必定引起重绘,而重绘不一定会引起回流
    display: none;的节点不会被加入渲染树,而visibility: hidden;会被加入渲染树
    display:none;会触发回流;visibility: hidden;会触发重绘

发表评论

后才能评论