異步加載JS—defer和async

時間 2020-06-29

原文原文鏈接

爲何要異步加載JShtml

　　同步加載JS：將<script>腳本放在<head>標籤內，不使用defer和async。這時瀏覽器碰到<script>標籤會當即加載並執行指定的腳本，「當即」指的是在渲染 <script> 標籤之下的文檔元素以前，也就是說再也不渲染後續的文檔元素，直到<script>以內的元素加載並執行完畢。這樣會形成「空白頁」出現，給用戶帶來很不友好的體驗，因此就出現了異步加載JS的辦法；瀏覽器

　　異步加載JS：異步是相對於HTML解析來講的。即在加載<script>腳本的同時繼續加載並渲染後續的HTML元素，即並行進行，該過程爲異步加載JS；異步

異步加載JS有哪些方法async

一、將<script>腳本放在</body>標籤以前優化

　　注意，這並非真正意義上的異步加載JS，而是利用HTML從上到下執行代碼的特性，最後執行<script>腳本spa

　　可是，這是最佳實踐。由於對於舊瀏覽器來講這是惟一的優化選擇，此法可保證非腳本的其它一切元素可以以最快的速度加載並解析。code

二、使用deferhtm

　　<script defer src="demo1.js"></script>

　　<script defer src="demo2.js"></script>

　　demo1.js 和 demo2.js 將和後續文檔元素的加載同時進行（加載並不等於執行）；blog

　　demo1.js 和 demo2.js 的執行是在全部元素渲染完成以後，DOMContentLoaded事件觸發以前完成；事件

　　demo1.js 和 demo2.js 會按照順序執行，即先執行 demo1.js，再執行 demo2.js（由於demo1.js 在 demo2.js 以前）；

　　注意：當腳本都加載完成後纔會按照順序執行

　　適用：當腳本之間有相互依賴時很是合適

三、使用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元素特別少時

　　適用：對於那些能夠不依賴任何腳本或不被任何腳本依賴的腳原本說倒是很是合適的

寫的比較偏理論，想看實踐的，推薦一篇文章 http://www.javashuo.com/article/p-aexzjbby-bn.html。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。