快捷導(dǎo)航

JavaScript腳本延遲加載有哪些方式

更新時(shí)間：2024年04月15日 11:02:11 作者：不想禿頭程序員

本文主要介紹了JavaScript腳本延遲加載有哪些方式,主要介紹了五種方式,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

1.defer屬性

defer 屬性是用于延遲腳本的執(zhí)行，它可以用于 <script> 標(biāo)簽中。使用 defer 屬性加載的腳本會(huì)在 HTML 解析完畢后，DOMContentLoaded 事件觸發(fā)之前執(zhí)行，即在文檔完全解析后才會(huì)執(zhí)行腳本。

<script src="script.js" defer></script>

在上面的例子中，script.js 腳本會(huì)被延遲加載，并且會(huì)在 HTML 解析完成后立即開(kāi)始下載，但直到文檔解析完成后才會(huì)執(zhí)行，即在 DOMContentLoaded 事件之前執(zhí)行。
使用 defer 屬性的好處是，它不會(huì)阻塞文檔的解析和渲染，同時(shí)保證了腳本在合適的時(shí)機(jī)執(zhí)行。這對(duì)于需要確保腳本在 DOM 樹(shù)完全構(gòu)建之后執(zhí)行的情況非常有用，例如對(duì)于需要操作 DOM 元素的腳本。

補(bǔ)充：

在這里，"文檔"指的是指HTML文檔，即網(wǎng)頁(yè)的HTML結(jié)構(gòu)。在瀏覽器中加載網(wǎng)頁(yè)時(shí)，瀏覽器會(huì)按照HTML文檔中的結(jié)構(gòu)解析網(wǎng)頁(yè)內(nèi)容，構(gòu)建DOM（文檔對(duì)象模型）樹(shù)，然后再進(jìn)行渲染顯示給用戶。這個(gè)過(guò)程中，HTML文檔的解析和構(gòu)建DOM樹(shù)稱為"文檔解析"。所以，當(dāng)我們說(shuō)文檔解析完成時(shí)，意味著HTML文檔已經(jīng)被完全解析，DOM樹(shù)已經(jīng)構(gòu)建完成，網(wǎng)頁(yè)的基本結(jié)構(gòu)已經(jīng)建立好了，可以開(kāi)始執(zhí)行后續(xù)的JavaScript腳本了。

2.async屬性

async 屬性也是用于 <script> 標(biāo)簽的屬性之一，用于異步加載腳本。與 defer 屬性不同，使用 async 屬性加載的腳本在下載完成后會(huì)立即執(zhí)行，不會(huì)等待文檔的解析。

<script src="script.js" async></script>

在上面的例子中，script.js 腳本會(huì)被異步加載，并且在加載完成后立即執(zhí)行，不會(huì)等待文檔的解析。這意味著腳本的執(zhí)行可能會(huì)在 DOM 樹(shù)構(gòu)建完成之前開(kāi)始，因此在使用 async 屬性時(shí)要注意可能出現(xiàn)的執(zhí)行順序問(wèn)題。
使用 async 屬性的主要優(yōu)點(diǎn)是可以并行加載多個(gè)腳本，從而提高頁(yè)面加載速度。但需要注意的是，由于腳本的執(zhí)行時(shí)間不確定，可能會(huì)影響到頁(yè)面的渲染和其他操作。因此，適合使用 async 屬性的腳本通常是獨(dú)立的、不依賴于文檔解析順序的腳本。

3.動(dòng)態(tài)創(chuàng)建DOM方式

要通過(guò)動(dòng)態(tài)創(chuàng)建 DOM 的方式來(lái)實(shí)現(xiàn)對(duì) JavaScript 腳本的延遲加載，可以使用 JavaScript 動(dòng)態(tài)創(chuàng)建 <script> 元素，并設(shè)置其屬性來(lái)實(shí)現(xiàn)延遲加載效果。具體步驟如下：

創(chuàng)建一個(gè) <script> 元素。
設(shè)置該 <script> 元素的 src 屬性為要延遲加載的 JavaScript 文件的 URL。
如果需要，可以設(shè)置其他屬性，如 defer 或 async。
將該 <script> 元素插入到文檔中，通常是插入到 <head> 或 <body> 元素中。

下面是一個(gè)示例代碼：

// 創(chuàng)建一個(gè) <script> 元素
var scriptElement = document.createElement('script');
// 設(shè)置要延遲加載的 JavaScript 文件的 URL
scriptElement.src = 'script.js';
// 設(shè)置屬性以實(shí)現(xiàn)延遲加載，比如使用 defer 或 async
scriptElement.defer = true; // 或者使用 scriptElement.async = true;
// 將 <script> 元素插入到文檔中
document.head.appendChild(scriptElement); // 或者插入到 document.body

通過(guò)上述步驟，可以實(shí)現(xiàn)對(duì) JavaScript 腳本的延遲加載，腳本會(huì)在文檔解析完成后才開(kāi)始下載，并且在 DOMContentLoaded 事件觸發(fā)之前執(zhí)行，從而避免阻塞頁(yè)面的渲染和交互。

4.使用setTime延遲方法

使用 setTimeout 方法來(lái)對(duì) JavaScript 腳本進(jìn)行延遲加載是一種簡(jiǎn)單直接的方式。通過(guò) setTimeout 方法，可以在指定的時(shí)間間隔之后執(zhí)行一段 JavaScript 代碼，從而實(shí)現(xiàn)延遲加載效果。

下面是使用 setTimeout 方法來(lái)延遲加載 JavaScript 腳本的示例代碼：

// 使用 setTimeout 方法延遲加載 JavaScript 腳本
setTimeout(function() {
    // 創(chuàng)建一個(gè) <script> 元素
    var scriptElement = document.createElement('script');
    // 設(shè)置要延遲加載的 JavaScript 文件的 URL
    scriptElement.src = 'script.js';
    // 將 <script> 元素插入到文檔中
    document.head.appendChild(scriptElement); // 或者插入到 document.body
}, 2000); // 2000 毫秒即 2 秒后加載

在上述代碼中，setTimeout 方法接受兩個(gè)參數(shù)：第一個(gè)參數(shù)是一個(gè)函數(shù)，用來(lái)定義要執(zhí)行的 JavaScript 代碼；第二個(gè)參數(shù)是延遲的時(shí)間，以毫秒為單位。在示例中，設(shè)置了一個(gè)延遲時(shí)間為 2000 毫秒（即 2 秒），在這之后會(huì)執(zhí)行匿名函數(shù)內(nèi)的代碼，其中包括創(chuàng)建 <script> 元素并插入到文檔中，實(shí)現(xiàn)了對(duì) JavaScript 腳本的延遲加載。