async和defer這兩個(gè)的作用與異同之處克滴。
引用語(yǔ)句中添加
async的狀態(tài)<script async src="script.js"></script>泊窘，添加完成后熄驼，加載和渲染后續(xù)文檔元素的過(guò)程將和script.js的加載與執(zhí)行并行進(jìn)行（異步）像寒。-
引用語(yǔ)句中添加
defer的狀態(tài)<script defer src="script.js"></script>，添加完成后谜洽，載入續(xù)文檔元素的過(guò)程將和script.js的加載并行進(jìn)行（異步）萝映，但是script.js的執(zhí)行要在所有元素解析完成之后，DOMContentLoaded事件觸發(fā)之前完成阐虚。在正常情況下在瀏覽器讀取html代碼的時(shí)候如果遇到外部的script序臂，那么接下來(lái)就會(huì)暫停解析過(guò)程去讀那個(gè)script，等吧script都讀完了以后才能接著去讀html代碼实束，如果一個(gè)頁(yè)面中有很多個(gè)引入js放置在頁(yè)面的
<head>標(biāo)簽中那么奥秆，就會(huì)嚴(yán)重影響頁(yè)面的正常渲染，在簡(jiǎn)單的小頁(yè)面中我們可以通過(guò)更改引入js代碼的位置來(lái)解決這個(gè)問(wèn)題咸灿，但是在相對(duì)復(fù)雜的環(huán)境中构订，或者代碼量比較大的頁(yè)面中時(shí)，通過(guò)不斷更改引入代碼位置是很麻煩的避矢，這個(gè)時(shí)候,defer就可以大展身手啦悼瘾！添加defer之后就實(shí)現(xiàn)了把引入代碼放到頁(yè)面底部的效果。async是html5中新增的屬性审胸，它的作用是能夠異步的加載和執(zhí)行腳本亥宿，不因?yàn)榧虞d腳本而阻塞頁(yè)面的加載，一旦加載到就會(huì)立刻執(zhí)行砂沛。 -
相同點(diǎn)
- 加載js文件的時(shí)候都不阻塞頁(yè)面的正常渲染
- 對(duì)于inline的script無(wú)效
- 使用這兩個(gè)屬性的腳本中不能調(diào)用document.write方法
- 有腳本的onload的事件回調(diào)
-
不同點(diǎn)
- html的版本html4.0中定義了defer烫扼；html5.0中定義了async
- async屬性的腳本會(huì)在下載結(jié)束后立刻執(zhí)行，同時(shí)會(huì)在window的load事件之前執(zhí)行碍庵，所以就會(huì)出現(xiàn)順序被打亂的情況映企；defer屬性的腳本是在頁(yè)面解析完成后，按照順序執(zhí)行静浴，同時(shí)會(huì)在document的DOMContentLoaded之前執(zhí)行堰氓。
注意：無(wú)論使用defer還是async屬性，都需要首先將頁(yè)面中的js文件進(jìn)行整理苹享，哪些文件之間有依賴性双絮，哪些文件可以延遲加載等等，做好js代碼的合并和拆分富稻，然后再根據(jù)頁(yè)面需要使用這兩個(gè)屬性。
