Event Loop 中异步任务的疑问◔ ‸◔?

Question

这两天看了 Event Loop 相关的技术文章，写了一个测试代码，发现测试结果并不稳定，可能会因为一些变量而导致不同的结果。不知道是浏览器实现的问题还是测试代码的问题。

参考技术文章

为了后面方便引用，给参考文章加上编号
JavaScript 运行机制详解：再谈Event Loop - $RYF
并发模型与Event Loop - MDN - $MDN

首先贴代码：

测试环境

Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3041.0 Safari/537.36

运行了很多次，把比较典型的三种结果贴出来：

我的具体问题：

1. 第二个<script>标签中的同步代码的执行结果为什么排在异步回调之后？

• $RYF 文章中第四章讲到：

• 执行栈中的代码（同步任务），总是在读取"任务队列"（异步任务）之前执行。

2. setTimeout()的回调函数为什么会在主进程（另外一个<script>标签中的同步代码）和异步任务（XHR请求 jQuery 文件）之前调用？

• $RYF 文章中第五章讲到：

• setTimeout(fn,0)的含义是，指定某个任务在主线程最早可得的空闲时间执行，也就是说，尽可能早得执行。它在"任务队列"的尾部添加一个事件，因此要等到同步任务和"任务队列"现有的事件都处理完，才会得到执行。

• $MDN 中的 事件循环 -> 添加消息 段落讲到：

• 调用 setTimeout 函数会在一个时间段过去后在队列中添加一个消息。这个时间段作为函数的第二个参数被传入。如果队列中没有其它消息，消息会被马上处理。

• 难道测试结果二和三种，setTimeout()的回调函数出现在XHR的回调函数之前是因为当时消息队列中为空吗？

3. 往消息队列中添加消息是在事件触发的时候嘛？

• 例如，通过XHR请求 jQuery 资源，待 jQuery 文件加载完成会触发“加载完成事件”，这时候会在消息队列中添加一个消息，等待主进程读取并调用对应的回调函数。

4. 为什么 jQuery 资源加载时间的变化，会引起另外一个<script>标签中的同步代码、XHR的回调以及setTimeout()方法的回调，这三段代码执行先后的变化？

如有描述错误地方，请指正。。