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

一、 window.onload 方法

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

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

二、 document.ready 方法

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

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

三、 defer 屬性

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

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

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

四、 async 屬性

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

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

五、 MutationObserver

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

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

六、 Conclusion

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