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标签 的柱塞式执行方式了。