異步加載JS可通過async屬性或回調函數實現。同步加載會阻塞html解析，影響頁面加載速度，降低用戶體驗；而異步加載讓腳本在后臺下載，不影響頁面渲染。async屬性使腳本并行下載并立即執行，適合無依賴的腳本；回調函數則通過動態創建script標簽，在主腳本加載完成后按順序加載其他腳本，確保依賴關系正確。defer屬性與async不同，它保證腳本在html解析完成后按序執行，適合依賴dom的腳本。最佳實踐包括：優先使用async提升加載速度；用回調函數處理依賴；用defer處理依賴dom的腳本；考慮模塊化工具管理復雜項目；定期監控加載性能以優化體驗。
簡單來說，HTML中JS異步加載可以通過async屬性或者回調函數來實現。async屬性讓腳本并行下載，下載完成后立即執行（可能打斷HTML解析）。回調函數則是在主腳本加載完成后，再加載并執行其他腳本，保證依賴關系。
async屬性與回調函數處理
為什么需要異步加載JS？
同步加載JS會阻塞HTML解析，如果JS文件過大或者服務器響應慢，會導致頁面加載速度變慢，用戶體驗變差。異步加載JS則可以避免這個問題，讓JS文件在后臺下載，不影響HTML的解析和渲染。想想，用戶打開一個網頁，半天刷不出來，是不是直接就關了？這就是同步加載的惡果。異步加載，至少讓用戶先看到頁面內容，體驗好很多。
立即學習“前端免費學習筆記（深入）”；
如何使用async屬性進行異步加載？
async屬性是html5新增的，它告訴瀏覽器，這個腳本可以并行下載，下載完成后立即執行。這意味著，腳本的執行順序可能和它們在HTML中的出現順序不同。
<script src="script1.js" async></script> <script src="script2.js" async></script>
上面的代碼中，script1.js和script2.js會并行下載，哪個先下載完就先執行哪個。但是要注意，如果script2.js依賴于script1.js，那么可能會出現問題。所以，async屬性適合于那些不依賴其他腳本的腳本，比如統計代碼、廣告代碼等。
如何使用回調函數進行異步加載？
回調函數是一種更靈活的異步加載方式。它的基本思想是，先加載一個主腳本，然后在主腳本中動態創建script標簽，加載其他腳本，并在其他腳本加載完成后執行回調函數。
<script> function loadScript(src, callback) { var script = document.createElement('script'); script.src = src; script.onload = function() { callback(); }; document.head.appendChild(script); } loadScript('script1.js', function() { // script1.js加載完成后執行的代碼 console.log('script1.js loaded'); loadScript('script2.js', function() { // script2.js加載完成后執行的代碼 console.log('script2.js loaded'); }); }); </script>
上面的代碼中，loadScript函數接受兩個參數：腳本的URL和回調函數。當腳本加載完成后，會執行回調函數。這樣，就可以保證腳本的執行順序。回調函數雖然看起來稍微復雜點，但是可以很好地處理腳本之間的依賴關系。
defer 屬性和 async 屬性的區別是什么？
defer屬性也用于異步加載腳本，但它和async屬性有一些區別。defer屬性告訴瀏覽器，這個腳本可以并行下載，但是要等到HTML解析完成后再執行。而且，defer屬性會保證腳本的執行順序和它們在HTML中的出現順序相同。
<script src="script1.js" defer></script> <script src="script2.js" defer></script>
上面的代碼中，script1.js和script2.js會并行下載，但是會等到HTML解析完成后再執行，而且會先執行script1.js，再執行script2.js。defer屬性適合于那些依賴于DOM的腳本，比如jquery等。
簡單來說，async是下載完就執行，不保證順序；defer是下載完等HTML解析完再執行，保證順序。選擇哪個，取決于你的腳本是否依賴于其他腳本或者DOM。
異步加載JS的最佳實踐是什么？
- 優先使用async屬性：如果腳本不依賴于其他腳本，可以使用async屬性進行異步加載，這樣可以最大程度地提高頁面加載速度。
- 使用回調函數處理依賴關系：如果腳本之間有依賴關系，可以使用回調函數來保證腳本的執行順序。
- 使用defer屬性處理依賴于DOM的腳本：如果腳本依賴于DOM，可以使用defer屬性，確保腳本在HTML解析完成后執行。
- 考慮使用模塊化工具：對于大型項目，可以考慮使用模塊化工具（比如webpack、Rollup等）來管理JS文件，這些工具可以自動處理腳本之間的依賴關系，并進行代碼優化。
- 監控加載性能：使用瀏覽器的開發者工具或者性能監控工具，定期檢查JS文件的加載性能，及時發現和解決問題。
記住，沒有銀彈。選擇哪種方式，需要根據你的具體情況來決定。重要的是，要理解每種方式的優缺點，并根據實際情況進行選擇。
