1. 程式人生 > >腳本引用中使用defer和async用法和區別

腳本引用中使用defer和async用法和區別

兩個 不依賴 doc 體驗 html 中文 htm 停止 其他

技術分享

是的,就是在頁面腳本引用的時候設置defer或者async,為什麽會有這兩個屬相來輔助腳本加載那,因為瀏覽器在遇到script標簽的時候,文檔的解析會停止,不再構建document,有時打開一個網頁上會出現空白一段時間,瀏覽器顯示是刷新請求狀態(也就是一直轉圈),這就會給用戶很不好的體驗,defer和async的合理使用就可以避免這個情況,而且通常script的位置建議寫在頁面底部(移動端應用的比較多,這兩個都是html5中的新屬性)。

1.默認引用 script:<script type="text/javascript" src="x.min.js"></script>   

當瀏覽器遇到 script 標簽時,文檔的解析將停止,並立即下載並執行腳本,腳本執行完畢後將繼續解析文檔。

2.async模式 <script type="text/javascript" src="x.min.js" async="async"></script>

 當瀏覽器遇到 script 標簽時,文檔的解析不會停止其他線程將下載腳本,腳本下載完成後開始執行腳本,腳本執行的過程中文檔將停止解析,直到腳本執行完畢。

3.defer模式 <script type="text/javascript" src="x.min.js" defer="defer"></script>

 當瀏覽器遇到 script 標簽時,文檔的解析不會停止,其他線程將下載腳本,待到文檔解析完成,腳本才會執行

所以async和defer的最主要的區別就是async是異步下載並立即執行,然後文檔繼續解析,defer是異步加載後解析文檔,然後再執行腳本,這樣說起來是不是理解了一點了;

它們的核心功能就是異步,那麽兩種屬性怎麽去區分什麽情況下用哪個那,主要的參考是如果腳本不依賴於任何腳本,並不被任何腳本依賴,那麽則使用 defer,如果腳本是模塊化的,不依賴於任何腳本,那麽則使用 async;主要功能點說完了,小夥伴們有沒有分清楚他們的區別了那。

腳本引用中使用defer和async用法和區別