更新時(shí)間:2021年05月21日13時(shí)51分 來源:傳智教育 瀏覽次數(shù):
什么是JS延遲加載?
JS延遲加載,也就是等頁面加載完成之后再加載JavaScript文件
為什么讓JS實(shí)現(xiàn)延遲加載?
js的延遲加載有助與提高頁面的加載速度。
Js延遲加載的方式有哪些?一般有以下幾種方式:
·defer屬性
·async屬性
·動態(tài)創(chuàng)建DOM方式
·使用jQuery的getScript方法
·使用setTimeout延遲方法
·讓JS最后加載
HTML 4.01為<script>標(biāo)簽定義了defer屬性。標(biāo)簽定義了defer屬性元素中設(shè)置defer屬性,等于告訴瀏覽器立即下載,但延遲執(zhí)行標(biāo)簽定義了defer屬性。
用途:表明腳本在執(zhí)行時(shí)不會影響頁面的構(gòu)造。也就是說,腳本會被延遲到整個(gè)頁面都解析完畢之后再執(zhí)行在<script>元素中設(shè)置defer屬性,等于告訴瀏覽器立即下載,但延遲執(zhí)行
<!DOCTYPE html> <html> <head> <script src="test1.js" defer="defer"></script> <script src="test2.js" defer="defer"></script> </head> <body> <!--這里放內(nèi)容--> </body> </html>
說明:雖然<script>元素放在了<head>元素中,但包含的腳本將延遲瀏覽器遇到</html>標(biāo)簽后再執(zhí)行HTML5規(guī)范要求腳本按照它們出現(xiàn)的先后順序執(zhí)行。在現(xiàn)實(shí)當(dāng)中,延遲腳本并不一定會按照順序執(zhí)行defer屬性只適用于外部腳本文件。支持HTML5的實(shí)現(xiàn)會忽略嵌入腳本設(shè)置的defer屬性
HTML5 為<script>標(biāo)簽定義了async屬性。與defer屬性類似,都用于改變處理腳本的行為。同樣,只適用于外部腳本文件。標(biāo)簽定義了async屬性。與defer屬性類似,都用于改變處理腳本的行為。同樣,只適用于外部腳本文件。
目的:不讓頁面等待腳本下載和執(zhí)行,從而異步加載頁面其他內(nèi)容。異步腳本一定會在頁面 load 事件前執(zhí)行。不能保證腳本會按順序執(zhí)行
<!DOCTYPE html> <html> <head> <script src="test1.js" async></script> <script src="test2.js" async></script> </head> <body> <!--這里放內(nèi)容--> </body> </html>
async和defer一樣,都不會阻塞其他資源下載,所以不會影響頁面的加載。
缺點(diǎn):不能控制加載的順序
//這些代碼應(yīng)被放置在</ body>標(biāo)簽前(接近HTML文件底部) <script type="text/javascript"> function downloadJSAtOnload() { varelement = 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>
$.getScript("outer.js" , function(){ //回調(diào)函數(shù),成功獲取文件后執(zhí)行的函數(shù) console.log(“腳本加載完成") });
<script type="text/javascript" > function A(){ $.post("/1ord/1ogin" ,{name:username,pwd:password},function(){ alert("Hello"); }); } $(function (){ setTimeout('A()', 1000); //延遲1秒 }) </script>
把js外部引入的文件放到頁面底部,來讓js最后引入,從而加快頁面加載速度例如引入外部js腳本文件時(shí),如果放入html的head中,則頁面加載前該js腳本就會被加載入頁面,而放入body中,則會按照頁面從上倒下的加載順序來運(yùn)行JavaScript的代碼。所以我們可以把js外部引入的文件放到頁面底部,來讓js最后引入,從而加快頁面加載速度。
上述方法2也會偶爾讓你收到Google頁面速度測試工具的“延遲加載javascript”警告。所以這里的解決方案將是來自Google幫助頁面的推薦方案。
//這些代碼應(yīng)被放置在</body>標(biāo)簽前(接近HTML文件底部) <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”。
使用此段代碼的步驟:
6.1)復(fù)制上面代碼
6.2)粘貼代碼到HTML的標(biāo)簽前 (靠近HTML文件底部)
6.3)修改“defer.js”為你的外部JS文件名
6.4)確保你文件路徑是正確的。例如:如果你僅輸入“defer.js”,那么“defer.js”文件一定與HTML文件在同一文件夾下。
注意:
這段代碼直到文檔加載完才會加載指定的外部js文件。因此,不應(yīng)該把那些頁面正常加載需要依賴的javascript代碼放在這里。而應(yīng)該將JavaScript代碼分成兩組。一組是因頁面需要而立即加載的javascript代碼,另外一組是在頁面加載后進(jìn)行操作的javascript代碼(例如添加click事件。
猜你喜歡:
北京校區(qū)