JS的装载和执行
首先，浏览器对JS的运行分两个特性：
1）载入后马上执行；
2）执行后会阻塞后面的内容（包括页面的渲染、其他资源的下载等）
所以，有多个js文件要载入的时候，浏览器默认是同步下载，即按顺序一个一个下载下来，并依次执行。
当此时，要操作DOM结点的时候，由于HTML被阻塞，DOM树还没生成，故此时如果引用document.getElementById这些操作时，会报找不到的错误。举例：
test.js
-
在head中引入的时候，页面加载出来了，但会报错，alert也没有出现：
test.html
执行结果 - 调整script标签的顺序，到body标签后：
test.html
结果
F12查看
认识DOMContentLoaded和load
先触发DOMContentLoaded事件，后触发load事件。
DOM文档加载的步骤为：
解析HTML结构。
加载外部脚本和样式表文件。
解析并执行脚本代码。
DOM树构建完成。//DOMContentLoaded
加载图片等外部文件。
页面加载完毕。//load
在第4步，会触发DOMContentLoaded事件。在第6步，触发load事件。
defer和async
defer：IE上用的，会把脚本异步装载，并且等到DOM装载完毕（DOMContentLoaded）。多个defer的<script>也会按照其出现的顺序执行。
async：H5新的属性。也会异步加载js脚本，但严格遵循“载入后立马执行”的特性，无法保证执行顺序和时机。
所以这两种都不会阻塞HTML的加载。
举例：
-
加入async（或者defer）后，页面渲染不阻塞，脚本也顺利执行了（div中的文本123被获取出来了）。
test.html
执行结果
此外，还可以通过创建script，插入到DOM中，加载完毕后callBack来异步加载。
网上这篇帖子写的不错，可以参考一下：http://www.360doc.com/content/13/0620/12/1332348_294249608.shtml
