前端：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事件。

、獲取和設(shè)置元素內(nèi)容

1. html方法的使用

jquery中的html方法可以獲取和設(shè)置標(biāo)簽的html內(nèi)容

示例代碼:

<script>
    $(function(){

        var $div = $("#div1");
        //  獲取標(biāo)簽的html內(nèi)容
        var result = $div.html();
        alert(result);
        //  設(shè)置標(biāo)簽的html內(nèi)容，之前的內(nèi)容會(huì)清除
        $div.html("<span style='color:red'>你好</span>");
        //  追加html內(nèi)容
        $div.append("<span style='color:red'>你好</span>");

    });
</script>

<div id="div1">
    <p>hello</p>
</div>

說明:

給指定標(biāo)簽追加html內(nèi)容使用append方法

七、獲取和設(shè)置元素屬性

1. prop方法的使用

之前使用css方法可以給標(biāo)簽設(shè)置樣式屬性，那么設(shè)置標(biāo)簽的其它屬性可以使用prop方法了。

示例代碼:

<style>
    .a01{
        color:red;
    }
</style>

<script>
    $(function(){
        var $a = $("#link01");
        var $input = $('#input01')

        // 獲取元素屬性
        var sId = $a.prop("id");
        alert(sId);

        // 設(shè)置元素屬性
        $a.prop({"href":"http://www.baidu.com","title":'這是去到百度的鏈接',"class":"a01"});

        //  獲取value屬性
        // var sValue = $input.prop("value");
        // alert(sValue);

        // 獲取value屬性使用val()方法的簡寫方式
        var sValue = $input.val();
        alert(sValue);
        // 設(shè)置value值
        $input.val("222222");
    })
</script>

<a id="link01">這是一個(gè)鏈接</a>
<input type="text" id="input01" value="111111">

說明: 獲取value屬性和設(shè)置value屬性還可以通過val方法來完成。

說到讀取文件，很多小伙伴第一時(shí)間想到的是php，asp.net這些后臺(tái)語言來實(shí)現(xiàn)。

javascript一直都沒有提供相關(guān)的文件讀取接口，但有時(shí)我們確實(shí)需要讀取本地文件內(nèi)容，下面是兩種可能的讀取方法。

使用 HTML5 中的FileReader對象

HTML5 引入的 FileReader 可以幫助我們讀取本地文件,但是有一個(gè)限制,就是我們不能直接使用文件路徑的方式來訪問文件，而是首先需要用戶選擇文件（通過input標(biāo)簽）。

首先你需要在 html 文件中添加文件選擇表單，如下：

<input type="file" id="file-input" />
<div id="file-content"></div>

接著就可以在 JavaScript 中進(jìn)行(用戶選擇的)文件讀取了:

function readSingleFile(e) {
 //獲取選擇的文件對象
 var file = e.target.files[0];
 if (!file) {
return;
 }
 // 創(chuàng)建FileReader對象
 var reader = new FileReader();
 // load 回調(diào)
 reader.onload = function(e) {
 var contents = e.target.result;
 alert(contents) // 內(nèi)容處理

 };
 // 讀取文件
 reader.readAsText(file,"utf-8");
}
// 添加監(jiān)聽事件
var fileInput = document.getElementById("file-input");
fileInput.addEventListener("change", readSingleFile, false);

運(yùn)行結(jié)果如下：

在線咨詢

上一篇：JavaScript-Array的高階函數(shù)過濾、檢測、累加
下一篇：web前端ajax筆記之一