前端面试之DOM操作成本高在哪？

最新推荐文章于 2025-04-29 16:05:26 发布

笑笑的微笑

最新推荐文章于 2025-04-29 16:05:26 发布

阅读量189

点赞数

分类专栏：前端文章标签： js

本文链接：https://blog.youkuaiyun.com/pz3305636904/article/details/116029027

版权

前端专栏收录该内容

21 篇文章

订阅专栏

本文探讨了前端面试中常问的DOM操作为何成本高，详细解析了HTML渲染过程，包括DOM树、CSS规则树、render树的生成，以及布局和绘制。每次DOM操作后，浏览器会进行布局和绘制，但绘制不一定会触发布局。理解这些原理对于优化前端性能至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端面试之DOM操作成本高在哪？

文章借鉴博客DOM操作成本高在哪，文章用以记录

要想清楚DOM成本，首先需要了解HTML的渲染过程：
1、渲染引擎读取HTML，生成DOM树
2、渲染引擎读取CSS，生成CSS规则树，
3、合并DOM和CSS规则树，生成render树，
4、根据render树布局（计算布局和大小），
5、绘制render树，绘制页面信息
6、浏览器通知GPU（图像处理器）绘制页面

需要注意的是：在每次进行了DOM操作后，一定会进行布局与绘制，消耗GPU，但是绘制不一定导致布局，因为可能是改变颜色而已。