基本概念
默認情況下js的腳本執(zhí)行是同步和阻塞的盒音,但是 <script> 標簽有 defer 和 async 屬性, 這可以改變腳本的執(zhí)行方式祈匙。
如:
要注意一點凭豪,html5 中這些屬性只在和src屬性聯(lián)合使用時才有效召锈。
如果同時指定了兩個屬性着帽,則會遵從async屬性而忽略defer屬性携悯。
作用
defer 屬性標注的腳本是延遲腳本祭芦,使得瀏覽器延遲腳本的執(zhí)行,也就是說憔鬼,腳本會被異步下載但是不會被執(zhí)行龟劲,直到文檔的載入和解析完成,并可以操作轴或,腳本才會被執(zhí)行昌跌。
async 屬性標注的腳本是異步腳本,即異步下載腳本時照雁,不會阻塞文檔解析蚕愤,但是一旦下載完成后,立即執(zhí)行饺蚊,阻塞文檔解析萍诱。
區(qū)別
延遲腳本會按他們在文檔里的出現(xiàn)順序執(zhí)行
異步腳本在它們載入后執(zhí)行,但是不能保證執(zhí)行順序污呼。
兩者的區(qū)別在于執(zhí)行時的不同:
async 腳本在script文件下載完成后會立即執(zhí)行,并且其執(zhí)行時間一定在 window的load事件觸發(fā)之前裕坊。這意味著多個async腳本很可能不會按其在頁面中的出現(xiàn)次序順序執(zhí)行。
與此相對燕酷,瀏覽器確保多個 defer 腳本按其在HTML頁面中的出現(xiàn)順序依次執(zhí)行,且執(zhí)行時機為DOM解析完成后籍凝,document的DOMContentLoaded 事件觸發(fā)之前映企。
所以說,async 是一個亂序執(zhí)行的主静浴,反正對它來說腳本的加載和執(zhí)行是緊緊挨著的堰氓,所以不管你聲明的順序如何,只要它加載完了就會立刻執(zhí)行
仔細想想苹享,async 對于應用腳本的用處不大双絮,因為它完全不考慮依賴(哪怕是最低級的順序執(zhí)行),不過它對于那些可以不依賴任何腳本或不被任何腳本依賴的腳本來說卻是非常合適的得问。
defer和async的主要不同就是defer會保證腳本的順序囤攀,defer 是最接近我們對于應用腳本加載和執(zhí)行的要求的。