重绘和重排

1.重绘和重排

  • 重排
    当DOM变化影响了元素的几何属性,浏览器需要重新计算元素的几何属性,其他元素的几何属性和位置也会受到影响,重新构造渲染树,这就是重排
  • 重绘
    完成重排后,浏览器会重新绘制受影响的部分到屏幕,例如改变一个元素的背景色,不会影响元素的宽和高,这种情况会发生重绘

2.重排发生的场景

  • 添加和删除可见DOM元素
  • 元素位置改变
  • 元素内容改变,如小文本被图片代替
  • 页面渲染初始化
  • 浏览器窗口尺寸改变

3.渲染树变化的排队和刷新

当对此改变元素的样式时,每次改变不会都引起重排和重绘,但是浏览器会将三次改变保存到队列中,并批量执行来优化重排过程,一次完成。

但是,如果通过offset,client,scroll,getComputedStyle等获取布局信息的操作会导致队列刷新,尽量不要在布局改变时做查询

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 网页生成的过程 要理解网页性能为什么不好,就要了解网页是怎么生成的。 网页的生成过程,大致可以分成五步:1.HTM...
    葶寳寳阅读 4,968评论 0 8
  • 链接:http://blog.csdn.net/lihongxun945/article/details/3783...
    青春前行阅读 3,798评论 0 2
  • 对于页面,我们经常有CSS对网页进行呈现样式效果,这就涉及到了页面的重绘和重排 重绘(repaints)与重排(r...
    一现_阅读 5,532评论 0 0
  • DOM树:表示页面结构。渲染树:表示DOM节点如何显示。 定义 当DOM元素影响了元素的几何属性(例如宽和高),浏...
    sdcV阅读 3,816评论 0 1
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,693评论 1 92

友情链接更多精彩内容