script标签 加上async和defer属性的加载时机

默认script标签

• 其中绿色的线代表HTML文档的解析
• 蓝色的线代表script资源的获取
• 红色的线代表script资源的执行

  浏览器解析文档是从上到下执行的，当遇到script标签，浏览器会暂停解析HTML文档并获取并执行script标签内的内容，完成后继续解析HTML文档。
这也是为什么我们会将script标签放到</body>结束标签之前，因为此时HTML内容已经渲染完毕，用户会觉得页面加载更快了并且此时能对HTML文档的节点进行操作。

加上defer属性的script标签

  这个属性表示script标签会在整个页面解析之后再执行，但是遇到script标签时就会下载，并且不会阻塞HTML文档的解析。（上图中蓝线绿线是同时运行的）

<script defer src="some1.js"></script>
<script defer src="some2.js"></script>

  HTML5规范要求script标签按照他们出现的顺序执行，因此第一个推迟的原则上会在第二个推迟的script标签之前执行。不过在实际中这是不一定的，所以最好只包含一个这样的标签。

<script defer src="some1.js">
	codes;
</script>

  同时，HTML5规定defer属性只对外部脚本文件有效（即通过src获取文件），因此支持HTML5的浏览器会忽略行内脚本的defer属性。虽说这样解决了将script标签放在head中的弊端，但是不是所有浏览器版本都支持defer，所以最好还是将其放在</body>结束标签前。

加上async属性的script标签

  同样的async属性也只适用于外部脚本，并且告诉浏览器遇到script标签就开始下载，下载完后就执行。

<script defer src="some1.js"></script>
<script defer src="some2.js"></script>

与defer不同的是，它在不阻塞HTML文档解析的同时也不会阻塞其他脚本的下载，因此上面的第二个script脚本可能会先于第一个执行。这也是为什么异步脚本不应该在加载期间就修改DOM，因为执行时间不确定。