JS 在页面初始化加载函数的顺序

JavaScript 的初始化和加载顺序对于网页的性能和用户体验至关重要。以下是页面加载时可以初始化函数的几个阶段，以及相应的示例。

内联脚本

在 HTML 文件中直接编写 JavaScript 代码。内联脚本在浏览器解析到它们的位置时立即执行。

<!DOCTYPE html>
<html>
<head>
    <title>内联脚本示例</title>
</head>
<body>
    <script>
        console.log("内联脚本在页面解析时立即执行");
    </script>
</body>
</html>

外部脚本

通过<script>标签的src属性引用外部 JavaScript 文件。默认情况下，外部脚本在浏览器解析到它们的位置时执行。要让脚本在文档解析完成后执行，可以使用defer属性。

<!DOCTYPE html>
<html>
<head>
    <title>外部脚本示例</title>
</head>
<body>
    <script src="scripts.js"></script>
</body>
</html>

DOMContentLoaded 事件

当 HTML 文档被完全加载和解析完成后，DOMContentLoaded事件将被触发，不等待样式表、图像和子框架的完成加载。此时，可以在事件监听器中初始化函数。

document.addEventListener("DOMContentLoaded", function () {
    console.log("DOMContentLoaded 事件触发时执行");
});

window.onload 事件

当页面上所有资源（包括图像、样式表和子框架等）都加载完成后，window.onload事件将被触发。此时，可以在事件监听器中初始化函数。

window.onload = function () {
    console.log("window.onload 事件触发时执行");
};

jQuery 的 $(document).ready()

这是一个jQuery用法，它在DOMContentLoaded事件触发时执行。如果你使用 jQuery，可以在此处初始化函数。

$(document).ready(function () {
    console.log("$(document).ready 在 DOMContentLoaded 事件触发时执行");
});

或者使用更简洁的语法：

$(function () {
    console.log("简洁语法：在 DOMContentLoaded 事件触发时执行");
});

jQuery 的 $(window).on("load", function() {})

这是一个 jQuery 用法，它在 window.onload 事件触发时执行。如果你使用 jQuery，可以在此处初始化函数。

$(window).on("load", function () {
    console.log("$(window).on('load') 在 window.onload 事件触发时执行");
});

以上就是页面加载时可以初始化函数的几个阶段。了解这些阶段有助于你编写更高效、更可靠的 JavaScript 代码。在实际开发中，根据具体需求和性能要求，你可能需要在不同的阶段执行不同的初始化操作。

内联脚本

外部脚本

DOMContentLoaded 事件

window.onload 事件

jQuery 的 $(document).ready()

jQuery 的 $(window).on("load", function() {})

文章来源： JS 在页面初始化加载函数的顺序

相关推荐

暂无评论