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

么是JS延遲加載？

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

為什么讓JS實(shí)現(xiàn)延遲加載？

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

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

·defer屬性

·async屬性

·動(dòng)態(tài)創(chuàng)建DOM方式

·使用jQuery的getScript方法

·使用setTimeout延遲方法

·讓JS最后加載

1、defer屬性

HTML 4.01為<script>標(biāo)簽定義了defer屬性。標(biāo)簽定義了defer屬性元素中設(shè)置defer屬性，等于告訴瀏覽器立即下載，但延遲執(zhí)行標(biāo)簽定義了defer屬性。

用途：表明腳本在執(zhí)行時(shí)不會(huì)影響頁面的構(gòu)造。也就是說，腳本會(huì)被延遲到整個(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)中，延遲腳本并不一定會(huì)按照順序執(zhí)行defer屬性只適用于外部腳本文件。支持HTML5的實(shí)現(xiàn)會(huì)忽略嵌入腳本設(shè)置的defer屬性

2、async屬性

HTML5 為<script>標(biāo)簽定義了async屬性。與defer屬性類似，都用于改變處理腳本的行為。同樣，只適用于外部腳本文件。標(biāo)簽定義了async屬性。與defer屬性類似，都用于改變處理腳本的行為。同樣，只適用于外部腳本文件。

目的：不讓頁面等待腳本下載和執(zhí)行，從而異步加載頁面其他內(nèi)容。異步腳本一定會(huì)在頁面 load 事件前執(zhí)行。不能保證腳本會(huì)按順序執(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一樣，都不會(huì)阻塞其他資源下載，所以不會(huì)影響頁面的加載。

缺點(diǎn)：不能控制加載的順序

3、動(dòng)態(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延遲方法的加載時(shí)間延遲加載js代碼，給網(wǎng)頁加載留出更多時(shí)間

<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腳本文件時(shí)，如果放入html的head中,則頁面加載前該js腳本就會(huì)被加載入頁面，而放入body中，則會(huì)按照頁面從上倒下的加載順序來運(yùn)行JavaScript的代碼。所以我們可以把js外部引入的文件放到頁面底部，來讓js最后引入，從而加快頁面加載速度。

上述方法2也會(huì)偶爾讓你收到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文件在同一文件夾下。

注意：

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

網(wǎng)頁中編寫JavaScript代碼時(shí)，需要先引入JavaScript代碼。JavaScript代碼有3種引入方式，分別是行內(nèi)式、嵌入式和外鏈?zhǔn)剑旅娣謩e進(jìn)行講解。

1.行內(nèi)式

行內(nèi)式是將JavaScript代碼作為HTML標(biāo)簽的屬性值使用。例如，在單擊超鏈接“test”時(shí)，彈出一個(gè)警告框提示“Hello”，示例代碼如下：

<a href="javascript：alert('Hello');">test</a>

需要說明的是，行內(nèi)式只有在臨時(shí)測試或者特殊情況下使用，一般情況下不推薦使用行內(nèi)式，因?yàn)樾袃?nèi)式有如下缺點(diǎn)。

(1)行內(nèi)式可讀性較差，尤其是在HTML文件中編寫大量JavaScript代碼時(shí)，不方便閱讀。

(2)行內(nèi)式在遇到多層引號(hào)嵌套的情況時(shí)，引號(hào)非常容易混淆，導(dǎo)致代碼出錯(cuò)。

2.嵌入式

嵌入式(或稱內(nèi)嵌式)使用<scrip>標(biāo)簽包裹JavaScript代碼，直接編寫到HTML文件中，通常將其放到<head>標(biāo)簽<body>或標(biāo)簽中。<scrip>標(biāo)簽的type屬性用于告知瀏覽器腳本類型，HTML.5中該屬性的默認(rèn)值為“text/javascript”，因此在使用HTML5時(shí)可以省略ype屬性。嵌入式的示例代碼如下：

<script>
    JavaScript代碼
</script>

3.外鏈?zhǔn)?/h1>

外鏈?zhǔn)?或稱外部式)是將JavaScript 代碼寫在一個(gè)單獨(dú)的文件中，一般使用“js”作為文件的擴(kuò)展名，在HTML頁面中使用<script>標(biāo)簽的src屬性引人“js”文件。外鏈?zhǔn)竭m合javascript代碼量較多的情況。在html頁面中引入“js”文件，示例代碼如下：

<script src="test.js"></script>

上述代碼表示引入當(dāng)前目錄下的tesL.js文件。需要注意的是，外鏈?zhǔn)降臉?biāo)簽內(nèi)不可以編寫JavaScript 代碼。

為了幫助初學(xué)者更好地理解外鏈?zhǔn)剑旅胬猛怄準(zhǔn)綄?shí)現(xiàn)瀏覽網(wǎng)頁時(shí)在頁面中自動(dòng)彈出警告框。創(chuàng)建Example02.html文件，引入Example02.js文件，具體代碼如例1-2所示。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <script src="Example02.js"></script>
</body>
</html>

標(biāo)簽的src屬性設(shè)置了要引入的文件為Example02.js。

創(chuàng)建Example02.js文件，在該文件中編寫如下代碼：

alert ('Hello JavaScript');

保存代碼，在瀏覽器中訪問Example02.html文件，頁面效果與例1-1相同。

以上講解了JavaScript的3種引入方式。現(xiàn)代網(wǎng)頁開發(fā)中提倡結(jié)構(gòu)、樣式、行為的分離，即分離HTML、CSS、JavaScrixt這3部分代碼，這樣更有利于文件的維護(hù)。當(dāng)需要編寫大量的、邏輯復(fù)雜的、具有特定功能的JavaScrigt代碼時(shí)，推薦使用外鏈?zhǔn)健Ｍ怄準(zhǔn)较啾惹度胧剑哂幸韵?點(diǎn)優(yōu)勢：

(1)外鏈?zhǔn)酱嬖谟讵?dú)立文件中，有利于修改和維護(hù)，而嵌人式會(huì)導(dǎo)致HTML代碼與JavaScript代碼混合在一起。

(2)外鏈?zhǔn)娇梢岳脼g覽器緩存提高速度。例如，在多個(gè)頁面中引入相同的JavaScript文件時(shí)，打開第1個(gè)頁面后，瀏覽器將JavaScript文件緩存下來，下次打開其他頁面時(shí)就不用重新下載該文件了。

(3)外鏈?zhǔn)接欣贖TML頁h代碼結(jié)構(gòu)化，把大段的JavaScript代碼分離到HTML頁面之外，既美觀，也方便文件級(jí)別的代碼復(fù)用。

事跟我說他用jQuery取不到頁面上隱藏元素input的值，他的html頁面大概內(nèi)容如下。

<!DOCTYPE html>
<html lang="zh">
 
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<script type="text/javascript" src="jslib/jquery-1.11.2.min.js"></script>
	<title>淺談Html頁面內(nèi)容執(zhí)行順序</title>
	<script type="text/javascript">
		var userId = $('#hiddenUserId').val();
		var contextPath = $('#hiddenContextPath').val();
		var userName = $('#hiddenUserName').val();
	</script>
</head>
 
<body>
	<input type="hidden" id="hiddenUserId" value="101" />
	<input type="hidden" id="hiddenContextPath" value="/web" />
	<input type="hidden" id="hiddenUserName" value="小明" />
</body>
 
</html>

頁面中的JS腳本在head中，JS腳本要讀取的input在body中。瀏覽器對(duì)html頁面內(nèi)容的加載是順序加載，也就是在html頁面中前面先加載，因此當(dāng)加載到JS腳本時(shí)，input還沒有加載到瀏覽器中。JS是一種解釋性的腳本，也是從上而下順序執(zhí)行，由于這段JS代碼是立即執(zhí)行的，所以當(dāng)JS在執(zhí)行的時(shí)候，讀取不到input的值。

最直接的修改方法是把JS放到網(wǎng)頁的最下面執(zhí)行。

<!DOCTYPE html>
<html lang="zh">
 
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<script type="text/javascript" src="jslib/jquery-1.11.2.min.js"></script>
	<title>淺談Html頁面內(nèi)容執(zhí)行順序</title>	
</head>
 
<body>
	<input type="hidden" id="hiddenUserId" value="101" />
	<input type="hidden" id="hiddenContextPath" value="/web" />
	<input type="hidden" id="hiddenUserName" value="小明" />
	
	<script type="text/javascript">
		var userId = $('#hiddenUserId').val();
		var contextPath = $('#hiddenContextPath').val();
		var userName = $('#hiddenUserName').val();
	</script>
</body>
 
</html>

把JS放到網(wǎng)頁的最下面，這樣在JS執(zhí)行的時(shí)候，網(wǎng)頁內(nèi)容都已經(jīng)加載完畢。把JS放在網(wǎng)頁的最下面方法并不是最好的解決方法，大部分情況JS并不是總能放在網(wǎng)頁的最下面。這時(shí)可以用window的onload事件，onload事件在整個(gè)頁面都加載完成后才觸發(fā)，可以把JS腳本放在onload里面執(zhí)行。不同瀏覽器onload事件添加方式也不一樣。

IE下事件：

window.attachEvent('onload', function(){
			var userId = $('#hiddenUserId').val();
			var contextPath = $('#hiddenContextPath').val();
			var userName = $('#hiddenUserName').val();
		});

Chrome/Firefox等DOM標(biāo)準(zhǔn)事件：

window.addEventListener('load', function(){
			var userId = $('#hiddenUserId').val();
			var contextPath = $('#hiddenContextPath').val();
			var userName = $('#hiddenUserName').val();
		});

由于不同瀏覽器的事件添加方式不一樣，jQuery為我們提供了通用的初始化方法，該方法在頁面加載完成時(shí)觸發(fā)。

$(function(){
			var userId = $('#hiddenUserId').val();
			var contextPath = $('#hiddenContextPath').val();
			var userName = $('#hiddenUserName').val();
		});

上面方法本質(zhì)就是添加onload監(jiān)聽事件。

最終修改后的頁面

在線咨詢

上一篇：零基礎(chǔ)入門前端HTML知識(shí)整理
下一篇：javascript將頁面數(shù)據(jù)導(dǎo)出

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商