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