快捷導(dǎo)航

關(guān)于延遲加載JavaScript

更新時(shí)間：2015年05月05日 10:28:01 投稿：hebedich

當(dāng)一個(gè)網(wǎng)站有很多js代碼要加載，js代碼放置的位置在一定程度上將會(huì)影像網(wǎng)頁(yè)的加載速度，為了讓我們的網(wǎng)頁(yè)加載速度更快，本文總結(jié)了一下幾個(gè)注意點(diǎn)，分享給大家

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

很多人說(shuō)“那就用defer”或“async”，甚至有些人說(shuō)“那就將你的javascript代碼放在頁(yè)面代碼底部”。

上述方法都不能解決在web頁(yè)面完全加載后，再加載外部js的問(wèn)題。上述方法也會(huì)偶爾讓你收到Google頁(yè)面速度測(cè)試工具的“延遲加載javascript”警告。所以這里的解決方案將是來(lái)自Google幫助頁(yè)面的推薦方案。

如何延遲加載JavaScript

下面是Google推薦的代碼。這些代碼應(yīng)被放置在</body>標(biāo)簽前(接近HTML文件底部)。另外，我將外部JS文件名突出顯示。

<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "defer.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>

這里做了什么？
這段代碼意思是等到整個(gè)文檔加載完后，再加載外部文件“defer.js”。

具體說(shuō)明

1.復(fù)制上面代碼

2.粘貼代碼到HTML的</body>標(biāo)簽前 (靠近HTML文件底部)

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

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

這段代碼能用在哪里(和哪里不能用)

這段代碼直到文檔加載完才會(huì)加載指定的外部JS文件。因此，不應(yīng)該把那些頁(yè)面正常加載需要依賴(lài)的javascript代碼放在這里。而應(yīng)該將JavaScript代碼分成兩組。一組是因頁(yè)面需要而立即加載的javascript代碼，另外一組是在頁(yè)面加載后進(jìn)行操作的javascript代碼(例如添加click事件或其他東西)。這些需等到頁(yè)面加載后再執(zhí)行的JavaScript代碼，應(yīng)放在一個(gè)外部文件，然后再引進(jìn)來(lái)。

例如，在這頁(yè)面我使用上述文件進(jìn)行延遲加載 - Google analytics，Viglink (我怎么賺錢(qián))，和顯示在底部的Google+徽章(我的社交媒體)。這對(duì)于我來(lái)說(shuō)，沒(méi)有理由在初始頁(yè)面加載時(shí)加載這些文件，因?yàn)槌跏茧A段都沒(méi)必要加載上述無(wú)關(guān)緊要的內(nèi)容。也許在你的頁(yè)面中也有同樣性質(zhì)的文件。那你難道想讓用戶(hù)在看到網(wǎng)頁(yè)內(nèi)容之前，還要等待這些文件加載嗎？

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

直接插入代碼、將腳本放置在底部和使用“defer”或“async”，這幾種方法都不能達(dá)到先加載頁(yè)面后加載JS的目的，而且它們肯定不能在各個(gè)瀏覽器上表現(xiàn)一致。

它為什么重要？

它的重要性是由于Google將頁(yè)面速度作為排名因素之一而且用戶(hù)也希望能快速加載頁(yè)面。另外對(duì)于移動(dòng)搜索引擎優(yōu)化也是非常重要的。Google根據(jù)頁(yè)面最初加載時(shí)間來(lái)衡量頁(yè)面速度。這意味著你必須盡可能快地得到頁(yè)面的load事件。頁(yè)面最初加載時(shí)間是Google用來(lái)評(píng)價(jià)你的web頁(yè)面質(zhì)量(而且別忘記用戶(hù)在等待頁(yè)面的加載)。Google積極推進(jìn)和推薦將上述的無(wú)關(guān)緊要的內(nèi)容按重要性排列，讓所有資源(js,css,images等)脫離關(guān)鍵的渲染路徑，而且這樣做是值得去努力的。如果這樣能取悅用戶(hù)，且讓Google開(kāi)心，你很應(yīng)該這樣做。

用法示例

我已創(chuàng)建一個(gè)頁(yè)面，在這個(gè)頁(yè)面你可看到這段代碼的使用。

讓你測(cè)試的示例文件

好的，為了說(shuō)明，我已制作幾個(gè)示例頁(yè)面讓你進(jìn)行測(cè)試。每個(gè)頁(yè)面都做同一樣的事情。這是一個(gè)普通的HTML頁(yè)面，含有一個(gè)等待2秒然后輸出“hello world”的javascript腳本。你可以測(cè)試這些文件，然后你會(huì)看到只有一種方法，它的加載時(shí)間是不包括2秒的等待時(shí)間。

直接插入腳本的頁(yè)面 – 點(diǎn)擊這里

帶有使用“defer”外部腳本的頁(yè)面 – 點(diǎn)擊這里
使用上述推薦代碼的頁(yè)面 – 點(diǎn)擊這里

關(guān)鍵點(diǎn)

壓倒一切的首要任務(wù)應(yīng)該是盡可能快地交付內(nèi)容給用戶(hù)。而我們一直沒(méi)想著如何對(duì)待我們的javascript代碼。但用戶(hù)不應(yīng)該為一些無(wú)關(guān)緊要的腳本，而被迫地為內(nèi)容而作出等待。無(wú)論你的頁(yè)腳多酷，都沒(méi)理由讓一個(gè)可能從不滾動(dòng)到頁(yè)腳的用戶(hù)，去加載那些讓頁(yè)腳變酷的javascript文件。

以上所述就是本文的全部?jī)?nèi)容了，希望大家能夠喜歡。

您可能感興趣的文章: