最近重新翻了翻JavaScript高级程序设计，还是有很多小收获的。
script标签定义了6个属性
-
async表示立即下载脚本，但不影响页面中的其他操作 -
charset表示通过src属性指定的代码的字符集 -
defer表示脚本可以延迟到文档完全被解析和显示后再执行 -
language已废弃，原来是用于表示编写代码所使用的脚本语言 -
src表示包含要执行代码的外部文件 -
type可以看成是language的替代属性
今天来聊聊defer 和 async这两个属性。
正常情况下的使用
<html>
<head>
</head>
<body>
...
<script src="xxx.js"></script>
...
</body>
</html>
normal
浏览器会按照<script>元素在页面中出现的顺序加载。也就是说第一个解析完成，才会对第二个进行接续，然后才是第二个，第三个......
defer
<html>
<head>
<script defer src="xx1.js"></script>
<script defer src="xx2.js"\></script>
</head>
<body>
...
</body>
</html>
defer
就算我们把<script>标签放在<head>中，这两个js文件也是会在遇到</html>时才会执行。虽然html5规范要求脚本按照他们出现的顺序执行，并先于DOMContentLoaded事件。但在现实中，延迟脚本不一定按照顺序执行，且不一定先于DOMContentLoaded事件。所以最好只含有一个延迟脚本，且放在底部。
async
<html>
<head>
<script async src="xx1.js"></script>
<script async src="xx2.js"></script>
</head>
<body>
...
</body>
</html>
async
如上面的例子，第二个脚本可能会在第一个脚本前执行，且不让页面等待他们加载和执行，从而加载页面的其他内容。
script标签的使用
按照传统的方法，<script>元素应该放在页面的<head>元素中，但是<head>元素中如果包含了所有的js文件，意味着要等待所以的js文件加载完成和执行完成之后，才能呈现页面的内容，导致会有一段白屏时间。所以为了规避这个问题，一般把全部的javascript放在</body>前。
如果一个脚本不依赖于其他脚本，这时候使用async属性还是很有用的。
兼容性
defer
async
浏览器对defer和async的支持还是相当广的。在XHTML文档中，要把async属性设置成async="async"，defer也一样。
