Script标签和脚本执行顺序 - 文档加载 - 面向浏览器编程
发布在Javascript编程指南2014年5月21日view:4365
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

原文: http://pij.robinqu.me/Browser_Scripting/Document_Loading/ScriptTag.html

源代码: https://github.com/RobinQu/Programing-In-Javascript/blob/master/chapters/Browser_Scripting/Document_Loading/ScriptTag.md

  • 本文需要补充更多例子
  • 本文存在批注,但该网站的Markdown编辑器不支持,所以无法正常展示,请到原文参考。

Script标签和脚本执行顺序

这里详细聊聊和script标签相关的脚本执行顺序。

Script标签的默认行为

几个首要特性:

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

假设如下简单代码1,最终会产生三个alert依次为“A”、“B”、“C”。

<!-- HTML Code -->
<script>alert("A");</script>
<script>alert("B");</script>
<script>alert("C");</script>

我们再考虑有网络请求的情况2

<!-- HTML code -->
<script  src="https://snipt.net/raw/7b08744009c450e07c0bfc1d606fc72e/"></script>
<script  src="https://snipt.net/raw/a2e8c05c1f6fc0e47d259aa899304e89/"></script>
<script  src="https://snipt.net/raw/4fab3017d3d46cbfc4bbd88aab006650/"></script>

三个文件都需要先下载再运行,且第二个文件的尺寸远大于另外两个文件。但结果依然是弹出三个alert,内容分别是”A”、”B”、”C”。

从上面两个例子,可以充分了解到script标签的柱塞式执行。

async属性

async属性是HTML5的新特性3,这意味着其兼容性并不乐观(IE10+)。

async表示该script标签并不柱塞,也不同步执行。浏览器只需要在脚本下载完毕后再执行即可——不必柱塞页面渲染等待该脚本的下载和执行。

如下代码4,会得到三个alert,但是alert的内容分别是”A”,”C”,”B”。

<!-- HTML code -->
<script  src="https://snipt.net/raw/7b08744009c450e07c0bfc1d606fc72e/"></script>
<script  src="https://snipt.net/raw/a2e8c05c1f6fc0e47d259aa899304e89/" async=true></script>
<script  src="https://snipt.net/raw/4fab3017d3d46cbfc4bbd88aab006650/"></script>

可以看到,第二个script标签在加入async并没有阻止后续文档解析和脚本执行。

考究这个属性产生的原有,其实有大量的脚本加载器在做这样的事情:

var script = document.createElement("script");
script.src = "file.js";
document.body.appendChild(script);

不难想象,通过脚本异步插入的script标签达到的效果和带async属性的script标签是一样的。换句话说,由脚本插入的script标签默认是async的。

另外,对內联脚本设置async属性是没有意义的,也不产生其他效果。其包含的脚本总是立即执行的。

defer属性

带有defer属性的脚本,同样会推迟脚本的执行,并且不会阻止文档解析。就如同这个脚本,放置到了文档的末尾(</body>之前)。

如下代码5的宏观现象和加了async属性的例子是一样的,都会得到”A”、”C”、”B”的三个alert。但是其原理是不一样的。

<!-- HTML code -->
<script  src="https://snipt.net/raw/7b08744009c450e07c0bfc1d606fc72e/"></script>
<script  src="https://snipt.net/raw/a2e8c05c1f6fc0e47d259aa899304e89/" defer=true></script>
<script  src="https://snipt.net/raw/4fab3017d3d46cbfc4bbd88aab006650/"></script>

defer属性是会确保脚本在文档解析完毕后执行的——即使这个脚本在文档解析过程中就已经下载完毕变成可执行的状态,浏览器也会推迟这个脚本的执行,直到文档解析完毕6,并在DOMContentLoaded之前7

同时,带有defer的脚本彼此之间,能保证其执行顺序。

注意,defer属性并不是每个浏览器支持,即便支持的浏览器,也会因为版本不一样导致具体行为不一致。另外,大家可以通过将script标签放置到文档末尾这种简单的做法达到defer属性一样的效果。

defer属性早在IE4就被支持,但是这个defer属性和现代浏览器的行为是有区别的。只有IE10以上,才开始按照标准执行defer属性。

async与defer的影响

参考W3C的官方文档8,defer和async两个属性是可以互相影响的:

There are three possible modes that can be selected using these attributes. If the async attribute is present, then the script will be executed asynchronously, as soon as it is available. If the async attribute is not present but the defer attribute is present, then the script is executed when the page has finished parsing. If neither attribute is present, then the script is fetched and executed immediately, before the user agent continues parsing the page.

简单的归纳:

  • 仅有async属性,脚本会异步执行
  • 仅有defer属性,脚本会在文档解析完毕后执行
  • 两个属性都没有,脚本会被同步下载并执行,期间会柱塞文档解析

规范里没有提到两种属性都有时的效果,但这是文档中被允许的。这样的具体效果会在后面讨论。

document.write的影响

docuemnt.write允许向打开的文档流中写入文档内容;内嵌到HTML里面的docuemnt.write可以就地添加文档内容。考虑到docuemnt.write写入script标签的情况9:

<!-- HTML code -->
<script  src="https://snipt.net/raw/7b08744009c450e07c0bfc1d606fc72e/"></script>
<script>document.write("\<script  src=https://snipt.net/raw/a2e8c05c1f6fc0e47d259aa899304e89 \/\>\<\/script\>");</script>
<script  src="https://snipt.net/raw/4fab3017d3d46cbfc4bbd88aab006650/"></script>

观察到执行顺序和普通的script标签没有区别。即使你插入的标签带有async或defer,其行为也是没有区别的。

让人纠结的是反过来10使用。由于第二个脚本是通过document.write写入的。被延迟的脚本在执行时,document已经关闭,document.write是没有任何效果的。所以,不管使用defer还是async,第二个脚本始终没有运行。

浏览器兼容性

defer属性

async属性

测试用例

评论
发表评论
暂无评论
WRITTEN BY
ELFVision
养猫的互联网绅士
TA的新浪微博
PUBLISHED IN
Javascript编程指南

enter image description here

这是一本开源的Javascript编程指南。内容从最简单的语法基础,到复杂的框架编写、项目自动化,都有覆盖。这本开源书籍大致分为三个部分:Javacsript核心基础、浏览器编程、NodeJS环境编程。也希望大家能共同编写!

非常欢迎大家一起来写完这本书!请直接联系我来获取合作。

  • Email: robinqu@gmail.com
  • Weibo: @ELFVision

有两方面大家可以来帮忙:

  • 来抓bug:文章勘误、演示代码更正等等
  • 补充内容
    • 对于某个主题,你希望添加内容
    • 或者你觉得你可以自主写一些相关主题
    • 或是你已经写过相关主题,我也很希望能够直接收录优秀的好文章!

大家也可以直接Fork项目,然后通过PullRequest来提交任何修改。

我的收藏