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的加载。

举例：