JS延遲加載,也就是等頁面加載完成之後再加載 JavaScript 文件,有助於提高頁面的加載速度。
1.defer 屬性:
等於告訴瀏覽器立即下載,但延遲執行(腳本會被延遲到整個頁面都解析完畢之後再執行。),即使<script>元素放在了<head>元素中,但包含的腳本將延遲瀏覽器遇到</html>標籤後再執行,所有的defer腳本保證是按順序依次執行的。
<head>
<script src="test1.js" defer="defer"></script>
<script src="test2.js" defer="defer"></script>
</head>
2.async 屬性
不讓頁面等待腳本下載和執行,從而異步加載頁面其他內容,缺點是不能保證腳本會按照順序執行
<head>
<script src="test1.js" async></script>
<script src="test2.js" async></script>
</head>
3.動態創建DOM的方式
<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() 方法通過 HTTP GET 請求載入並執行 JavaScript 文件。
$.getScript("outer.js",function(){//回調函數,成功獲取文件後執行的函數
console.log("腳本加載完成")
});
5.使用setTimeout延遲方法
<script type="text/javascript">
function A(){
$.post("/lord/login",{name:username,pwd:password},function(){
alert("Hello World!");
})
}
$(function (){
setTimeout("A()",1000); //延遲1秒
})
</script>
6.讓js最後加載
引入外部js腳本文件時,如果放入html的head中,則頁面加載前該js腳本就會被加載入頁面,而放入body中,則會按照頁面從上倒下的加載順序來運行javascript的代碼,所以我們可以把js外部引入的文件放到頁面底部,來讓js最後引入,從而加快頁面加載速度。