快捷導(dǎo)航

JavaScript加載速度優(yōu)化方法

更新時(shí)間：2023年08月26日 09:01:06 投稿：yin

通過(guò)使用CDN、壓縮、異步加載、盡可能的減少JavaScript文件大小、利用緩存機(jī)制、使用Vanilla?JS、使用ES6特性、將JavaScript文件放到底部、減少對(duì)DOM的訪問(wèn)以及避免重復(fù)代碼等方法,可以優(yōu)化JavaScript文件的加載和執(zhí)行速度,提供更好的用戶體驗(yàn)和更高的性能

通過(guò)使用CDN、壓縮、異步加載、盡可能的減少JavaScript文件大小、利用緩存機(jī)制、使用Vanilla JS、使用ES6特性、將JavaScript文件放到底部、減少對(duì)DOM的訪問(wèn)以及避免重復(fù)代碼等方法，可以優(yōu)化JavaScript文件的加載和執(zhí)行速度，提供更好的用戶體驗(yàn)和更高的性能。

script 代碼塊的默認(rèn)加載和執(zhí)行順序：

從上到下依次邊加載邊解釋執(zhí)行。如果設(shè)計(jì)到了引入外部的js代碼，那么該代碼必須加載完成并解釋執(zhí)行完畢之后才能繼續(xù)解析后面的HTML 和 js代碼。

默認(rèn)加載執(zhí)行的順序的問(wèn)題：

如果加載的外部的js代碼比較大，而且是網(wǎng)絡(luò)js代碼，可能會(huì)引起頁(yè)面的假死狀態(tài)。

一般的解決方案：

（1）將這些js代碼放到 body 的末尾。
（2）給script標(biāo)簽添加async屬性。讓該引入的外部的js代碼，實(shí)現(xiàn)異步加載。
（3）給script標(biāo)簽添加 defer 屬性。讓該引入的外部的js代碼，實(shí)現(xiàn)延遲加載。

js的 async 異步加載介紹：

1：必須針對(duì)使用引入外部的js代碼，該屬性才能生效。
2：如果給引用外部js代碼的script添加了 async，那么該引入的js的執(zhí)行特點(diǎn)如下：
（1）js代碼的加載和后續(xù)的HTML內(nèi)容是并行加載的。
（2）如果js代碼先加載完了，HTML還沒(méi)有加載完畢，會(huì)暫停HTML的解析。執(zhí)行js代碼，然后再解析。

注意：使用 async 屬性的 script代碼，各個(gè)script代碼之間不應(yīng)該存在上下的依賴關(guān)系，因?yàn)檫@些 async 的script代碼加載完畢的順序是不可控的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/test1.js" async></script>
</head>
<body>
<script src="js/test2.js" async></script>
<script>
    console.log ("test");//先執(zhí)行
</script>
</body>
</html>

js的 defer 延遲加載介紹：

1：必須針對(duì)使用引入外部的js代碼，該屬性才能生效。

2：所有使用了defer 屬性的 script 的加載順序是固定的。

3：延遲加載。所有的 defer 的script 和后續(xù)的HTML 內(nèi)容可以實(shí)現(xiàn)并行加載。

4：如果defer屬性的script 代碼加載完畢，需要等待HTML解析完畢之后才能執(zhí)行js代碼

5：如果defer 和 async 同時(shí)使用，那么 async 的優(yōu)先級(jí)高于defer的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/test1.js" defer>第二個(gè)執(zhí)行</script>
</head>
<body>
<script src="js/test2.js" defer>最后執(zhí)行</script>
<script>
    console.log ("test");//先執(zhí)行
</script>
</body>
</html>

JavaScript加載速度優(yōu)化方法

1. 使用CDN

使用CDN(Content Delivery Network，內(nèi)容分發(fā)網(wǎng)絡(luò))來(lái)托管JavaScript文件，可以將文件存放在全球各地的服務(wù)器上，距離用戶更近，從而更快地加載文件。常見的CDN服務(wù)提供商包括來(lái)自Google的Google Libraries API、來(lái)自Microsoft的CDNJS等。

2. 壓縮JavaScript文件

JavaScript文件壓縮工具能夠?qū)⑽募笮】s小50%以上。這個(gè)過(guò)程可以使JavaScript文件更快地下載和執(zhí)行。

例如，Google Closure Compiler可以壓縮JavaScript，他具有許多使用選項(xiàng)，包括完全壓縮文件，刪除注釋，刪除空格，提取常量等。

3.使用異步加載

在使用JavaScript時(shí)，可以在不影響用戶體驗(yàn)的前提下，利用異步加載的機(jī)制來(lái)提升加載速度?？梢允褂肏TML5的async屬性或defer屬性來(lái)實(shí)現(xiàn)。

4. 讓JavaScript文件盡可能小

減小文件的大小可以減少下載時(shí)間，因此可以通過(guò)優(yōu)化JavaScript文件長(zhǎng)度來(lái)實(shí)現(xiàn)優(yōu)化加載速度的目的。可以在JavaScript文件中壓縮代碼、刪除不需要的注釋、換行符，以及刪除冗余的代碼等。

5. 利用緩存機(jī)制來(lái)再次加載

如果在第一次加載完頁(yè)面后，用戶再次訪問(wèn)相同的頁(yè)面，這些JavaScript文件將使用瀏覽器的緩存來(lái)重新加載，以加快下載速度。

6.使用Vanilla JS

Vanilla JS是一種沒(méi)有使用任何類庫(kù)或框架的JavaScript代碼。它不依賴于其他庫(kù)或框架，因此運(yùn)行更快，加載和執(zhí)行的速度更快。

7. 使用ES6特性

ES6是ECMAScript的第六個(gè)版本，有很多特性都可以用來(lái)提升JavaScript的運(yùn)行速度。例如，使用箭頭函數(shù)（=>）來(lái)代替?zhèn)鹘y(tǒng)函數(shù)，使用let和const來(lái)替代var，使用解構(gòu)賦值等。

8. 將JavaScript文件放到底部

由于HTML解析器會(huì)逐行解析文檔，因此將JavaScript文件放置在底部，可以確保頁(yè)面中的所有其他文檔元素都已經(jīng)加載完畢。在這種情況下，JavaScript文件可以在下載完成時(shí)立即執(zhí)行，而不需要等待其他組件加載完成。

9. 減少對(duì)DOM的訪問(wèn)

DOM是JavaScript和HTML之間的橋梁,通過(guò)它可以訪問(wèn)網(wǎng)頁(yè)所有的元素。DOM讀寫和操作操作都會(huì)嚴(yán)重影響JavaScript代碼的性能。接口可以通過(guò)緩存DOM操作結(jié)果，減少DOM訪問(wèn)次數(shù)來(lái)優(yōu)化性能。

例如，通過(guò)緩存某個(gè)元素的引用，而不是在每次訪問(wèn)時(shí)重新查找該元素的引用，可以大大減少對(duì)DOM的訪問(wèn)，并提高JavaScript的性能。