Script标签和脚本执行顺序

最新推荐文章于 2024-10-12 23:27:30 发布

MR_LP

最新推荐文章于 2024-10-12 23:27:30 发布

阅读量1w

点赞数 5

分类专栏： HTML 学习文章标签： chrome 标签脚本文档

本文链接：https://blog.csdn.net/MR_LP/article/details/53424580

版权

本文详细探讨了HTML script标签的默认行为、async和defer属性对脚本加载和执行顺序的影响。通过示例解释了不同情况下脚本的执行顺序，强调了async异步执行和defer延迟执行的特点，以及在不同浏览器中的兼容性问题。

摘要由CSDN通过智能技术生成

0.前言

估计所有读者也慢慢适应我每次讲东西之前先墨迹一段的习惯了。

那么我今天就来个转换，我！不！墨！迹！了！

正文开始。

1.script标签的默认行为

首先我们先来看一下 <script> 标签的几个重要特性：

script标签的会阻止文档渲染。相关脚本会立即下载并执行。
注意：（不带defer或async属性）
document.currentScript 可以获得当前正在运行的脚本(Chrome 29+, FF4+)。
脚本顺序再默认情况下和script标签出现的顺序一致。

既然我们已经明确了 script 标签的基本特性。

那我们就先来看一个例子，用这个例子来说明 script 的加载顺序问题。

2. script 的加载顺序

假设如下简单代码，我们去看一下，执行的结果是什么样子？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>李鹏：3206064928</title>
</head>
<body>

</body>
    <script>alert("MR_LP : A");</script>
    <script>alert("MR_LP : B");</script>
    <script>alert("MR_LP : C");</script>
</html>