快捷導(dǎo)航

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

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

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

1.defer屬性

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

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

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

補充：

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

2.async屬性

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

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

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

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

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

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

下面是一個示例代碼：

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

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

4.使用setTime延遲方法

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

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

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

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