常用方法以及存在问题
放置于head处
先加载js再加载Html。
当Js文件很大时，需要等js文件全部加载完之后才会加载html，应用会出现短暂的空白，影响用户体验。
放置于文档末尾
先加载Html再加载js。
虽然解决了需要等待js加载的问题，但是由于html和js的加载仍然是线性的，总体的加载时间并没有缩短。
async
前面提到，无论是先加载html还是先加载js，效率都是较低的。那要怎么解决这个问题，实现同时加载呢？
答案是使用async。
<script src="script.js" async></script>
浏览器遇到 async 脚本时不会阻塞页面渲染，而是直接下载然后运行。这样脚本的运行次序就无法控制，只是脚本不会阻止剩余页面的显示。当页面的脚本之间彼此独立，且不依赖于本页面的其它任何脚本时，async 是最理想的选择。
defer
async解决了同时加载的问题，但是
这样脚本的运行次序就无法控制
我的理解是，假设有AB两个个文件，由于html和js是同时加载运行的，
可能A运行所需要操作的html元素在html文件的后半段，
而B运行所需要的html元素就在html文件的前半段。
有可能 AB加载完成之后，由于html还只加载了前半段，B文件将会先于A文件运行。
由此出现的新的问题：当B文件中js对A文件有所依赖，先运行B文件是行不通的。
我们要怎样让AB文件严格按照先运行A文件，后运行B文件的顺序执行呢？
答案是使用defer。
<script defer src="js/A.js"></script>
<script defer src="js/B.js"></script>
总结
如果脚本无需等待页面解析，且无依赖独立运行，那么应使用 async。
如果脚本需要等待页面解析，且依赖于其它脚本，调用这些脚本时应使用 defer，将关联的脚本按所需顺序置于 HTML 中。
网友评论