如何進行腳本載入優化

如果我們只是單純在 head 或 body 中引用腳本，由於是否會更改DOM是未知的， 所以腳本在下載執行的過程中會完全阻塞頁面的渲染。

若腳本在 head 或 body 中間，有很大可能會出現空白頁面，也無法進行使用者交互，使用者體驗很差。

即便是可以並行下載 javascript 文件，但這個下載過程中會影響圖片等資源的下載。

所以我們首先需要做的是：

把script 標籤放在body 裡最底部；

因為進行HTTP 請求時有額外的效能開銷，如三次握手，所以還要盡量減少  HTTP 請求：

把javascript 檔案合併成一個；

##在一個要求裡載入多個javascript 檔案

但是以上並沒有解決我們的問題，一個大的javascript 檔案會下載執行腳長時間，在這段時間裡，瀏覽器無法做其他事情。這就需要無阻塞腳本，也就是在頁面載入完成後才載入 javascript 程式碼，也就是在 window物件 的 load 事件觸發之後再下載腳本。

1 延遲腳本

defer：首先我們要確定該腳本不會改變DOM，因為加上就是告訴瀏覽器這個腳本不會改變DOM，可以在頁面載入完成後再執行。 給 script 標籤加上這個屬性後，這個檔案就可以跟著其他資源並行下載了。

IE 從IE10 開始不支援defer

async：與defer 差異在於下載完成後就執行，但defer 要等到頁面載入完成後才執行

#2 動態腳本

也就是動態創建一個script 標籤，在適當的時機插入到頁面中，我們可以這個方法來根據需要載入文件，也能指定腳本載入順序。

3 XMLHttpRequest腳本注入

就是透過XHR 取得腳本  然後在回呼函數中建立script 標籤並插入到頁面中

推薦方法

先加入動態載入所需的腳本，盡可能精簡，其中加入一個載入腳本的函數

在script 標籤中呼叫函數載入其他腳本

當然，也有一些懶加載庫能使用。

以上是如何進行腳本載入優化的詳細內容。更多資訊請關注PHP中文網其他相關文章！