延遲載入JavaScript

JavaScript的延遲載入是那些在web上，能讓你想抓狂地去尋找解決方案的問題之一。

很多人說“那就用defer”或“async”，甚至有些人說“那就將你的javascript程式碼放在頁面程式碼底部”。

上述方法都不能解決在web頁面完全載入後，再載入外部js的問題。上述方法也會偶爾讓你收到Google頁面速度測試工具的“延遲載入javascript”警告。所以這裡的解決方案將是來自Google幫助頁面的推薦方案。

如何延遲載入JavaScript

下面是Google推薦的程式碼。這些程式碼應被放置在</body>標籤前(接近HTML檔案底部)。另外，我將外部JS檔名突出顯示。

這裡做了什麼？

這段程式碼意思是等到整個文件載入完後，再載入外部檔案“defer.js”。

具體說明

1.複製上面程式碼

2.貼上程式碼到HTML的</body>標籤前 (靠近HTML檔案底部)

3.修改“defer.js”為你的外部JS檔名

4.確保你檔案路徑是正確的。例如：如果你僅輸入“defer.js”，那麼“defer.js”檔案一定與HTML檔案在同一資料夾下。

這段程式碼能用在哪裡(和哪裡不能用)

這段程式碼直到文件載入完才會載入指定的外部JS檔案。因此，不應該把那些頁面正常載入需要依賴的javascript程式碼放在這裡。而應該將JavaScript程式碼分成兩組。一組是因頁面需要而立即載入的javascript程式碼，另外一組是在頁面載入後進行操作的javascript程式碼(例如新增click事件或其他東西)。這些需等到頁面載入後再執行的JavaScript程式碼，應放在一個外部檔案，然後再引進來。

例如，在這頁面我使用上述檔案進行延遲載入 – Google analytics，Viglink (我怎麼賺錢)，和顯示在底部的Google+徽章(我的社交媒體)。這對於我來說，沒有理由在初始頁面載入時載入這些檔案，因為初始階段都沒必要載入上述無關緊要的內容。也許在你的頁面中也有同樣性質的檔案。那你難道想讓使用者在看到網頁內容之前，還要等待這些檔案載入嗎？

為什麼不使用其它方法呢？

直接插入程式碼、將指令碼放置在底部和使用“defer”或“async”，這幾種方法都不能達到先載入頁面後載入JS的目的，而且它們肯定不能在各個瀏覽器上表現一致。

它為什麼重要？

它的重要性是由於Google將頁面速度作為排名因素之一而且使用者也希望能快速載入頁面。另外對於移動搜尋引擎優化也是非常重要的。Google根據頁面最初載入時間來衡量頁面速度。這意味著你必須儘可能快地得到頁面的load事件。頁面最初載入時間是Google用來評價你的web頁面質量(而且別忘記使用者在等待頁面的載入)。Google積極推進和推薦將上述的無關緊要的內容按重要性排列，讓所有資源(js,css,images等)脫離關鍵的渲染路徑，而且這樣做是值得去努力的。如果這樣能取悅使用者，且讓Google開心，你很應該這樣做。

用法示例

我已建立一個頁面，在這個頁面你可看到這段程式碼的使用。

讓你測試的示例檔案

好的，為了說明，我已製作幾個示例頁面讓你進行測試。每個頁面都做同一樣的事情。這是一個普通的HTML頁面，含有一個等待2秒然後輸出“hello world”的javascript指令碼。你可以測試這些檔案，然後你會看到只有一種方法，它的載入時間是不包括2秒的等待時間。

• 直接插入指令碼的頁面 – 點選這裡
• 帶有使用“defer”外部指令碼的頁面 – 點選這裡
• 使用上述推薦程式碼的頁面 – 點選這裡

關鍵點

壓倒一切的首要任務應該是儘可能快地交付內容給使用者。而我們一直沒想著如何對待我們的javascript程式碼。但使用者不應該為一些無關緊要的指令碼，而被迫地為內容而作出等待。無論你的頁尾多酷，都沒理由讓一個可能從不滾動到頁尾的使用者，去載入那些讓頁尾變酷的javascript檔案。

打賞支援我翻譯更多好文章，謝謝！

打賞譯者