DOMContentLoaded和Load的区别

最新推荐文章于 2025-03-11 17:19:44 发布

菜鸟李先生

最新推荐文章于 2025-03-11 17:19:44 发布

阅读量1.8k

点赞数 2

分类专栏：浏览器文章标签： chrome javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_43812731/article/details/121274406

版权

本文详细探讨了DOMContentLoaded和Load事件的区别。DOMContentLoaded事件在HTML文档加载和解析完成，DOM构建完毕，但不等待所有资源加载时触发。而Load事件则在所有资源包括图片、脚本等完全加载完毕后触发。文章通过Chrome DevTools分析了这两个事件的触发时间，并讨论了defer和async属性对脚本加载和执行的影响，以及它们与DOMContentLoaded的关系。

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

详解 DOMContentLoaded

首先我们先直观地感受下什么是 DOMContentLoaded。打开 Chrome DevTools，切到 Network 面板，重新加载网页，得到如下截图：
在这里插入图片描述
标记 1 指向的蓝线以及标记 2 指向的蓝色字 “DOMContentLoaded:1.29s” 均表示 DOMContentLoaded 这个事件触发的时间，只不过表现形式不同而已。

直观地感受了 DOMContentLoaded，那它究竟是个什么东东呢？

什么是 DOMContentLoaded

我们先来思考一个问题，如何衡量一个网页的加载速度？

有人说可以用网页加载完全的时间来衡量。我觉得这没有问题，但不够好。为什么呢？在日常生活中，很多时候因为网络原因我们并不需要等待网页上的所有内容都加载完毕，而是只需要加载主要内容就可以了，比如你打开这篇博客时，可能并不需要等所有图片都加载完成，而是看到博客的正文就可以正常阅读了。把上面的话提炼一下就是，用户有时候只需要在空白的网页上看见内容就可以了，而不需要等待所有内容都加载出来。那既然这样，回到刚刚的问题，我觉得衡量一个网页加载速度的一个方法就是“计算这个网页从空白到出现内容所花费的时间”。那怎么计算这段时间？HTML5 规范已经帮我们完成了相应的工作，就是当一个 HTML 文档被加载和解析完成后，DOMContentLoaded 事件便会被触发。

这时问题又来了，“HTML 文档被加载和解析完成”是什么意思呢？或者说，HTML 文档被加载和解析完成之前，浏览器做了哪些事情呢？那我们需要从浏览器渲染原理来谈谈。