前端：JS延長加載的方式有哪些？

么是JS延遲加載？

JS延遲加載，也就是等頁面加載完成之后再加載JavaScript文件

為什么讓JS實現延遲加載？

js的延遲加載有助于提高頁面的加載速度。

Js延遲加載的方式有哪些？一般有以下幾種方式：

·defer屬性

·async屬性

·動態創建DOM方式

·使用jQuery的getScript方法

·使用setTimeout延遲方法

·讓JS最后加載

1、defer屬性

HTML 4.01為<script>標簽定義了defer屬性。標簽定義了defer屬性元素中設置defer屬性，等于告訴瀏覽器立即下載，但延遲執行標簽定義了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屬性類似，都用于改變處理腳本的行為。同樣，只適用于外部腳本文件。標簽定義了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延遲方法的加載時間延遲加載js代碼，給網頁加載留出更多時間

<script type="text/javascript" >
	function A(){
		$.post("/1ord/1ogin" ,{name:username,pwd:password},function(){
			alert("Hello");
		});
	}
	$(function (){
		setTimeout('A()', 1000);	//延遲1秒
	})
</script>

6、讓JS最后加載

把js外部引入的文件放到頁面底部，來讓js最后引入，從而加快頁面加載速度例如引入外部js腳本文件時，如果放入html的head中,則頁面加載前該js腳本就會被加載入頁面，而放入body中，則會按照頁面從上倒下的加載順序來運行JavaScript的代碼。所以我們可以把js外部引入的文件放到頁面底部，來讓js最后引入，從而加快頁面加載速度。

上述方法2也會偶爾讓你收到Google頁面速度測試工具的“延遲加載javascript”警告。所以這里的解決方案將是來自Google幫助頁面的推薦方案。

//這些代碼應被放置在</body>標簽前(接近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>

這段代碼意思等到整個文檔加載完后，再加載外部文件“defer.js”。

使用此段代碼的步驟：

6.1）復制上面代碼

6.2）粘貼代碼到HTML的標簽前 (靠近HTML文件底部)

6.3）修改“defer.js”為你的外部JS文件名

6.4）確保文件路徑是正確的。例如：如果你僅輸入“defer.js”，那么“defer.js”文件一定與HTML文件在同一文件夾下。

注意：

這段代碼直到文檔加載完才會加載指定的外部js文件。因此，不應該把那些頁面正常加載需要依賴的javascript代碼放在這里。而應該將JavaScript代碼分成兩組。一組是因頁面需要而立即加載的javascript代碼，另外一組是在頁面加載后進行操作的javascript代碼(例如添加click事件。

avaScript 程序不能獨立運行，它需要被嵌入 HTML 中，然后瀏覽器才能執行 JavaScript 代碼。通過 <script> 標簽將 JavaScript 代碼引入到 HTML 中，有兩種方式：
1.內部方式
內部方式是通過<script>標簽包裹JavaScript代碼,從而引入HTML頁面中，示例代碼如下：

<!DOCTYPE html>
 <html>
 <head>
   <meta charset="UTF-8">
   <title>JavaScript 基礎 - 引入方式</title>
 </head>
 <body>
   <!-- 內聯形式：通過 script 標簽包裹 JavaScript 代碼 -->
   <script>
     alert('嗨，歡迎來傳智播學習前端技術！')
   </script>
 </body>
 </html>

2.外部形式

一般將 JavaScript 代碼寫在獨立的以 .js 結尾的文件中，然后通過 <script>標簽的 <src>屬性引入，示例代碼如下：

// demo.js
document.write('嗨，歡迎來傳智播學習前端技術！')

<!DOCTYPE html>
 <html>
 <head>
   <meta charset="UTF-8">
   <title>JavaScript 基礎 - 引入方式</title>
 </head>
 <body>
   <!-- 外部形式：通過 script 的 src 屬性引入獨立的 .js 文件 -->
   <script src="demo.js"></script>
 </body>
 </html>

注意：如果 script 標簽使用 src 屬性引入了某 .js 文件，那么標簽的代碼會被忽略！！！如下代碼所示：

者：前端進階者來源：前端進階學習交流

一、前言

我們經常在網頁上，游戲界面加載時會看到加載進度條的效果，我們往往會以為這些加載進度條的效果，很難實現。

今天教大家JS+CSS結合做簡單一個加載進度條的效果。

二、項目準備

軟件：HBuilderX。

三、項目實現

1. body 創建2個div，外部div添加id"progress"屬性，添加 id屬性。

<div id="progress"> 
<div id="progress-bar"></div> 
</div>

2.設置progress CSS樣式。

設置寬度，高度，邊框圓角，超過溢出處理，邊框顏色等等屬性。

#progress { 
width: 100%; 
height: 30px; 
position: relative; 
background-color: #ddd; 
border-radius: 10px; 
overflow: hidden; 
}

3.設置progress-bar CSS樣式。

設置寬度，高度，行高，文字顏色，背景顏色等等屬性。

#progress-bar { 
background-color: #d9534f; 
width: 10px; 
height: 30px; 
line-height: 30px; 
position: absolute; 
text-align: center; 
color: white; 
background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); 
background-size: 40px 40px; 
}

4. 設置創建兩個按鈕，添加點擊事件。

<button onclick="start()">開始進度</button> 
<button onclick="stop()">結束進度</button>

5.start()方法，添加定時器。

function start() { 
t = setInterval(progress, 60); 
}

6.判斷當進度條到100%時，停止定時器，沒有到達，再執行方法。

function progress() { 
if (i < 100) { 
i++; 
bar.style.width = i + "%"; 
bar.innerHTML = i + " %"; 
} else { 
clearInterval(t); 
} 
}

7. 設置stop()方法，移除定時器，停止執行。

function stop() { 
clearInterval(t); 
}

8. 調用方法，實現效果。

四、效果展示

1、f12運行到chrome瀏覽器。

2、點擊開始進度按鈕，加載進度。顯示進度加載情況。

3、加載到100% 停止定時器!

4、按鈕結束進度按鈕，停止定時器。直接從當前進度停止。

五、總結

本項目，事件監聽遇到的一些難點進行了分析及提供解決方案。
歡迎大家積極嘗試，有時候看到別人實現起來很簡單，但是到自己動手實現的時候，總會有各種各樣的問題，切勿眼高手低，勤動手，才可以理解的更加深刻。
HTML+CSS也可以做出網站頁面的效果，在上面顯示圖片標題的地方不能用絕對定位，于是用的relative定位，這個地方是布局的核心部分，否則無法將文字放在圖片之上。
此進度條是DIV+CSS制作實現，通過對DIV寬度按照百分比來實現百分比進度條效果，大家可以將背景美化、邊框美化實現自己需要的漂亮美化的進度條效果。
代碼很簡單，希望對你有所啟發。

在線咨詢

上一篇：前端要完！人工智能已經能實現自動編寫 HTML 和 CSS
下一篇：前端常用meta標簽的作用以及全面整理

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商