在没有 jQuery 的情况下，何时调用 JavaScript 函数：详解各种方法
2024-03-06 11:03:51
在没有 jQuery 的情况下，何时调用 JavaScript 函数
前言
当页面加载并 DOM 准备好时，我们常常需要调用 JavaScript 函数。在 jQuery 中，我们使用 $.ready() 函数来实现这一目的。然而，在没有 jQuery 的情况下，我们可以采用多种方法来达到相同的效果。
DOMContentLoaded 事件
DOMContentLoaded 事件在 HTML 文档的 DOM 加载后触发，但不等待图像和其他资源加载。对于大多数情况来说，它是一个不错的选择。示例代码如下：
document.addEventListener("DOMContentLoaded", function() {
// DOM 加载后执行的代码
});
window.onload 事件
window.onload 事件在页面完全加载后触发。然而，这种方法可能会导致页面加载速度变慢。示例代码如下：
window.onload = function() {
// 页面加载后执行的代码
};
轮询
轮询是一种不断检查 document.readyState 属性直到它变成 "complete"（表示页面已加载）的方法。然而，这种方法效率较低。示例代码如下：
var interval = setInterval(function() {
if (document.readyState === "complete") {
// 页面加载后执行的代码
clearInterval(interval);
}
}, 100);
第三方库
还有一些第三方库可以帮助你实现 $.ready() 的功能，例如：
- loadjs
- domready
- ready.js
这些库提供了一个方便的方法来处理页面加载事件，而无需使用原生 JavaScript 代码。
最佳实践
- 优先使用 DOMContentLoaded 事件，因为它具有跨浏览器兼容性。
- 使用
defer属性来异步加载脚本，避免阻塞页面加载。 - 避免使用 window.onload 事件，因为它会影响页面加载速度。
常见问题解答
1. 如何在页面加载后执行多个函数？
document.addEventListener("DOMContentLoaded", function() {
// 函数 1
// 函数 2
});
2. 如何检查页面是否完全加载？
if (document.readyState === "complete") {
// 页面已完全加载
}
3. 如何使用第三方库来处理页面加载事件？
例如，使用 loadjs：
loadjs([
"script1.js",
"script2.js"
], function() {
// 页面加载后执行的代码
});
4. 为什么轮询效率较低？
因为轮询不断检查 document.readyState，消耗 CPU 资源并可能导致性能下降。
5. 为什么使用 defer 属性？
defer 属性使脚本在 HTML 解析后才执行，避免阻塞页面渲染。
总结
在没有 jQuery 的情况下，我们可以使用 DOMContentLoaded 事件、轮询或第三方库来在页面或 DOM 准备好时调用 JavaScript 函数。优先使用 DOMContentLoaded 事件，因为它跨浏览器兼容，并且避免使用 window.onload 事件，因为它会影响页面加载速度。通过遵循这些最佳实践，你可以确保 JavaScript 代码在页面准备好时立即执行，从而提升用户体验和网站性能。
