當(dāng)頁(yè)面加載完成之后，在網(wǎng)站上 dom 可用之前，有可能需要執(zhí)行一些 JavaScript。該操作可以幫助我們將一些代碼延遲到網(wǎng)站加載完成后再執(zhí)行。這篇文章將會(huì)從幾個(gè)方面對(duì)頁(yè)面加載完成后執(zhí)行JS進(jìn)行詳細(xì)的闡述。

一、 window.onload 方法

使用 window.onload 方法可以在頁(yè)面加載完成后執(zhí)行 JavaScript。該方法是最簡(jiǎn)單的處理方式，但在某些情況下，它可能不太適用。

一個(gè)重要的注意點(diǎn)是：當(dāng)使用 window.onload 方法時(shí)，必須確保所有內(nèi)容（包括圖片和其他資源）都已完全下載并可用于操作。否則，該方法不會(huì)被觸發(fā)，并且您的代碼將無(wú)法按預(yù)期工作。

二、 document.ready 方法

在 jQuery 中，可以使用 document.ready 方法。這個(gè)方法的執(zhí)行時(shí)機(jī)是在 DOM 加載完成，但在其他資源加載完成之前。使用 document.ready 方法不會(huì)等待像圖片這樣的資源下載完畢。

在 jQuery 中使用 document.ready 方法的優(yōu)點(diǎn)是它能夠確保在內(nèi)容下載之前，執(zhí)行 JavaScript 的代碼可用。因此，可以在下載完成之前進(jìn)行一些信息搜集或其他一些操作。

三、 defer 屬性

defer 屬性是 HTML5 中的一項(xiàng)新功能，它可以告訴瀏覽器不要等待文件完全加載，而是在 DOMContentLoaded 事件觸發(fā)之前執(zhí)行 JavaScript。也就是說(shuō)，該屬性僅在指定的腳本被加載時(shí)才會(huì)產(chǎn)生影響。

使用 defer 屬性的好處在于它將腳本完全分離了，因此不會(huì)影響頁(yè)面的下載速度。而且，這個(gè)屬性的運(yùn)行不會(huì)被阻塞，因此它能夠輕松地在 DOMContentLoaded 事件觸發(fā)之前加載代碼。

需要注意的是，當(dāng)使用 defer 屬性時(shí)，代碼的執(zhí)行順序與它們?cè)谀_本文件中的出現(xiàn)順序相同。

四、 async 屬性

async 屬性是 HTML5 中的另一項(xiàng)新功能，它允許瀏覽器異步加載腳本。當(dāng) async 屬性被設(shè)置為 true 時(shí)，瀏覽器將會(huì)在下載過(guò)程中并行地加載腳本，這意味著它們可能會(huì)在頁(yè)面的其他部分還沒(méi)有下載完畢的情況下開(kāi)始運(yùn)行。

由于 async 方式是并行地下載腳本，因此通常不適用于那些需要嚴(yán)格控制腳本的執(zhí)行順序的地方。如果您有其他腳本或庫(kù)依賴于主要腳本，則應(yīng)該使用 defer 屬性。

五、 MutationObserver

MutationObserver 用于監(jiān)聽(tīng)文檔中 DOM 元素的變化，并能在特定情況下觸發(fā)回調(diào)函數(shù)。這個(gè) API 可以幫助我們監(jiān)視文檔流中的標(biāo)記，例如添加、刪除或修改元素。

當(dāng)您需要在頁(yè)面的特定位置動(dòng)態(tài)加載代碼時(shí)，可以使用 MutationObserver 方法。這個(gè)方法可以讓您在特定節(jié)點(diǎn)初始化之前等待，并且只有當(dāng)他們存在時(shí)才執(zhí)行代碼。

六、 Conclusion

以上是一些常用的方法來(lái)在網(wǎng)頁(yè)加載完成后執(zhí)行 JavaScript，需要根據(jù)具體情況進(jìn)行選取。總的來(lái)說(shuō)，我們需要隨時(shí)注意代碼的執(zhí)行順序和一些細(xì)節(jié)問(wèn)題。