前言
向HTML页面中插入JavaScript的方法，就是使用<script>元素。HTML4.01为<script>定义了6个属性。
-
async：可选。表示应该立即下载脚本，但不妨碍页面中的其他操作，比如下载其他资源或等待加载其他脚本。只对外部脚本有效。
-
charset：可选。表示通过src属性指定的字符集。
-
defer：可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本有效。
-
language：已弃用。
-
src：可选。表示包含要执行代码的外部文件。
-
type：可选。可以看成是language的替代属性；表示编写代码使用的脚本语言的内容类型（也称为MIME）。默认text/javascript
延迟脚本 defer
作用：脚本执行时不会影响页面的构造。
原因：定义了defer属性的脚本会被延迟到整个页面都解析完毕后再执行。因此，在<script>中定义了defer属性，相当于告诉浏览器立即下载，但延迟执行。
在这个例子中，虽然我们把<script>元素放在了文档的<head>元素中，但其中包含的脚本将延迟到浏览器遇到标签后再执行。
- 多个defer脚本的执行顺序？
HTML5规范要求脚本按照他们出现的顺序的先后顺序执行，因此第一个延迟脚本会先于第二个延迟脚本执行，而这两个脚本会先于DOMContentLoaded事件执行。
在现实中，延迟脚本不一定按照顺序执行，也不一定在DOMContentLoaded事件触发前执行，因此最好只包含一个延迟脚本。
异步脚本 async
作用：不让页面等待脚本下载和执行，从而异步加载页面其他内容。
原因：这个属性与defer属性类似，用于改变处理脚本的行为。告诉浏览器立即下载文件。
- 多个async脚本的执行顺序？
以上代码中，第二个脚本文件可能会在第一个脚本文件之前执行。因此确保两者之间互不依赖非常重要。
异步脚本一定会在页面的load事件之前执行，但可能在DOMContentLoaded事件触发前后执行。
一张图说明defer和async脚本的下载和执行顺序：
蓝色线代表网络读取，红色线代表执行时间，这俩都是针对脚本的。
绿色线代表 HTML 解析。
补充：
什么叫整个页面都解析完毕？
涉及到页面的渲染机制相关内容，可看一下这篇文章www.cnblogs.com/baby-zuji/p…
DOMContentLoaded事件？
在形成完整的DOM树就会触发，不会理会图像、JavaScript文件、css文件或其他资源文件是否已经下载完毕。
load事件？
页面中的一切都加载完毕后出发，包括图像、JavaScript文件、css文件及其他资源文件。
