JS延遲加載,也就是等頁面加載完成之後再加載 JavaScript 文件。
JS延遲加載有助於提高頁面加載速度。
一般有以下幾種方式:
1. defer 屬性
HTML 4.01 爲 <script>
標籤定義了 defer
屬性。
用途:表明腳本在執行時不會影響頁面的構造。也就是說,腳本會被延遲到整個頁面都解析完畢之後再執行。
在<script>
元素中設置 defer
屬性,等於告訴瀏覽器立即下載,但延遲執行。
<!DOCTYPE html>
<html>
<head>
<script src="test1.js" defer="defer"></script>
<script src="test2.js" defer="defer"></script>
</head>
<body>
<!-- 這裏放內容 -->
</body>
</html>
說明:雖然<script>
元素放在了<head>
元素中,但包含的腳本將延遲瀏覽器遇到</html>
標籤後再執行。
HTML5
規範要求腳本按照它們出現的先後順序執行。在現實當中,延遲腳本並不一定會按照順序執行。
defer
屬性只適用於外部腳本文件。支持 HTML5 的實現會忽略嵌入腳本設置的 defer
屬性。
2. async 屬性
HTML5 爲 <script>
標籤定義了 async
屬性。與defer
屬性類似,都用於改變處理腳本的行爲。同樣,只適用於外部腳本文件。
目的:不讓頁面等待腳本下載和執行,從而異步加載頁面其他內容。
異步腳本一定會在頁面 load 事件前執行。
不能保證腳本會按順序執行。
<!DOCTYPE html>
<html>
<head>
<script src="test1.js" async></script>
<script src="test2.js" async></script>
</head>
<body>
<!-- 這裏放內容 -->
</body>
</html>
async和defer一樣,都不會阻塞其他資源下載,所以不會影響頁面的加載。
缺點:不能控制加載的順序
3.動態創建DOM方式
//這些代碼應被放置在</body>標籤前(接近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(){//回調函數,成功獲取文件後執行的函數
console.log("腳本加載完成")
});
5.使用setTimeout
延遲方法
6.讓JS最後加載
把js外部引入的文件放到頁面底部,來讓js最後引入,從而加快頁面加載速度