資料結構
網路
關係資料庫管理系統 (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執行，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應用程式的效能，我們可以簡單地檢視問題並嘗試克服這些問題。
瀏覽量：305
