資料結構
網路
關係型資料庫 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何提升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並操作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（非同步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應用程式的效能，我們可以簡單地檢視問題並嘗試克服這些問題。
306 次瀏覽
