script 加载顺序问题的延展研究

今天群里有人问为什么会出现脚本的加载顺序与定义脚本顺序不一致的问题，这个问题引起了我的好奇，经过一番调研，有了这篇文章。

这是一个伪命题吗？

首先，W3C 推荐 script 脚本应该被立即加载和执行，其次，经过网络搜索，我只发现了 1 例相同的问题，所以这个问题的真伪其实还有待进一步验证，但是从逻辑上说，浏览器会并行加载静态资源，对于 Chrome，可以并行加载 6 个资源，如果其中一个资源获取的比较缓慢，那么会影响串行的下 6 个请求的发送，如果能够预先测试出 6 个通畅的请求，一并发送，那么就可以提升网络加载的整体性能。但浏览器是否有这一层优化呢？目前我只见到这篇文章提到过浏览器似乎有这个优化算法，但是并没有在其他地方得到确认。

标签的价值

我们有两种方式使用 <script> 标签：

通过设置 src 属性引入外部 JavaScript 静态资源；
执行 <script> 开闭标签内的 JavaScript 脚本；

但其实本质上这两种方式是一回事，其最终的目的就是让浏览器在当前页面执行 JavaScript 脚本，只不过对于前者而言多了一道工序：将服务器返回的 JavaScript 脚本内容插入 <script> 标签内部，然后在执行它。

因此，对于 <script> 标签，我们唯一关心的只有一点：JavaScript 脚本被执行的时机。

标签的加载顺序

在页面中，我们有两处地方可以放置 <script> 标签：

<head> ... </head> head 标签内部；
<body> ... </body> body 标签内部；

在 <head> 标签中插入引用外部 JavaScript 会导致 <body> 标签内的内容在 JavaScript 被完全下载，解析，执行完毕后才会被解析，这期间用户会看到浏览器一片空白，因此会影响用户体验。（这是由于浏览器从上至下解析 HTML 文档，而 JavaScript 的下载，解析和执行会中止浏览器的解析过程）。

因此业界通行的做法是，将 script 标签放置 <body> 底部，从而避免 JavaScript 阻塞页面渲染。

但无论如何，我们的 JS 脚本的执行顺序是相同的：根据其在页面中的位置决定先后顺序。

但是我们可以通过两个属性改变这一顺序。

script 常用属性：defer 和 async

async 属性

async 属性是 HTML5 规范新推出的一个属性，用来告知浏览器应该尽可能的异步加载脚本。所有的浏览器都支持
该属性。具有该属性的脚本我们既无法得知它下载的时间，也无法得知它执行的时机，我们唯一知道的只有两点：

脚本会被异步下载；
脚本下载完毕后会立即执行，此时会阻止 HTML 的渲染；

⚠️ 注意，script 标签必须有 src 属性，且属性值有效。

defer 属性

defer 属性向浏览器指明了脚本被执行的时机：“文档解析之后，DOMContentLoaded 事件被触发之前（即 HTML 文档被完全加载和解析，不管样式表，图片或 iframe 是否加载完毕。恩，一个很微妙的时间