關(guān)于延遲加載JavaScript
JavaScript的延遲加載是那些在web上,能讓你想抓狂地去尋找解決方案的問題之一。
很多人說“那就用defer”或“async”,甚至有些人說“那就將你的javascript代碼放在頁面代碼底部”。
上述方法都不能解決在web頁面完全加載后,再加載外部js的問題。上述方法也會偶爾讓你收到Google頁面速度測試工具的“延遲加載javascript”警告。所以這里的解決方案將是來自Google幫助頁面的推薦方案。
如何延遲加載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>
這里做了什么?
這段代碼意思是等到整個文檔加載完后,再加載外部文件“defer.js”。
具體說明
1.復(fù)制上面代碼
2.粘貼代碼到HTML的</body>標(biāo)簽前 (靠近HTML文件底部)
3.修改“defer.js”為你的外部JS文件名
4.確保你文件路徑是正確的。例如:如果你僅輸入“defer.js”,那么“defer.js”文件一定與HTML文件在同一文件夾下。
這段代碼能用在哪里(和哪里不能用)
這段代碼直到文檔加載完才會加載指定的外部JS文件。因此,不應(yīng)該把那些頁面正常加載需要依賴的javascript代碼放在這里。而應(yīng)該將JavaScript代碼分成兩組。一組是因頁面需要而立即加載的javascript代碼,另外一組是在頁面加載后進(jìn)行操作的javascript代碼(例如添加click事件或其他東西)。這些需等到頁面加載后再執(zhí)行的JavaScript代碼,應(yīng)放在一個外部文件,然后再引進(jìn)來。
例如,在這頁面我使用上述文件進(jìn)行延遲加載 - Google analytics,Viglink (我怎么賺錢),和顯示在底部的Google+徽章(我的社交媒體)。這對于我來說,沒有理由在初始頁面加載時加載這些文件,因為初始階段都沒必要加載上述無關(guān)緊要的內(nèi)容。也許在你的頁面中也有同樣性質(zhì)的文件。那你難道想讓用戶在看到網(wǎng)頁內(nèi)容之前,還要等待這些文件加載嗎?
為什么不使用其它方法呢?
直接插入代碼、將腳本放置在底部和使用“defer”或“async”,這幾種方法都不能達(dá)到先加載頁面后加載JS的目的,而且它們肯定不能在各個瀏覽器上表現(xiàn)一致。
它為什么重要?
它的重要性是由于Google將頁面速度作為排名因素之一而且用戶也希望能快速加載頁面。另外對于移動搜索引擎優(yōu)化也是非常重要的。Google根據(jù)頁面最初加載時間來衡量頁面速度。這意味著你必須盡可能快地得到頁面的load事件。頁面最初加載時間是Google用來評價你的web頁面質(zhì)量(而且別忘記用戶在等待頁面的加載)。Google積極推進(jìn)和推薦將上述的無關(guān)緊要的內(nèi)容按重要性排列,讓所有資源(js,css,images等)脫離關(guān)鍵的渲染路徑,而且這樣做是值得去努力的。如果這樣能取悅用戶,且讓Google開心,你很應(yīng)該這樣做。
用法示例
我已創(chuàng)建一個頁面,在這個頁面你可看到這段代碼的使用。
讓你測試的示例文件
好的,為了說明,我已制作幾個示例頁面讓你進(jìn)行測試。每個頁面都做同一樣的事情。這是一個普通的HTML頁面,含有一個等待2秒然后輸出“hello world”的javascript腳本。你可以測試這些文件,然后你會看到只有一種方法,它的加載時間是不包括2秒的等待時間。
直接插入腳本的頁面 – 點擊這里
帶有使用“defer”外部腳本的頁面 – 點擊這里
使用上述推薦代碼的頁面 – 點擊這里
關(guān)鍵點
壓倒一切的首要任務(wù)應(yīng)該是盡可能快地交付內(nèi)容給用戶。而我們一直沒想著如何對待我們的javascript代碼。但用戶不應(yīng)該為一些無關(guān)緊要的腳本,而被迫地為內(nèi)容而作出等待。無論你的頁腳多酷,都沒理由讓一個可能從不滾動到頁腳的用戶,去加載那些讓頁腳變酷的javascript文件。
以上所述就是本文的全部內(nèi)容了,希望大家能夠喜歡。
相關(guān)文章
JS響應(yīng)鼠標(biāo)點擊實現(xiàn)兩個滑塊區(qū)間拖動效果
這篇文章主要介紹了JS實現(xiàn)的兩個滑塊區(qū)間拖動效果代碼,涉及JavaScript響應(yīng)鼠標(biāo)事件針對頁面元素的動態(tài)操作技巧,需要的朋友可以參考下2015-10-10微信小程序使用GoEasy實現(xiàn)websocket實時通訊
這篇文章主要介紹了微信小程序使用GoEasy實現(xiàn)websocket實時通訊的方法,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-05-05JS實現(xiàn)屏蔽shift,Ctrl,alt等功能鍵的方法
這篇文章主要介紹了JS實現(xiàn)屏蔽shift,Ctrl,alt等功能鍵的方法,涉及javascript針對鍵盤按鍵的獲取與操作技巧,需要的朋友可以參考下2015-06-06JavaScript操作DOM元素的childNodes和children區(qū)別
這篇文章主要介紹了JavaScript操作DOM元素的childNodes和children區(qū)別,本文直接給出測試代碼和運行效果來講解它們之間的區(qū)別,需要的朋友可以參考下2015-04-04js模式化窗口問題![window.dialogArguments]
這篇文章主要介紹了js模式化窗口問題![window.dialogArguments],需要的朋友可以參考下2016-10-10