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