前端：JS延長(zhǎng)加載的方式有哪些？

么是JS延遲加載？

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

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

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

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ì)影響頁(yè)面的構(gòu)造。也就是說(shuō)，腳本會(huì)被延遲到整個(gè)頁(yè)面都解析完畢之后再執(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>

說(shuō)明：雖然<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屬性類似，都用于改變處理腳本的行為。同樣，只適用于外部腳本文件。

目的：不讓頁(yè)面等待腳本下載和執(zhí)行，從而異步加載頁(yè)面其他內(nèi)容。異步腳本一定會(huì)在頁(yè)面 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ì)影響頁(yè)面的加載。

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

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

//這些代碼應(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)該把那些頁(yè)面正常加載需要依賴的javascript代碼放在這里。而應(yīng)該將JavaScript代碼分成兩組。一組是因頁(yè)面需要而立即加載的javascript代碼，另外一組是在頁(yè)面加載后進(jìn)行操作的javascript代碼(例如添加click事件。

者：前端進(jìn)階者來(lái)源：前端進(jìn)階學(xué)習(xí)交流

一、前言

我們經(jīng)常在網(wǎng)頁(yè)上，游戲界面加載時(shí)會(huì)看到加載進(jìn)度條的效果，我們往往會(huì)以為這些加載進(jìn)度條的效果，很難實(shí)現(xiàn)。

今天教大家JS+CSS結(jié)合做簡(jiǎn)單一個(gè)加載進(jìn)度條的效果。

二、項(xiàng)目準(zhǔn)備

軟件：HBuilderX。

三、項(xiàng)目實(shí)現(xiàn)

1. body 創(chuàng)建2個(gè)div，外部div添加id"progress"屬性，添加 id屬性。

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

2.設(shè)置progress CSS樣式。

設(shè)置寬度，高度，邊框圓角，超過(guò)溢出處理，邊框顏色等等屬性。

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

3.設(shè)置progress-bar CSS樣式。

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

#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. 設(shè)置創(chuàng)建兩個(gè)按鈕，添加點(diǎn)擊事件。

<button onclick="start()">開(kāi)始進(jìn)度</button> 
<button onclick="stop()">結(jié)束進(jìn)度</button>

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

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

6.判斷當(dāng)進(jìn)度條到100%時(shí)，停止定時(shí)器，沒(méi)有到達(dá)，再執(zhí)行方法。

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

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

function stop() { 
clearInterval(t); 
}

8. 調(diào)用方法，實(shí)現(xiàn)效果。

四、效果展示

1、f12運(yùn)行到chrome瀏覽器。

2、點(diǎn)擊開(kāi)始進(jìn)度按鈕，加載進(jìn)度。顯示進(jìn)度加載情況。

3、加載到100% 停止定時(shí)器!

4、按鈕結(jié)束進(jìn)度按鈕，停止定時(shí)器。直接從當(dāng)前進(jìn)度停止。

五、總結(jié)

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

家好，我是皮皮。

前言

對(duì)于前端來(lái)說(shuō)，HTML 都是最基礎(chǔ)的內(nèi)容。

今天，我們來(lái)了解一下 HTML 和網(wǎng)頁(yè)有什么關(guān)系，以及與 DOM 有什么不同。通過(guò)本講內(nèi)容，你將掌握瀏覽器是怎么處理 HTML 內(nèi)容的，以及在這個(gè)過(guò)程中我們可以進(jìn)行怎樣的處理來(lái)提升網(wǎng)頁(yè)的性能，從而提升用戶的體驗(yàn)。

一、瀏覽器頁(yè)面加載過(guò)程

不知你是否有過(guò)這樣的體驗(yàn)：當(dāng)打開(kāi)某個(gè)瀏覽器的時(shí)候，發(fā)現(xiàn)一直在轉(zhuǎn)圈，或者等了好長(zhǎng)時(shí)間才打開(kāi)頁(yè)面……

此時(shí)的你，會(huì)選擇關(guān)掉頁(yè)面還是耐心等待呢？

這一現(xiàn)象，除了網(wǎng)絡(luò)不穩(wěn)定、網(wǎng)速過(guò)慢等原因，大多數(shù)都是由于頁(yè)面設(shè)計(jì)不合理導(dǎo)致加載時(shí)間過(guò)長(zhǎng)導(dǎo)致的。

我們都知道，頁(yè)面是用 HTML/CSS/JavaScript 來(lái)編寫(xiě)的。

HTML 的職責(zé)在于告知瀏覽器如何組織頁(yè)面，以及搭建頁(yè)面的基本結(jié)構(gòu)；
CSS 用來(lái)裝飾 HTML，讓我們的頁(yè)面更好看；
JavaScript 則可以豐富頁(yè)面功能，使靜態(tài)頁(yè)面動(dòng)起來(lái)。

HTML由一系列的元素組成，通常稱為HTML元素。HTML 元素通常被用來(lái)定義一個(gè)網(wǎng)頁(yè)結(jié)構(gòu)，基本上所有網(wǎng)頁(yè)都是這樣的 HTML 結(jié)構(gòu)：

<html>
    <head></head>
    <body></body>
</html>

其中：

html元素是頁(yè)面的根元素，它描述完整的網(wǎng)頁(yè)；
head元素包含了我們想包含在 HTML 頁(yè)面中，但不希望顯示在網(wǎng)頁(yè)里的內(nèi)容；
body元素包含了我們?cè)L問(wèn)頁(yè)面時(shí)所有顯示在頁(yè)面上的內(nèi)容，是用戶最終能看到的內(nèi)容;

HTML 中的元素特別多，其中還包括可用于 Web Components 的自定義元素。

前面我們提到頁(yè)面 HTML 結(jié)構(gòu)不合理可能會(huì)導(dǎo)致頁(yè)面響應(yīng)慢，這個(gè)過(guò)程很多時(shí)候體現(xiàn)在<script>和<style>元素的設(shè)計(jì)上，它們會(huì)影響頁(yè)面加載過(guò)程中對(duì) Javascript 和 CSS 代碼的處理。

因此，如果想要提升頁(yè)面的加載速度，就需要了解瀏覽器頁(yè)面的加載過(guò)程是怎樣的，從根本上來(lái)解決問(wèn)題。

瀏覽器在加載頁(yè)面的時(shí)候會(huì)用到 GUI 渲染線程和 JavaScript 引擎線程（更詳細(xì)的瀏覽器加載和渲染機(jī)制將在第 7 講中介紹）。其中，GUI 渲染線程負(fù)責(zé)渲染瀏覽器界面 HTML 元素，JavaScript 引擎線程主要負(fù)責(zé)處理 JavaScript 腳本程序。

由于 JavaScript 在執(zhí)行過(guò)程中還可能會(huì)改動(dòng)界面結(jié)構(gòu)和樣式，因此它們之間被設(shè)計(jì)為互斥的關(guān)系。也就是說(shuō)，當(dāng) JavaScript 引擎執(zhí)行時(shí)，GUI 線程會(huì)被掛起。

以網(wǎng)易云課堂官網(wǎng)為例，我們來(lái)看看網(wǎng)頁(yè)加載流程。

（1）當(dāng)我們打開(kāi)官網(wǎng)的時(shí)候，瀏覽器會(huì)從服務(wù)器中獲取到 HTML 內(nèi)容。

（2）瀏覽器獲取到 HTML 內(nèi)容后，就開(kāi)始從上到下解析 HTML 的元素。

（3）<head>元素內(nèi)容會(huì)先被解析，此時(shí)瀏覽器還沒(méi)開(kāi)始渲染頁(yè)面。

我們看到<head>元素里有用于描述頁(yè)面元數(shù)據(jù)的<meta>元素，還有一些<link>元素涉及外部資源（如圖片、CSS 樣式等），此時(shí)瀏覽器會(huì)去獲取這些外部資源。除此之外，我們還能看到<head>元素中還包含著不少的<script>元素，這些<script>元素通過(guò)src屬性指向外部資源。

（4）當(dāng)瀏覽器解析到這里時(shí)（步驟 3），會(huì)暫停解析并下載 JavaScript 腳本。

（5）當(dāng) JavaScript 腳本下載完成后，瀏覽器的控制權(quán)轉(zhuǎn)交給 JavaScript 引擎。當(dāng)腳本執(zhí)行完成后，控制權(quán)會(huì)交回給渲染引擎，渲染引擎繼續(xù)往下解析 HTML 頁(yè)面。

（6）此時(shí)<body>元素內(nèi)容開(kāi)始被解析，瀏覽器開(kāi)始渲染頁(yè)面。

在這個(gè)過(guò)程中，我們看到<head>中放置的<script>元素會(huì)阻塞頁(yè)面的渲染過(guò)程：把 JavaScript 放在<head>里，意味著必須把所有 JavaScript 代碼都下載、解析和解釋完成后，才能開(kāi)始渲染頁(yè)面。

到這里，我們就明白了：如果外部腳本加載時(shí)間很長(zhǎng)（比如一直無(wú)法完成下載），就會(huì)造成網(wǎng)頁(yè)長(zhǎng)時(shí)間失去響應(yīng)，瀏覽器就會(huì)呈現(xiàn)“假死”狀態(tài)，用戶體驗(yàn)會(huì)變得很糟糕。

因此，對(duì)于對(duì)性能要求較高、需要快速將內(nèi)容呈現(xiàn)給用戶的網(wǎng)頁(yè)，常常會(huì)將 JavaScript 腳本放在<body>的最后面。這樣可以避免資源阻塞，頁(yè)面得以迅速展示。我們還可以使用defer/async/preload等屬性來(lái)標(biāo)記<script>標(biāo)簽，來(lái)控制 JavaScript 的加載順序。

百度首頁(yè)

三、DOM 解析

對(duì)于百度這樣的搜索引擎來(lái)說(shuō)，必須要在最短的時(shí)間內(nèi)提供到可用的服務(wù)給用戶，其中就包括搜索框的顯示及可交互，除此之外的內(nèi)容優(yōu)先級(jí)會(huì)相對(duì)較低。

瀏覽器在渲染頁(yè)面的過(guò)程需要解析 HTML、CSS 以得到 DOM 樹(shù)和 CSS 規(guī)則樹(shù)，它們結(jié)合后才生成最終的渲染樹(shù)并渲染。因此，我們還常常將 CSS 放在<head>里，可用來(lái)避免瀏覽器渲染的重復(fù)計(jì)算。

二、HTML 與 DOM 有什么不同

我們知道<p>是 HTML 元素，但又常常將<p>這樣一個(gè)元素稱為 DOM 節(jié)點(diǎn)，那么 HTML 和 DOM 到底有什么不一樣呢？

根據(jù) MDN 官方描述：文檔對(duì)象模型（DOM）是 HTML 和 XML 文檔的編程接口。

也就是說(shuō)，DOM 是用來(lái)操作和描述 HTML 文檔的接口。如果說(shuō)瀏覽器用 HTML 來(lái)描述網(wǎng)頁(yè)的結(jié)構(gòu)并渲染，那么使用 DOM 則可以獲取網(wǎng)頁(yè)的結(jié)構(gòu)并進(jìn)行操作。一般來(lái)說(shuō)，我們使用 JavaScript 來(lái)操作 DOM 接口，從而實(shí)現(xiàn)頁(yè)面的動(dòng)態(tài)變化，以及用戶的交互操作。

在開(kāi)發(fā)過(guò)程中，常常用對(duì)象的方式來(lái)描述某一類事物，用特定的結(jié)構(gòu)集合來(lái)描述某些事物的集合。DOM 也一樣，它將 HTML 文檔解析成一個(gè)由 DOM 節(jié)點(diǎn)以及包含屬性和方法的相關(guān)對(duì)象組成的結(jié)構(gòu)集合。

三、DOM 解析

我們常見(jiàn)的 HTML 元素，在瀏覽器中會(huì)被解析成節(jié)點(diǎn)。比如下面這樣的 HTML 內(nèi)容：

<html>
    <head>
        <title>標(biāo)題</title>
    </head>
    <body>
        <a href='xx.com'>我的超鏈接</a>
        <h1>頁(yè)面第一標(biāo)題</h1>
    </body>
</html>

打開(kāi)控制臺(tái) Elements 面板，可以看到這樣的 HTML 結(jié)構(gòu)，如下圖所示：

在瀏覽器中，上面的 HTML 會(huì)被解析成這樣的 DOM 樹(shù)，如下圖所示：

我們都知道，對(duì)于樹(shù)狀結(jié)構(gòu)來(lái)說(shuō)，常常使用parent/child/sibling等方式來(lái)描述各個(gè)節(jié)點(diǎn)之間的關(guān)系，對(duì)于 DOM 樹(shù)也不例外。

舉個(gè)例子，我們常常會(huì)對(duì)頁(yè)面功能進(jìn)行抽象，并封裝成組件。但不管怎么進(jìn)行整理，頁(yè)面最終依然是基于 DOM 的樹(shù)狀結(jié)構(gòu)，因此組件也是呈樹(shù)狀結(jié)構(gòu)，組件間的關(guān)系也同樣可以使用parent/child/sibling這樣的方式來(lái)描述。同時(shí)，現(xiàn)在大多數(shù)應(yīng)用程序同樣以root為根節(jié)點(diǎn)展開(kāi)，我們進(jìn)行狀態(tài)管理、數(shù)據(jù)管理也常常會(huì)呈現(xiàn)出樹(shù)狀結(jié)構(gòu)。

四、事件委托

我們知道，瀏覽器中各個(gè)元素從頁(yè)面中接收事件的順序包括事件捕獲階段、目標(biāo)階段、事件冒泡階段。其中，基于事件冒泡機(jī)制，我們可以實(shí)現(xiàn)將子元素的事件委托給父級(jí)元素來(lái)進(jìn)行處理，這便是事件委托。

如果我們?cè)诿總€(gè)元素上都進(jìn)行監(jiān)聽(tīng)的話，則需要綁定三個(gè)事件;(假設(shè)頁(yè)面上有a,b,c三個(gè)兄弟節(jié)點(diǎn))

function clickEventFunction(e) {
  console.log(e.target === this); // logs `true`
  // 這里可以用 this 獲取當(dāng)前元素
}
// 元素a,b,c綁定
element2.addEventListener("click", clickEventFunction, false);
element5.addEventListener("click", clickEventFunction, false);
element8.addEventListener("click", clickEventFunction, false);

使用事件委托，可以通過(guò)將事件添加到它們的父節(jié)點(diǎn)，而將事件委托給父節(jié)點(diǎn)來(lái)觸發(fā)處理函數(shù)：

function clickEventFunction(event) {
  console.log(e.target === this); // logs `false`
  // 獲取被點(diǎn)擊的元素
  const eventTarget = event.target;
  // 檢查源元素`event.target`是否符合預(yù)期
  // 此處控制廣告面板的展示內(nèi)容
}
// 元素1綁定
element1.addEventListener("click", clickEventFunction, false);

這樣能解決什么問(wèn)題呢？

綁定子元素會(huì)綁定很多次的事件，而綁定父元素只需要一次綁定。
將事件委托給父節(jié)點(diǎn)，這樣我們對(duì)子元素的增加和刪除、移動(dòng)等，都不需要重新進(jìn)行事件綁定。

常見(jiàn)的使用方式主要是上述這種列表結(jié)構(gòu)，每個(gè)選項(xiàng)都可以進(jìn)行編輯、刪除、添加標(biāo)簽等功能，而把事件委托給父元素，不管我們新增、刪除、更新選項(xiàng)，都不需要手動(dòng)去綁定和移除事件。

如果在列表數(shù)量?jī)?nèi)容較大的時(shí)候，對(duì)成千上萬(wàn)節(jié)點(diǎn)進(jìn)行事件監(jiān)聽(tīng)，也是不小的性能消耗。使用事件委托的方式，我們可以大量減少瀏覽器對(duì)元素的監(jiān)聽(tīng)，也是在前端性能優(yōu)化中比較簡(jiǎn)單和基礎(chǔ)的一個(gè)做法。

注意:

如果我們直接在document.body上進(jìn)行事件委托，可能會(huì)帶來(lái)額外的問(wèn)題;
由于瀏覽器在進(jìn)行頁(yè)面渲染的時(shí)候會(huì)有合成的步驟，合成的過(guò)程會(huì)先將頁(yè)面分成不同的合成層，而用戶與瀏覽器進(jìn)行交互的時(shí)候需要接收事件。此時(shí)，瀏覽器會(huì)將頁(yè)面上具有事件處理程序的區(qū)域進(jìn)行標(biāo)記，被標(biāo)記的區(qū)域會(huì)與主線程進(jìn)行通信。
如果我們document.body上被綁定了事件，這時(shí)候整個(gè)頁(yè)面都會(huì)被標(biāo)記;
即使我們的頁(yè)面不關(guān)心某些部分的用戶交互，合成器線程也必須與主線程進(jìn)行通信，并在每次事件發(fā)生時(shí)進(jìn)行等待。這種情況，我們可以使用passive: true選項(xiàng)來(lái)解決

五、總結(jié)

我們了解了 HTML 的作用，以及它是如何影響瀏覽器中頁(yè)面的加載過(guò)程的，同時(shí)還介紹了使用 DOM 接口來(lái)控制 HTML 的展示和功能邏輯。我們了解了DOM解析事件委托等相關(guān)概念。

在線咨詢

上一篇：零基礎(chǔ)教你學(xué)前端-30、單選和多選
下一篇：探索如何將html和svg導(dǎo)出為圖片

您的項(xiàng)目需求

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

整合營(yíng)銷服務(wù)商

前端：JS延長(zhǎng)加載的方式有哪些？

1、defer屬性

2、async屬性

3、動(dòng)態(tài)創(chuàng)建DOM方式

4、使用jQuery的getScript()方法

5、使用setTimeout延遲方法的加載時(shí)間延遲加載js代碼，給網(wǎng)頁(yè)加載留出更多時(shí)間

6、讓JS最后加載

一、前言

二、項(xiàng)目準(zhǔn)備

三、項(xiàng)目實(shí)現(xiàn)

四、效果展示

五、總結(jié)

家好，我是皮皮。

前言

一、瀏覽器頁(yè)面加載過(guò)程

三、DOM 解析

二、HTML 與 DOM 有什么不同

三、DOM 解析

四、事件委托

五、總結(jié)

您的項(xiàng)目需求

前端：JS延長(zhǎng)加載的方式有哪些？

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

4、使用jQuery的getScript()方法

5、使用setTimeout延遲方法的加載時(shí)間延遲加載js代碼，給網(wǎng)頁(yè)加載留出更多時(shí)間

一、前言

二、項(xiàng)目準(zhǔn)備

四、效果展示

五、總結(jié)

三、DOM 解析

三、DOM 解析

四、事件委托