1. 程式人生 > >async 和 defer 的區別

async 和 defer 的區別

syn 聲明 標簽 發的 www 線程 text 圖片 soft

  摘自:

    https://blog.csdn.net/liuhe688/article/details/51247484

    https://segmentfault.com/q/1010000000640869

    https://www.cnblogs.com/leungUwah/p/6480868.html


async 和defer 的區別

在開發中我們可以在script中聲明兩個不太常見的屬性:deferasync,下面分別解釋了他們的用法:

defer:用於開啟新的線程下載腳本文件,並使腳本在文檔解析完成後執行。
async:HTML5新增屬性,用於異步下載腳本文件,下載完畢立即解釋執行代碼。

沒有 defer

async,瀏覽器會立即加載並執行指定的腳本,“立即”指的是在渲染該 script 標簽之下的文檔元素之前,也就是說不等待後續載入的文檔元素,讀到就加載並執行。

async,加載渲染後續文檔元素的過程將 script.js 的加載與執行並行進行(異步)。

defer,加載後續文檔元素的過程將 script.js 的加載並行進行(異步),但是 script.js 的執行要在所有元素解析完成之後,DOMContentLoaded 事件觸發之前完成。

然後從實用角度來說呢,首先把所有腳本都丟到 </body> 之前是最佳實踐,因為對於舊瀏覽器來說這是唯一的優化選擇,此法可保證非腳本的其他一切元素能夠以最快的速度得到加載

解析。

關於DOMContentLoaded 的拓展知識:

DOMContentLoaded和load的區別:它們都是頁面加載的時候觸發的事件。區別在於觸發的時機不一樣。

瀏覽器渲染頁面DOM文檔加載的步驟:

1.解析HTML結構。

2.加載外部腳本和css文件。

3.解析並執行腳本代碼。

4.DOM樹構建完成。(此時會觸發DOMContentLoaded事件)

5.加載外部圖片等文件。

6.頁面加載完畢。(此時會觸發load事件)

async 和 defer 的區別