如何提高JavaScript的效能？-html教學-PHP中文網

首頁

web前端

html教學

如何提高JavaScript的效能？

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 12, 2023 pm 12:25 PM

如何提高JavaScript的效能？

當今世界，幾乎每個網站都使用 JavaScript。 Web 應用程式變得越來越複雜，使用者互動性也越來越強，這導致了效能問題。它會導致糟糕的使用者體驗，這對於任何 Web 應用程式來說都是不可取的。不同的因素會導致效能差、載入時間長和反應時間長。

在本教程中，我們將討論所有這些因素以及如何解決此問題並提高 JavaScript 的效能。

輕量且緊湊的程式碼

提高 JavaScript 效能的第一件事就是編寫輕量、緊湊的程式碼。 JavaScript 程式碼可以有多個模組和一些未使用的函數或變量，可以輕鬆地從程式碼中刪除它們。它將縮短 JavaScript 的編譯時間，從而獲得更好的效能。此外，使用先進的演算法來執行複雜的任務對於提高效能也非常有益。

使用局部變數

JavaScript 存取局部變數的速度比全域變數快，因此使用局部變數可以提高 JavaScript 的效能。每當我們存取變數時，JavaScript 首先在本地範圍內搜尋該變量，然後尋找全域變數。如果所有變數都定義在本地範圍內，則會減少存取它的時間。此外，局部變數在函數呼叫完成後會被銷毀，但全域變數將其值保留在記憶體中。這也可能導致記憶體問題。

// Local variables
const id = 10
let value = 'Tutorialspoint'
// Global variables
var key = 'JavaScript'

減少 DOM 訪問

存取 DOM 並操作它是 JavaScript 最重要的功能之一。但是過度不必要地存取 DOM 會導致巨大的效能問題。每當我們操作 DOM 中的某個元素時，DOM 都會以更新狀態刷新，如果您保持每秒更新 DOM 元素，那麼每秒都會刷新 DOM。所以建議在必要的時候更新DOM。如果使用者需要多次更新某個元素，那麼最好將元素物件儲存在變數中並使用該變數來更新 DOM。

let element = document.getElementById('element_id')
element.innerHTML = 'Tutorialspoint'

減少迴圈迭代次數

循環是完成一些重複性任務的簡單方法，但它們也會導致效能不佳。長迭代循環需要大量時間才能完成，因此最好盡可能避免使用長循環。相反，使用小循環並在循環中執行最少的任務。另外，不要在循環中存取 DOM；這將導致巨大的效能問題，因為您在每次循環迭代中都在操作 DOM。

let names = ['abc', 'xyz', 'mno', 'pqr'];
let element = document.getElementById('element_id');
// DON’T DO THIS
for(let index=0; i<names.length; i++){
   element.innerHTML += names[index] + ' ';
}
// DO THIS
let str = '';
for(let index=0; i<names.length; i++){
   str += names[index];
}
element.innerHTML = str;

使用非同步程式設計

非同步程式設計是提高 Web 應用程式效能的最佳方法之一。在非同步編程中，程式碼執行是非同步完成的，因此可以輕鬆地同時執行多個任務。它導致數據的快速加載和快速響應。在 JavaScript 中，非同步操作由 AJAX 執行，AJAX 代表非同步 Javascript 和 XML。

let http = new XMLHttpRequest()
http.open('GET', '...URL')
http.onload = function(){
   console.log(this.response); // the response
}

將 JavaScript 放在頁面底部

當 JavaScript 放置在頁面頂部時，它會在頁面載入時執行，因此需要一些額外的時間來載入整個頁面。它會導致頁面加載緩慢。為了解決這個問題，JavaScript 應放置在頁面底部，以便 JavaScript 在載入整個頁面後開始執行。

範例

<html>
<body>
   <div>Your Page Content</div>
   <div id='element'></div>
   <script>
      // JavaScript Code at Page's Bottom
      document.getElementById('element').innerHTML = 'Welcome to
      Tutorialspoint'
   </script>
</body>
</html>

消除記憶體洩漏

如果Web應用程式存在記憶體洩漏，那麼應用程式將分配越來越多的內存，從而導致巨大的效能和記憶體問題。要解決此問題，請確保應用程式中沒有記憶體洩漏，並檢查變數是否取了過多的值。使用者可以在Chrome開發工具中觀察記憶體洩漏情況。

使用最佳化演算法

JavaScript中的複雜任務一般會花費大量時間，這會導致效能問題，並使用最佳化的演算法；我們可以減少執行任務所需的時間。以更優化的方式重寫演算法以獲得最佳結果。另外，避免使用長循環、遞歸呼叫和全域變數。

建立和使用變數

在 JavaScript 中，僅建立您將使用並保存值的變數。使用以下內容並避免不必要的程式碼行和變數宣告 -

document.write(num.copyWithin(2,0));

避免使用 with

with 關鍵字對 JavaScript 速度沒有很好的影響。避免在程式碼中使用它。

更快的循環

使用循環時，請將賦值保留在循環之外。這將使循環更快 -

var i;
// assignment outside the loop
var j = arr.length;
for (i = 0; i < j; i++) {
   // code
}

使用其他工具來找出問題

您的 Web 應用程式似乎運作正常，但可能會有一些效能問題，為了找出這些問題，一些工具可能很有用。 Lighthouse 是一個有用的 Web 應用程式效能分析工具。它有助於檢查性能、最佳實踐、可訪問性和 SEO。網路上不僅有這個工具，還有其他工具可以用來檢查 Web 應用程式的效能，我們可以簡單地看到問題並嘗試克服這些問題。

以上是如何提高JavaScript的效能？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文轉載於：tutorialspoint。如有侵權，請聯絡admin@php.cn刪除