script 代码块的加载顺序_script加载顺序-CSDN博客

本文链接：https://blog.csdn.net/m0_46512929/article/details/117445612

一、script 代码块的默认加载和执行顺序：

默认加载执行的顺序的问题：

一般的解决方案：

二、 js的 async 异步加载介绍：

三、js的 defer 延迟加载介绍：

一、script 代码块的默认加载和执行顺序：

从上到下依次边加载边解释执行。如果设计到了引入外部的js代码，那么该代码必须加载完成并解释执行完毕之后才能继续解析后面的HTML 和 js代码。

默认加载执行的顺序的问题：

如果加载的外部的js代码比较大，而且是网络js代码，可能会引起页面的假死状态。

一般的解决方案：

（1）将这些js代码放到 body 的末尾。
（2）给script标签添加async属性。让该引入的外部的js代码，实现异步加载。
(3) 给script标签添加 defer 属性。让该引入的外部的js代码，实现延迟加载。

二、 js的 async 异步加载介绍：

1：必须针对使用引入外部的js代码，该属性才能生效。
2: 如果给引用外部js代码的script添加了 async，那么该引入的js的执行特点如下：
（1）js代码的加载和后续的HTML内容是并行加载的。
（2）如果js代码先加载完了，HTML还没有加载完毕，会暂停HTML的解析。执行js代码，然后再解析。

注意：使用 async 属性的 script代码，各个script代码之间不应该存在上下的依赖关系，因为这些 async 的script代码加载完毕的顺序是不可控的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/test1.js" async></script>
</head>
<body>
<script src="js/test2.js" async></script>
<script>
    console.log ("test");//先执行
</script>
</body>
</html>

三、js的 defer 延迟加载介绍：

1：必须针对使用引入外部的js代码，该属性才能生效。
2：所有使用了defer 属性的 script 的加载顺序是固定的。
3：延迟加载。所有的 defer 的script 和 后续的HTML 内容可以实现并行加载。
4：如果defer属性的script 代码加载完毕，需要等待HTML解析完毕之后才能执行js代码

5：如果defer 和 async 同时使用，那么 async 的优先级高于defer的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/test1.js" defer>第二个执行</script>
</head>
<body>

<script src="js/test2.js" defer>最后执行</script>
<script>
    console.log ("test");//先执行
</script>
</body>
</html>