亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

 更新時間：2023年08月26日 09:01:06   投稿：yin  
通過使用CDN、壓縮、異步加載、盡可能的減少JavaScript文件大小、利用緩存機制、使用Vanilla?JS、使用ES6特性、將JavaScript文件放到底部、減少對DOM的訪問以及避免重復代碼等方法,可以優(yōu)化JavaScript文件的加載和執(zhí)行速度,提供更好的用戶體驗和更高的性能

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

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

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

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

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

一般的解決方案：

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

 js的 async 異步加載介紹：

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

注意：使用 async 屬性的 script代碼，各個script代碼之間不應該存在上下的依賴關系，因為這些 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：必須針對使用引入外部的js代碼，該屬性才能生效。

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

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/test1.js" defer>第二個執(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，內容分發(fā)網絡)來托管JavaScript文件，可以將文件存放在全球各地的服務器上，距離用戶更近，從而更快地加載文件。常見的CDN服務提供商包括來自Google的Google Libraries API、來自Microsoft的CDNJS等。

2. 壓縮JavaScript文件

JavaScript文件壓縮工具能夠將文件大小縮小50%以上。這個過程可以使JavaScript文件更快地下載和執(zhí)行。

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

3.使用異步加載

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

4. 讓JavaScript文件盡可能小

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

5. 利用緩存機制來再次加載

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

6.使用Vanilla JS

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

7. 使用ES6特性

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

8. 將JavaScript文件放到底部

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

9. 減少對DOM的訪問

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

例如，通過緩存某個元素的引用，而不是在每次訪問時重新查找該元素的引用，可以大大減少對DOM的訪問，并提高JavaScript的性能。

10. 避免重復代碼

對JavaScript文件進行分析和評估，找出其中的冗余代碼并刪除。如果使用JSHint工具，可以檢查如何改進代碼，并避免重復代碼的生成。

到此這篇關于JavaScript加載速度優(yōu)化方法的文章就介紹到這了,更多相關js加載速度優(yōu)化內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

相關文章

最新評論