📅 最后修改于: 2023-12-03 15:37:40.512000 🧑 作者: Mango
JavaScript 是前端编程世界中非常重要的一种编程语言，可以帮助开发者实现网页交互效果、动画效果、表单验证、页面局部刷新等功能。
本文将介绍 JavaScript 在网页加载过程中与页面相关的一些知识点，帮助开发者更好地理解 JavaScript 在网页中的运行机制。
通常情况下，我们将 JavaScript 代码写在外部文件中，然后通过在 HTML 页面中引用的方式来加载 JavaScript 代码。如下所示：
<!DOCTYPE html>
<html>
<head>
<title>Sample Page</title>
<script src="sample.js"></script>
</head>
<body>
<h1>Sample Page</h1>
</body>
</html>
在上面的代码中，我们通过 script 标签引用了一个名为 sample.js 的外部 JavaScript 文件。当浏览器解析到这个标签时，就会请求并加载这个文件中的 JavaScript 代码。
除了使用外部文件的方式，我们也可以在 HTML 文件中直接编写 JavaScript 代码。如下所示：
<!DOCTYPE html>
<html>
<head>
<title>Sample Page</title>
</head>
<body>
<h1>Sample Page</h1>
<script>
function showMessage() {
alert('Hello, world!');
}
showMessage();
</script>
</body>
</html>
在上面的代码中，我们直接在 script 标签中编写了一个名为 showMessage 的 JavaScript 函数，并在页面加载完成后立即执行了这个函数。这种方式比较适合一些简单的页面效果，但不推荐在复杂的项目中使用。
在页面加载过程中，JavaScript 代码的执行顺序是非常重要的。下面介绍几个需要注意的点：
在使用外部 JavaScript 文件的方式时，多个 script 标签的顺序是会影响 JavaScript 代码的执行顺序的。如果一个 JavaScript 文件中的代码依赖于另一个 JavaScript 文件中的代码，那么必须保证被依赖的文件先于依赖者被加载。例如：
<!DOCTYPE html>
<html>
<head>
<title>Sample Page</title>
<script src="jquery.min.js"></script>
<script src="sample.js"></script>
</head>
<body>
<h1>Sample Page</h1>
</body>
</html>
在上面的代码中，我们先引用了 jquery.min.js 文件，再引用了 sample.js 文件。如果 sample.js 文件中使用了 jQuery 提供的一些方法，那么必须确保 jQuery 已经被加载完成，否则 sample.js 文件中的代码将无法正常运行。
为了解决 JavaScript 加载顺序对代码执行顺序的影响问题，HTML5 中新增了 defer 属性。当 script 标签含有 defer 属性时，浏览器会在 HTML 解析完成后才开始加载 JavaScript 文件，而且多个带有 defer 属性的 script 标签的 JavaScript 文件会按照它们在文档中出现的顺序依次被加载，但不会阻塞页面的渲染。如下所示：
<!DOCTYPE html>
<html>
<head>
<title>Sample Page</title>
<script src="jquery.min.js" defer></script>
<script src="sample.js" defer></script>
</head>
<body>
<h1>Sample Page</h1>
</body>
</html>
在上面的代码中，我们将两个 script 标签中添加了 defer 属性。这样就可以保证 sample.js 文件中所依赖的 jQuery 库已经被加载完成，而且 sample.js 文件中的代码也不会影响页面的渲染。
HTML5 中的 async 属性也可以实现非阻塞加载 JavaScript 文件的功能，不过 async 属性不会保证 JavaScript 文件的执行顺序。例如：
<!DOCTYPE html>
<html>
<head>
<title>Sample Page</title>
<script src="jquery.min.js" async></script>
<script src="sample.js" async></script>
</head>
<body>
<h1>Sample Page</h1>
</body>
</html>
在上面的代码中，我们将两个 script 标签中添加了 async 属性，这样就可以实现非阻塞加载 JavaScript 文件的功能了。但是由于 async 属性不保证 JavaScript 文件的执行顺序，所以在实际开发中要慎用。
本文介绍了 JavaScript 在网页加载过程中与页面相关的几个知识点，包括 JavaScript 的加载方式、JavaScript 的执行顺序等。了解这些知识点能够帮助开发者更好地掌握 JavaScript 在网页中的运行机制，写出更加优秀的 JavaScript 代码。