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

编辑于:2023年05月23日
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 代码。在实际开发中,根据具体需求和性能要求,你可能需要在不同的阶段执行不同的初始化操作。

相关推荐

HTML 新手基础入门概念

HTML 新手基础入门概念

在《什么是网页源代码》中,我们简要介绍了网页源代码的组成,其中 HTML(超文本标记语言)作为网页的骨架,负责组织和展示网页的基本结构和内容。 本篇文章将重点介绍 HTML 的相关概念,并通过实例帮助初学者更 ...

JavaScript 新手入门指南

JavaScript 新手入门指南

JavaScript(简称“JS”)是一种广泛使用的编程语言,用于为网站添加交互性和动态功能。在本文中,我们将介绍 JavaScript 的基本概念、规则和示例,帮助初学者入门。 一、JavaScript 简介 JavaScript 是一种脚本语 ...

jQuery 是什么,如何使用?

jQuery 是什么,如何使用?

jQuery 是一个受欢迎的 JavaScript 库,旨在简化 HTML 文档处理、事件处理、动画制作以及 AJAX 交互等任务。jQuery 的主要设计理念是 "write less, do more"(用更少的代码实现更多的功能)。本文将为初学者详细 ...

暂无评论