Script标签和脚本执行顺序

最新推荐文章于 2023-06-21 10:49:24 发布

MR_LP

最新推荐文章于 2023-06-21 10:49:24 发布

阅读量1w

点赞数 5

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

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

版权

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>

执行结果如下：

这是我们按照正常的逻辑去执行，分别弹出了：

MR_LP : A
MR_LP : B
MR_LP : C

那我们再去考虑一下，在有网络的情况，请求的顺序会怎样呢？

在这里我去做一个限制，将我们的第二个文件中，书写非常多的注释，让我们的第二个文件大小要远远大于另外两个文件。

这时候我们再去看一下，顺序是什么样子的。

结果如何呢？

你会发现我们的加载顺序和上面一模一样。

这是为什么呢？第二个文件明明要大于另外两个文件呀。

这里就要说到 script标签的柱塞式执行方式了。

最低0.47元/天解锁文章

MR_LP

关注

5
点赞
踩
11

收藏

觉得还不错? 一键收藏
2
评论
Script标签和脚本执行顺序

0.前言估计所有读者也慢慢适应我每次讲东西之前先墨迹一段的习惯了。那么我今天就来个转换，我！不！墨！迹！了！正文开始。1.script标签的默认行为首先我们先来看一下 <script> 标签的几个重要特性：script标签的会阻止文档渲染。相关脚本会立即下载并执行。注意：（不带defer或async属性）document.currentScript 可以获得当前正在运行的脚本(Chrome
复制链接

扫一扫