一、html中的async、defer、ready、onload的區(qū)別
在HTML中,async
、defer
、ready
和 onload
都是用于控制JavaScript腳本加載和執(zhí)行時(shí)機(jī)的屬性或事件。
1、async 屬性
async
是一個(gè)可選屬性,可應(yīng)用于標(biāo)簽。當(dāng)使用
async
屬性時(shí),瀏覽器會(huì)異步加載和執(zhí)行腳本,這意味著腳本的加載和執(zhí)行不會(huì)阻塞HTML解析。當(dāng)腳本加載完成后,瀏覽器會(huì)立即執(zhí)行它,而不管它在HTML文檔中的位置。需要注意的是,由于 async
腳本是立即執(zhí)行的,因此無法保證它們的執(zhí)行順序。
2、defer 屬性
defer
同樣是一個(gè)可選屬性,適用于標(biāo)簽。使用
defer
屬性時(shí),瀏覽器會(huì)延遲執(zhí)行腳本,直到HTML文檔解析完成。defer
腳本會(huì)按照在HTML文檔中出現(xiàn)的順序執(zhí)行。因此,如果有多個(gè)依賴關(guān)系的腳本,可以使用 defer
屬性來確保它們按照預(yù)期順序執(zhí)行。
3、ready 事件
ready
事件通常與jQuery庫(kù)一起使用,用于檢測(cè)DOM(文檔對(duì)象模型)的加載狀態(tài)。當(dāng)DOM結(jié)構(gòu)加載完成時(shí)(即使相關(guān)資源如圖片尚未加載),ready
事件會(huì)觸發(fā)。這使得開發(fā)人員能夠在DOM元素可用時(shí)立即執(zhí)行一些操作,而無需等待整個(gè)頁(yè)面加載完成。
4、onload 事件
onload
事件用于檢測(cè)整個(gè)頁(yè)面(包括所有資源如圖片、樣式表等)的加載狀態(tài)。當(dāng)頁(yè)面及其所有資源加載完成時(shí),onload
事件會(huì)觸發(fā)。通常,onload
事件用于在頁(yè)面加載完成后執(zhí)行一些操作,如初始化腳本或加載額外的內(nèi)容。