正文

JavaScript文件加载完成检测方法揭秘：详述DOMContentLoaded、load事件与脚本执行时机差异

/0 浏览量
1108

在开发JavaScript应用时，正确地检测文件加载完成是非常重要的。这不仅能确保我们的脚本按预期执行，还能提升用户体验。本文将详细揭秘DOMContentLoaded、load事件以及脚本执行时机之间的差异。

DOMContentLoaded事件

当文档的DOM结构加载完成时，DOMContentLoaded事件会被触发。这意味着所有的DOM元素已经加载完毕，但并不包括图片、样式表和子框架等资源。

何时触发

  • 文档的HTML解析完成后立即触发。
  • 不等待样式表、图片和子框架的加载完成。

示例代码

document.addEventListener('DOMContentLoaded', function() {
  console.log('DOM完全加载并解析完毕');
});

load事件

当整个页面包括所有依赖资源（如图片、样式表、脚本等）加载完成时，load事件会被触发。

何时触发

  • 文档的HTML解析完成后。
  • 等待样式表、图片和子框架的加载完成。

示例代码

window.addEventListener('load', function() {
  console.log('整个页面加载完成');
});

脚本执行时机

脚本在页面加载过程中的执行时机取决于其位置：

  • 内联脚本：在DOMContentLoaded事件触发之前执行。
  • 外部脚本：根据其加载方式，执行时机可能不同。

内联脚本

<script>
  console.log('内联脚本在DOMContentLoaded之前执行');
</script>

外部脚本

  1. 同步加载：在DOMContentLoaded事件触发之前执行。
<script src="script.js" defer></script>
  1. 异步加载：在DOMContentLoaded事件触发之后执行。
<script src="script.js" async></script>
  1. 延迟加载：在DOMContentLoaded事件触发之后，load事件触发之前执行。
<script src="script.js" defer></script>

总结

  • DOMContentLoaded事件在DOM结构加载完成后触发，不等待其他资源加载。
  • load事件在页面完全加载完成后触发，包括DOM结构和所有资源。
  • 脚本执行时机取决于其位置和加载方式。

了解这些差异有助于我们在开发过程中更好地控制脚本执行时机，提升应用性能和用户体验。

-- 展开阅读全文 --