當前位置：首頁 > 科技 > 軟件

代碼速度慢？避免這 19 種常見的 JavaScript 和 Node.js 錯誤

來源：責編：時間：2023-11-03 09:16:24 286觀看

導讀譯者 | 劉汪洋審校 | 重樓速度、性能和響應性在 Web 開發中起著至關重要的作用，尤其是在使用 JavaScript 和 Node.js 開發時尤為重要。如果一個網站響應緩慢或界面卡頓，就會讓人感到非常業余；如果網站經過精心設計和優化

譯者 | 劉汪洋

審校 | 重樓

速度、性能和響應性在 Web 開發中起著至關重要的作用，尤其是在使用 JavaScript 和 Node.js 開發時尤為重要。如果一個網站響應緩慢或界面卡頓，就會讓人感到非常業余；如果網站經過精心設計和優化，能夠給用戶帶來絲滑的使用體驗，就顯得非常專業。

打造一個真正高性能的 Web 應用并非易事，其中潛藏著許多容易忽視的性能陷阱。這些不易被察覺的編程習慣或錯誤不僅可能降低 JavaScript 的執行速度，還可能導致代碼冗余，進一步降低應用的運行效率。

即使你已經壓縮了代碼并合理地使用了緩存，網站在某些情況下仍然可能運行緩慢。例如，用戶界面在滾動或點擊按鈕時出現明顯的卡頓，或頁面加載時間過長。

這到底是為什么呢？

分析表明，有多種常見的不良實踐會無意中拖慢 JavaScript 的執行效率。隨著時間推移，這些不良實踐會逐步影響網站的整體性能。

幸運的是，這些性能問題都是可以預防和解決的。

本文將深入分析 19 個可能降低 JavaScript 和 Node.js 應用性能的隱性問題，并通過具體的實例和解決策略，對這些問題進行詳細討論和優化。

準確地識別并解決這些性能陷阱是實現高效、流暢用戶體驗的關鍵。下面，就讓我們一起探索吧！

1. 變量聲明與作用域的不恰當使用

在 JavaScript 初學階段，開發者常常習慣性地在全局作用域中聲明變量，但這種做法往往會帶來很多副作用。
讓我們通過一個示例來解釋：

// globals.jsvar color = 'blue';function printColor() {  console.log(color); }printColor(); // 輸出 'blue'

雖然上述代碼看著沒有問題，但如果有另一個腳本中編寫如下代碼：

// script2.jsvar color = 'red';printColor(); // 輸出 'red'！

由于 color 變量是在全局作用域內定義的，因此 script2.js 就能夠輕易覆蓋它。為避免這種情況，應盡量在函數作用域內聲明局部變量：

function printColor() {  var color = 'blue'; // 局部變量    console.log(color);}printColor(); // 輸出 'blue'

這樣一來，其他腳本中對全局變量的更改不會影響 printColor 函數。

在全局作用域內隨意聲明變量是一種不良的編程習慣，也被認為是編程反模式。應當盡量將全局變量的使用局限于配置常量，并確保其他變量在盡可能小的作用域內被聲明。

2. DOM 操作的效率問題

在更新 DOM 元素時，建議批量更改，而不是一次只操作一個節點。
請看以下逐個添加列表項的代碼示例：

const ul = document.getElementById('list');for (let i = 0; i < 10; i++) {  const li = document.createElement('li');  li.textContent = i;    ul.appendChild(li);}

更好的做法是先構建一個字符串，然后通過 .innerHTML進行設置：

const ul = document.getElementById('list');let html = '';for (let i = 0; i < 10; i++) {  html += `<li>${i}</li>`; }ul.innerHTML = html;

構建字符串可以減少回流。我們只需一次更新 DOM，而不是十次。

對于多次更新，可以先集中收集所有的更改，然后一次性地應用。或者更好的辦法是使用 DocumentFragment 進行批量節點添加。

3. DOM 操作的過度使用

過于頻繁地更新 DOM 會對性能產生嚴重影響。
以一個聊天應用為例，該應用將每條新消息插入到頁面中。

不推薦的做法：

// 收到新消息const msg = `<div>${messageText}</div>`;chatLog.insertAdjacentHTML('beforeend', msg);

這種方法會在每收到一條新消息時直接進行 DOM 插入。
一個更加高效的方法是限制更新的頻率：

4. 事件委托的缺失

給多個元素分別添加事件監聽器會導致不必要的資源消耗。例如，一個表格，其中每一行都有一個刪除按鈕：

不推薦的實踐：

const rows = document.querySelectorAll('table tr');rows.forEach(row => {  const deleteBtn = row.querySelector('.delete');    deleteBtn.addEventListener('click', handleDelete);});

這種方式為每一個刪除按鈕都單獨設置了一個事件監聽器。更優的做法是采用事件委托機制：

5. 字符串拼接的低效性

在循環中進行字符串拼接會影響性能。
看看下面的代碼：

let html = '';for (let i = 0; i < 10; i++) {  html += '<div>' + i + '</div>';}

創建新字符串需要內存分配。為了提高性能，更有效的做法是使用數組：

const parts = [];for (let i = 0; i < 10; i++) {  parts.push('<div>', i, '</div>');}const html = parts.join('');

使用數組能減少中間字符串的生成。.join() 方法在最后進行一次性的拼接。

對于多次字符串拼接，使用數組的 join 方法。同時，也可以考慮使用模板字面量來嵌入變量。

6. 循環性能未經優化

在 JavaScript 中，循環常常是性能問題的罪魁禍首。一個常見的錯誤是反復獲取數組長度：

不佳實踐：

const items = [/*...*/];for (let i = 0; i < items.length; i++) {  // ...}

重復檢查 .length 會阻礙優化。

優秀實踐：

const items = [/*...*/];const len = items.length;for (let i = 0; i < len; i++) {  // ...}

通過緩存數組長度，我們可以避免在每次迭代中都去計算它，從而提高循環速度。其他優化手段包括從循環中提升不變量，簡化終止條件，以及避免在迭代中進行耗時較長的操作。

7. 不必要的同步操作

JavaScript 的異步能力是其一大優點。但要警惕阻塞式 I/O！

例如：

不佳實踐：

const data = fs.readFileSync('file.json'); // 阻塞！

這會在從磁盤讀取數據時暫停執行。相反，應使用回調或 Promise：

優秀實踐：

fs.readFile('file.json', (err, data) => {  // ...});

現在，在文件讀取過程中，事件循環仍然會繼續執行。對于復雜的流程，async/await 可以簡化異步邏輯。要避免使用同步操作以防止阻塞。

8. 阻塞事件循環

JavaScript 使用單線程的事件循環。阻塞它會導致整個程序暫停執行。常見的阻塞因素包括：

大量的計算任務
同步 I/O
未優化的算法

例如：

function countPrimes(max) {  // 未優化的循環  for (let i = 0; i <= max; i++) {    // ...檢查是否為質數...  }}countPrimes(1000000); // 長時間運行！

這樣的代碼會同步執行，從而阻塞其他事件。為了避免這種情況，你可以：

延遲不必要的任務
批量處理數據
使用 Worker 線程
尋找代碼優化的機會

要確保事件循環可以流暢地運行。定期進行性能分析以捕獲阻塞性代碼。

9. 低效的錯誤處理

在 JavaScript 中，正確地處理錯誤是至關重要的。但要小心性能陷阱！

不佳實踐：

try {  // ...} catch (err) {  console.error(err); // 僅僅是記錄}

這樣雖然捕獲了錯誤，但并未采取糾正措施。未處理的錯誤通常會導致內存泄漏或數據損壞。

更佳實踐：

try {  // ...} catch (err) {  console.error(err);    // 觸發錯誤事件  emitError(err);     // 將變量置為空  obj = null;    // 通知用戶  showErrorNotice();}

單純記錄錯誤是不夠的！要清理殘留數據，通知用戶，并考慮恢復選項。使用像 Sentry 這樣的工具來監控生產環境中的錯誤，并明確處理所有錯誤。

11. 內存泄漏

內存泄漏是當內存被分配但從未被釋放的情況。隨著時間的推移，泄漏會累積并降低性能。

在 JavaScript 中，常見的內存泄漏來源包括：

未清理的事件監聽器
過時的對已刪除 DOM 節點的引用
不再需要的緩存數據
在閉包中累積的狀態

例如：

function processData() {  const data = [];  // 使用閉包累積數據  return function() {    data.push(getData());   }}const processor = processData();// 長時間運行...持續持有對不斷增長的數據數組的引用！

這個數組持續變大，但從未被清理。要修復這個問題，你可以：

使用弱引用
清理事件監聽器
刪除不再需要的引用
限制閉包狀態的大小

持續監控內存使用情況，并關注其增長趨勢。在問題積累之前，主動消除內存泄漏。

12. 過度依賴外部庫

NPM (Node Package Manager) 提供了大量的庫和工具，讓開發者可以選擇和使用，但應避免不加考慮地導入過多的依賴！每增加一個依賴，都會增加包的大小和潛在的攻擊面。

不佳做法：

import _ from 'lodash';import moment from 'moment'; import validator from 'validator';// 等等...

僅為了一些小功能就導入整個庫。更好的做法是按需選擇性地導入所需的函數：

良好做法：

import cloneDeep from 'lodash/cloneDeep';import { format } from 'date-fns';import { isEmail } from 'validator';

只導入你真正需要用到的功能。定期審查依賴，剔除不再使用的庫。保持項目依賴精簡，盡量減少不必要的庫和工具。

13. 沒有充分利用緩存

緩存能夠通過重用之前的結果，以避免重復進行耗時的計算，但人們常常忽視這一點。

不佳做法：

function generateReport() {  // 執行耗時的處理過程  // 以生成報告數據...}generateReport(); // 計算一次generateReport(); // 再次計算！

由于輸入沒有改變，報告完全可以被緩存：

良好做法：

let cachedReport;function generateReport() {  if (cachedReport) {    return cachedReport;  }  cachedReport = // 耗時的處理...  return cachedReport; }

現在，重復的函數調用會很快。其他的緩存策略：

像 Redis 這樣的內存緩存
HTTP 緩存頭
用于客戶端緩存的 LocalStorage
用于資產緩存的 CDN

對適合緩存的數據進行緩存，通常會顯著提升速度！

14. 未優化的數據庫查詢

在與數據庫交互時，低效的查詢會拖慢性能。應避免的問題有：

不佳做法：

// 沒有使用索引db.find({name: 'John', age: 35}); // 查詢不必要的字段db.find({first: 'John', last:'Doe', email:'john@doe.com'}, {first: 1, last: 1});// 過多的獨立查詢for (let id of ids) {  const user = db.find({id});}

這樣做沒有利用到索引、檢索了不需要的字段，還進行了大量不必要的查詢。

良好做法：

// 在 'name' 上使用索引db.find({name: 'John'}).hint({name: 1});// 只獲取 'email' 字段db.find({first: 'John'}, {email: 1}); // 一次查詢獲取多個用戶const users = db.find({  id: {$in: ids} });

分析并解釋查詢計劃，有針對性地創建索引，避免分散的多次查詢，優化與數據存儲的交互。

15. 不恰當的 Promise 錯誤處理

Promises 簡化了異步代碼，但如果拒絕沒有得到處理，就會靜默地失敗。

不佳的做法：

function getUser() {  return fetch('/user')    .then(r => r.json());}getUser();

如果 fetch 拒絕，異常將不會被注意到。

良好的做法：

function getUser() {  return fetch('/user')    .then(r => r.json())    .catch(err => console.error(err));}getUser();

通過鏈接 .catch() 來恰當地處理錯誤。其他建議：

避免 Promise 嵌套地獄
在最頂層處理拒絕
配置未處理拒絕的跟蹤

不要忽視 Promise 的錯誤！

16. 同步的網絡操作

網絡請求應當是異步的。但有時會使用同步版本：

不佳的做法：

const data = http.getSync('http://example.com/data'); // 阻塞！

這將在請求期間暫停事件循環。應使用回調函數：

良好的做法：

http.get('http://example.com/data', res => {  // ...});

或者使用 Promises：

fetch('http://example.com/data')  .then(res => res.json())  .then(data => {    // ...  });

異步的網絡請求允許在等待響應時進行其他處理。避免使用同步網絡調用。

17. 文件 I/O 操作的低效性

同步地讀取/寫入文件會造成阻塞。例如：

糟糕的做法：

const contents = fs.readFileSync('file.txt'); // 阻塞！

這會在磁盤 I/O 期間暫停程序執行。更好的方式是：

良好的做法：

fs.readFile('file.txt', (err, contents) => {  // ...});// 或者使用 Promisefs.promises.readFile('file.txt')   .then(contents => {     // ...     });

這樣做使得在讀取文件期間，事件循環能夠繼續運行。

對于多個文件，應使用流：

function processFiles(files) {  for (let file of files) {    fs.createReadStream(file)      .pipe(/*...*/);  }}

避免使用同步文件操作。應優先使用回調、Promise 和流。

18. 忽略性能分析和優化

性能問題往往在明顯出現之前容易被忽視。然而，優化應該是一個持續的過程！首先，應使用性能分析工具進行測量：

瀏覽器開發者工具時間線
Node.js 分析器
第三方性能分析工具

即便性能看似正常，這些工具也能揭示一些優化的機會：

// profile.jsfunction processOrders(orders) {  orders.forEach(o => {    // ...  });}processOrders(allOrders);

分析器顯示 processOrders 函數耗時 200ms。經過調查，我們發現：

循環沒有優化
內部操作耗時高
存在不必要的工作

我們逐步進行優化，最終版本僅需 5ms！

性能分析是優化的指導方針。應設立性能閾值，并在超過閾值時觸發告警。應經常進行性能測試，并謹慎地進行優化。

19. 不必要的代碼重復

代碼重復不僅影響維護性，還降低了優化空間?？紤]以下例子：

function userStats(user) {  const name = user.name;  const email = user.email;    // ...邏輯...}function orderStats(order) {  const name = order.customerName;  const email = order.customerEmail;  // ...邏輯... }

這里的信息提取邏輯是重復的。我們進行重構：

function getCustomerInfo(data) {  return {    name: data.name,     email: data.email  };}function userStats(user) {  const { name, email } = getCustomerInfo(user);    // ...邏輯...}function orderStats(order) {  const { name, email } = getCustomerInfo(order);  // ...邏輯...}

現在，相同的邏輯只定義了一次。其他可行的修復措施包括：

提取實用函數
創建輔助類
利用模塊實現重用性

盡量避免代碼重復，這樣既能提高代碼質量，也能提供更多優化的機會。

結論

優化 JavaScript 應用性能是一個持續迭代的任務。通過掌握高效的編程方法和不斷地進行性能評估，能夠明顯提升網站的運行速度。

特別需要關注的幾個核心方面包括：降低 DOM 的修改頻率、運用異步技術、避免阻塞性操作、精簡依賴、利用數據緩存，以及消除冗余代碼。

隨著專注度和實踐經驗的不斷積累，你將能有效地定位到性能瓶頸，并針對特定業務場景進行有針對性的優化。這樣一來，你將構建出更快、更簡潔和響應更敏捷的 Web 應用，從而贏得用戶的青睞。

總之，在性能優化的路上，不能有絲毫的大意。遵循這些優化建議，你會發現你的 JavaScript 代碼執行速度得到了顯著提升。

原文標題：Is Your Code Slow?: Avoid These 19 Common JavaScript and Node.js Mistakes，作者：JSDevJournal

本文鏈接：http://www.www897cc.com/showinfo-26-16729-0.html代碼速度慢？避免這 19 種常見的 JavaScript 和 Node.js 錯誤

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com

上一篇：了不起的Unicode

下一篇： Golang 中的 Strconv 包詳解，看這篇就夠了

標簽：

熱門焦點

直屏旗艦來了 iQOO 12和K70 Pro同臺競技

旗艦機基本上使用的都是雙曲面屏幕，這就讓很多喜歡直屏的愛好者在苦等一款直屏旗艦，這次，你們等到了。據博主數碼閑聊站帶來的最新爆料稱，Redmi下代旗艦K70 Pro和iQOO 12兩款手
小米平板5 Pro 12.4簡評：多專多能兼顧影音娛樂的大屏利器

疫情帶來了網課，網課盤活了安卓平板，安卓平板市場雖然中途停滯了幾年，但好的一點就是停滯的這幾年行業又有了新的發展方向，例如超窄邊框、高刷新率、多攝鏡頭組合等，這就讓安卓
6月iOS設備性能榜：M2穩居榜首 A系列只能等一手3nm來救

沒有新品發布，自然iOS設備性能榜的上榜設備就沒有什么更替，僅僅只有跑分變化而產生的排名變動，畢竟蘋果新品的發布節奏就是這樣的，一年下來也就幾個移動端新品，不會像安卓廠商，一
從 Pulsar Client 的原理到它的監控面板

背景前段時間業務團隊偶爾會碰到一些 Pulsar 使用的問題，比如消息阻塞不消費了、生產者消息發送緩慢等各種問題。雖然我們有個監控頁面可以根據 topic 維度查看他的發送狀態，
不容錯過的MSBuild技巧，必備用法詳解和實踐指南

一、MSBuild簡介MSBuild是一種基于XML的構建引擎，用于在.NET Framework和.NET Core應用程序中自動化構建過程。它是Visual Studio的構建引擎，可在命令行或其他構建工具中使用
Python異步IO編程的進程/線程通信實現

這篇文章再講3種方式，同時講4中進程間通信的方式一、 Python 中線程間通信的實現方式共享變量共享變量是多個線程可以共同訪問的變量。在Python中，可以使用threading模塊中的L
三星顯示已開始為AR設備研發硅基LED微顯示屏

7月18日消息，據外媒報道，隨著蘋果首款頭顯產品Vision Pro在6月份正式推出，AR/VR/MR等頭顯產品也就將成為各大公司下一個重要的競爭領域，對顯示屏這一關
iQOO 11S屏幕細節公布：首發三星2K E6全感屏安卓最好的直屏手機

日前iQOO手機官方宣布，新一代電競旗艦iQOO 11S將會在7月4日19:00正式與大家見面。隨著發布時間的日益臨近，官方關于該機的預熱也更加密集，截至目前已
OPPO K11采用全方位護眼屏：三大護眼能力減輕視覺疲勞

日前OPPO官方宣布，全新的OPPO K11將于7月25日正式發布，將主打旗艦影像，和同檔位競品相比，其最大的賣點就是將配備索尼IMX890主攝，堪稱是2000檔位影像表

代碼速度慢？避免這 19 種常見的 JavaScript 和 Node.js 錯誤

1. 變量聲明與作用域的不恰當使用

2. DOM 操作的效率問題

3. DOM 操作的過度使用

不推薦的做法：

推薦的做法：

4. 事件委托的缺失

不推薦的實踐：

推薦的實踐：

5. 字符串拼接的低效性

6. 循環性能未經優化

不佳實踐：

7. 不必要的同步操作

不佳實踐：

優秀實踐：

8. 阻塞事件循環

9. 低效的錯誤處理

不佳實踐：

更佳實踐：

11. 內存泄漏

12. 過度依賴外部庫

不佳做法：

良好做法：

13. 沒有充分利用緩存

不佳做法：

良好做法：

14. 未優化的數據庫查詢

不佳做法：

良好做法：

15. 不恰當的 Promise 錯誤處理

不佳的做法：

16. 同步的網絡操作

不佳的做法：

良好的做法：

17. 文件 I/O 操作的低效性

糟糕的做法：

良好的做法：

18. 忽略性能分析和優化

19. 不必要的代碼重復

結論

最新推薦

猜你喜歡

熱門推薦

相關資訊

代碼速度慢？避免這 19 種常見的 JavaScript 和 Node.js 錯誤