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