JS延遲加載的幾種方式小結(jié)
一般有以下幾種方式：
1. defer 屬性
HTML 4.01 為 <script>標(biāo)簽定義了 defer屬性。
用途：表明腳本在執(zhí)行時不會影響頁面的構(gòu)造。也就是說，腳本會被延遲到整個頁面都解析完畢之后再執(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屬性。
2. async 屬性
HTML5 為 <script>標(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)：不能控制加載的順序
3.動態(tài)創(chuàng)建DOM方式
//這些代碼應(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> 4.使用jQuery的getScript()方法
$.getScript("outer.js",function(){//回調(diào)函數(shù)，成功獲取文件后執(zhí)行的函數(shù)
console.log("腳本加載完成")
});5.使用setTimeout延遲方法
setTimeout(function() {
// 執(zhí)行延遲加載的代碼或加載資源
}, 2000); // 在 2000 毫秒（2 秒）后執(zhí)行6.讓JS最后加載
把js外部引入的文件放到頁面底部，來讓js最后引入，從而加快頁面加載速度
到此這篇關(guān)于JS延遲加載的幾種方式小結(jié)的文章就介紹到這了,更多相關(guān)JS延遲加載內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
ArrayBuffer Uint8Array Blob與文本字符相互轉(zhuǎn)換示例
這篇文章主要為大家介紹了ArrayBuffer Uint8Array Blob與文本字符相互轉(zhuǎn)換示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
本文主要介紹了原生JS實(shí)現(xiàn)詔書卷軸展開效果的實(shí)例，具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03
這篇文章主要介紹了這樣回答繼承可能面試官更滿意,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-12-12
Javascript 對象（object）合并操作實(shí)例分析
這篇文章主要介紹了Javascript 對象（object）合并操作,結(jié)合實(shí)例形式分析了javascript基于jQuery的extend方法、對象屬性、遍歷賦值等操作實(shí)現(xiàn)對象合并相關(guān)操作技巧與使用注意事項(xiàng),需要的朋友可以參考下2019-07-07
這篇文章主要介紹了簡單的JS輪播圖實(shí)現(xiàn)方法，代碼簡單易懂，非常不錯，具有參考借鑒價值,需要的朋友可以參考下2016-07-07
在前端項(xiàng)目中,常用的?JavaScript?處理數(shù)據(jù)的方法有很多,本文為大家整理了一些常用的方法,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-11-11
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)自定義導(dǎo)航欄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
JS實(shí)現(xiàn)1000以內(nèi)被3或5整除的數(shù)字之和
今天在技術(shù)群里看到一道這樣的提：求1000以內(nèi)被3或5整除的數(shù)字之和。小編把我的解決辦法分享到腳本之家平臺，供大家參考2016-02-02
js中settimeout方法加參數(shù)的使用實(shí)例
這篇文章主要介紹了js中settimeout方法加參數(shù)的使用,需要的朋友可以參考下2014-02-02
JavaScript實(shí)現(xiàn)添加及刪除事件的方法小結(jié)
這篇文章主要介紹了JavaScript實(shí)現(xiàn)添加及刪除事件的方法,實(shí)例總結(jié)了javascript對事件的添加及刪除的技巧,涉及javascript事件綁定的方法及瀏覽器兼容的相關(guān)注意事項(xiàng),需要的朋友可以參考下2015-08-08