為什么要異步加載JS
同步加載JS：將<script>腳本放在<head>標簽內，不使用defer和async。這時瀏覽器碰到<script>標簽會立即加載並執行指定的腳本，“立即”指的是在渲染 <script> 標簽之下的文檔元素之前，也就是說不再渲染后續的文檔元素，直到<script>之內的元素加載並執行完畢。這樣會造成 “空白頁” 出現，給用戶帶來很不友好的體驗，所以就出現了異步加載JS的辦法；
異步加載JS：異步是相對於HTML解析來說的。即在加載<script>腳本的同時繼續加載並渲染后續的HTML元素，即並行進行，該過程為異步加載JS；
異步加載JS有哪些方法
1、將<script>腳本放在</body>標簽之前
注意，這並不是真正意義上的異步加載JS，而是利用HTML從上到下執行代碼的特性，最后執行<script>腳本
但是，這是最佳實踐。因為對於舊瀏覽器來說這是唯一的優化選擇，此法可保證非腳本的其它一切元素能夠以最快的速度加載並解析。
2、使用defer
<script defer src="demo1.js"></script>
<script defer src="demo2.js"></script>
demo1.js 和 demo2.js 將和后續文檔元素的加載同時進行（加載並不等於執行）；
demo1.js 和 demo2.js 的執行是在所有元素渲染完成之后，DOMContentLoaded事件觸發之前完成；
demo1.js 和 demo2.js 會按照順序執行，即先執行 demo1.js，再執行 demo2.js（因為demo1.js 在 demo2.js 之前）；
注意：當腳本都加載完成后才會按照順序執行
適用：當腳本之間有相互依賴時非常合適
3、使用async
<script async src="demo3.js"></script> <script async src="demo4.js"></script>
demo3.js 和 demo4.js 將和后續文檔元素的加載同時進行（加載並不等於執行）；
demo3.js 和 demo4.js 並不保證執行順序，誰先加載完成誰先執行。即同一個js文件的執行緊挨着加載的，加載完畢就執行
demo3.js 和 demo4.js 可能在DOMContentLoaded事件之前執行，比如當HTML元素特別多時
也可能在DOMContentLoaded事件之后執行，比如當HTML元素特別少時
適用：對於那些可以不依賴任何腳本或不被任何腳本依賴的腳本來說卻是非常合適的
寫的比較偏理論，想看實踐的，推薦一篇文章 https://www.cnblogs.com/jiasm/p/7683930.html。