介绍回流与重绘(Reflow & Repaint),以及如何进行优化?

lxf2023-05-08 00:51:06

前言

回流与重绘对于前端来说可以说是非常重要的知识点了,我们不仅需要知道什么是回流与重绘,还需要知道如何进行优化。一个页面从加载到完成,首先是构建DOM树,然后根据DOM节点的几何属性形成render树(渲染树),当渲染树构建完成,页面就根据DOM树开始布局了,渲染树也根据设置的样式对应的渲染这些节点。在这个过程中,回流与DOM树,渲染树有关,重绘与渲染树有关。

如果这篇文章有帮助到你,❤️关注+点赞❤️鼓励一下作者,文章公众号首发,关注 前端南玖 第一时间获取最新的文章~

页面渲染过程

介绍回流与重绘(Reflow & Repaint),以及如何进行优化?

  • 解析HTML构建DOM Tree
  • 解析CSS构建CSSOM Tree
  • 构建渲染树(Render Tree),渲染树