script標籤中defer和async屬性的區別

  這篇文章來源於JS高級程序設計第三版中關於script標籤的介紹,結合查閱的資料寫下的學習筆記。javascript

  向html頁面中插入javascript代碼的主要方法就是經過script標籤。其中包括兩種形式,第一種直接在script標籤之間插入js代碼,第二種便是經過src屬性引入外部js文件。因爲解釋器在解析執行js代碼期間會阻塞頁面其他部分的渲染,對於存在大量js代碼的頁面來講會致使瀏覽器出現長時間的空白和延遲,爲了不這個問題,建議把所有的js引用放在</body>標籤以前。html

  script標籤存在兩個屬性,defer和async,所以script標籤的使用分爲三種狀況:java

  1.<script src="example.js"></script>瀏覽器

   沒有defer或async屬性,瀏覽器會當即加載並執行相應的腳本。也就是說在渲染script標籤以後的文檔以前,不等待後續加載的文檔元素,讀到就開始加載和執行,此舉會阻塞後續文檔的加載;網絡

  2.<script async src="example.js"></script>異步

     有了async屬性,表示後續文檔的加載和渲染與js腳本的加載和執行是並行進行的,即異步執行;async

  3.<script defer src="example.js"></script>學習

         有了defer屬性,加載後續文檔的過程和js腳本的加載(此時僅加載不執行)是並行進行的(異步),js腳本的執行須要等到文檔全部元素解析完成以後,DOMContentLoaded事件觸發執行以前。spa

  下圖能夠直觀的看出三者之間的區別:設計

 

  

 

  其中藍色表明js腳本網絡加載時間,紅色表明js腳本執行時間,綠色表明html解析。

  從圖中咱們能夠明確一下幾點:

  1.defer和async在網絡加載過程是一致的,都是異步執行的;

  2.二者的區別在於腳本加載完成以後什麼時候執行,能夠看出defer更符合大多數場景對應用腳本加載和執行的要求;

  3.若是存在多個有defer屬性的腳本,那麼它們是按照加載順序執行腳本的;而對於async,它的加載和執行是牢牢挨着的,不管聲明順序如何,只要加載完成就馬上執行,它對於應用腳本用處不大,由於它徹底不考慮依賴。

相關文章
相關標籤/搜索