JavaScript性能優化（上）

1. 減少 DOM 操作

減少 DOM 操作是優化 JavaScript 性能的重要方法，因為頻繁的 DOM 操作會導致瀏覽器重繪和重排，從而影響性能。以下是一些具體的策略和技術，可以幫助有效減少 DOM 操作：

1.1. 批量更新 DOM

親切與母體：將多個 DOM 更新合并為一個操作。例如，可以創建一個空的容器，先在內存中構建所有需要的子元素，最后一次性將這個容器添加到主 DOM 樹中。

const fragment = document.createDocumentFragment();  // 假設我們要添加多個元素  
for (let i = 0; i < 100; i++) {  const newElement = document.createElement('div');  newElement.textContent = `Item ${i}`;  fragment.appendChild(newElement);  
}  document.getElementById('container').appendChild(fragment); // 一次性添加

1.2. 使用文檔片段（DocumentFragment）

文檔片段?是一個輕量級的容器，用于存放要添加到 DOM 的元素。使用文檔片段可以避免多次操作 DOM，因為它不會引起瀏覽器的重繪，直到片段被插入到 DOM 中。

const fragment = document.createDocumentFragment();  
// 構建元素  
for (let i = 0; i < 10; i++) {  const div = document.createElement('div');  div.textContent = 'Item ' + i;  fragment.appendChild(div);  
}  document.getElementById('parent').appendChild(fragment); // 插入 DOM

1.3. 最小化 CSS 修改

合并樣式更改：在對樣式進行多次更改時，盡量將這些更改合并進行一次操作，以避免多次計算和重繪。

const element = document.getElementById('myElement');  // 不推薦：多次修改可能會導致多次計算和重繪  
element.style.width = '100px';  
element.style.height = '100px';  
element.style.backgroundColor = 'red';  // 推薦：合并設置  
element.style.cssText = 'width: 100px; height: 100px; background-color: red;';

1.4. 使用 CSS 類切換

類替換：通過添加或刪除 CSS 類來批量應用樣式更改，而不是單獨設置每個樣式屬性。這樣可以提高性能，因為瀏覽器對類的應用通常比對每個屬性的應用更高效。

const element = document.getElementById('myElement');  
element.classList.add('new-style');

1.5. 延遲 DOM 操作

使用?requestAnimationFrame：對于動畫和復雜的布局計算，可以在下一個重繪周期之前推遲 DOM 更改，避免在同一幀中進行多次修改。

requestAnimationFrame(() => {  // 在下一幀中更新 DOM  element.style.transform = 'translateY(100px)';  
});

1.6. 減少不必要的查找

緩存 DOM 查詢結果：如果需要多次訪問同一 DOM 元素，建議將其緩存到變量中，避免重復查詢。

const container = document.getElementById('container');  
// 使用 container 變量替代多次查找  
const items = container.getElementsByTagName('div');

1.7. 使用虛擬 DOM（在框架中）

框架支持：像 React 這樣的前端框架使用虛擬 DOM，把對 DOM 的操作批量合并，優化性能。雖然這種方式不是原生的 JavaScript 優化技術，但了解其原理可以幫助開發者更好地利用這些框架。

1.8.總結

減少 DOM 操作不僅可以提高頁面性能，還能改善用戶體驗。通過批量更新、使用文檔片段、最小化樣式修改以及合理利用緩存等方法，你就可以顯著提升應用的響應速度和執行效率。

2. 使用合適的數據結構

使用合適的數據結構是優化 JavaScript 性能的關鍵之一。選擇合適的數據結構可以提高代碼的執行效率、降低內存使用，甚至改善代碼的可讀性和可維護性。以下是一些常見的數據結構及其適用場景，幫助你在 JavaScript 中做出更好的選擇。

2.1. 數組 (Array)

用途：用于存儲有序的數據集合。
特性：支持按索引訪問，插入和刪除操作相對簡單，但在中間插入或刪除元素時可能較慢，因為需要移動元素。

const arr = [1, 2, 3, 4];  
arr.push(5);        // 添加元素  
arr.splice(2, 1);  // 刪除元素  
console.log(arr);  // 輸出: [1, 2, 4, 5]

2.2. 對象 (Object)

用途：用于存儲鍵值對，不保證鍵的順序。
特性：適合存儲屬性和關系型數據，可以通過對象的屬性快速訪問和修改值。

const person = {  name: 'Alice',  age: 30  
};  
console.log(person.name); // 輸出: Alice  
person.age = 31;          // 修改屬性

2.3. Map

用途：用于存儲鍵值對，支持任意類型的鍵。
特性：與對象相比，Map 保持插入的順序，并且可以更高效地進行查找、添加和刪除操作。

const map = new Map();  
map.set('name', 'Alice');  
map.set('age', 30);  
console.log(map.get('name')); // 輸出: Alice

2.4. Set

用途：用于存儲唯一值的集合。
特性：適合需要去重的場景，支持任意類型的值，且保持插入順序。Set 的內存占用通常比數組要小。

const set = new Set();  
set.add(1);  
set.add(2);  
set.add(2); // 重復的值不會被添加  
console.log(set.has(1)); // 輸出: true

2.5. WeakMap

用途：與 Map 類似，但鍵是弱引用。
特性：適用于需要管理內存的場景，因為當鍵不再被引用時，WeakMap 中能自動清理這些條目。

const weakMap = new WeakMap();  
let obj = {};  
weakMap.set(obj, 'data');  
console.log(weakMap.get(obj)); // 輸出: data  
obj = null;  // obj 不再存在，WeakMap 也能釋放內存

2.6. WeakSet

用途：與 Set 類似，但值是弱引用。
特性：適合存儲需要被垃圾回收的對象，能夠幫助管理內存，提高性能

const weakSet = new WeakSet();  
let obj = {};  
weakSet.add(obj);  
console.log(weakSet.has(obj)); // 輸出: true  
obj = null;  // obj 不再存在，WeakSet 也能釋放內存

2.7. 鏈表 (Linked List) 和自定義數據結構

用途：適合頻繁進行插入和刪除操作的場景。
特性：相較于數組，鏈表在中間插入和刪除元素的效率更高，但隨機訪問性能較差。不常用，但在特定場景下非常有效。

class Node {  constructor(data) {  this.data = data;  this.next = null;  }  
}  class LinkedList {  constructor() {  this.head = null;  }  insert(data) {  const newNode = new Node(data);  newNode.next = this.head;  this.head = newNode; // 頭部插入  }  
}  const list = new LinkedList();  
list.insert(1);  
list.insert(2);

選擇合適的數據結構的考慮因素

操作類型：根據需要進行的操作（如添加、刪除、查找）選擇數據結構。
性能需求：不同數據結構在不同操作下的性能表現會有所不同，選擇適合的可以減少性能瓶頸。
內存使用：在內存使用方面，Set 和 Map 等結構通常更高效，尤其是在處理大量數據時。
語義：選擇有助于理解和維護代碼的結構，使代碼更具可讀性。

2.8.總結

選擇合適的數據結構可以顯著提高 JavaScript 應用的性能。根據具體的使用場景，考慮操作性能、內存效率和代碼可讀性來選擇最適合的數據結構。

3. 減少內存使用

減少內存使用是 JavaScript 性能優化的重要方面，尤其對于需要處理大量數據或運行在資源有限環境中的應用程序等場景。以下是一些減少 JavaScript 中內存使用的具體策略：

3.1. 避免內存泄漏

內存泄漏是指不再需要的對象仍被引用，導致它們無法被垃圾回收。為避免內存泄漏，可以采取以下策略：

解除引用：確保不再使用的對象的引用被解除，特別是在事件處理器中。

function setup() {  const element = document.getElementById('myElement');  element.addEventListener('click', () => {  // 處理點擊事件  });  // 離開時，要移除事件監聽  return () => {  element.removeEventListener('click', handler);  };  
}

使用弱引用：使用?WeakMap?和?WeakSet?來存儲對象，這樣當對象不再被使用時，內存可以自動釋放。

const weakMap = new WeakMap();  function storeData(obj, data) {  weakMap.set(obj, data);  
}  function clearData(obj) {  weakMap.delete(obj); // 解除引用，允許回收  
}

3.2. 限制全局變量

盡量減少全局變量：全局變量在 JavaScript 中生命周期較長，容易導致內存泄漏和命名沖突。可以將變量封裝在函數內部或使用模塊化的方式。

(function() {  const myVariable = 'local value'; // 局部變量  
})(); // 立即執行函數，封閉變量

3.3. 優化數據結構

選擇合適的數據結構：如前所述，使用適當的數據結構（如?Set、Map?等），可以減少不必要的數據存儲，節省內存負擔。
避免不必要的數組和對象：如果只需要存儲簡單類型，盡量避免使用復雜的對象或數組。

3.4. 使用數組和對象的原型

減少重復對象：對于重復使用的對象，可以復用同一個實例，而不是每次都創建新實例。

const sharedInstance = { prop: 'value' };  
const dataArray = [sharedInstance, sharedInstance]; // 復用對象實例

?利用原型鏈：通過方式將方法放在對象的原型上，而不是每個實例中，減少內存占用。

function MyObject() {}  
MyObject.prototype.method = function() {  // 方法實現  
};  const instance1 = new MyObject();  
const instance2 = new MyObject();  
// method 共享而不會重復存儲

3.5. 避免過大的數據集

分頁加載：避免一次加載大量數據，采用分頁或懶加載的方式，以降低內存使用。
優化數據存儲：使用數據壓縮基礎庫（如?lz-string）來減少存儲使用的內存，適合大數據集的場景。

3.6. 控制閉包

限制閉包的使用：閉包會保留其外部環境，確保不被使用的閉包不再引用外部變量。盡量不要在長期存在的數據結構中保存長時間運行的閉包。

function createCounter() {  let count = 0;  return function() {  count++;  return count;  };  
}  const counter = createCounter(); // 適當使用閉包

3.7. 定期清理不再使用的資源

手動清理：對于大型應用程序，能夠手動清理不再需要的對象（如終止數據處理、清除緩存、解除事件監聽等）可以有效降低內存使用。
使用瀏覽器的開發者工具：定期監控內存使用情況，使用 Chrome DevTools 的 Memory 面板分析內存快照，查找潛在的內存泄漏。

3.8. 優化算法和邏輯

避免重復計算：使用緩存或記憶化來保存計算的結果。減少重復計算既能提升性能，也能降低內存使用。

const cache = {};  
function memoizedFunction(arg) {  if (cache[arg]) return cache[arg];  const result = computeHeavy(arg);  cache[arg] = result;  return result;  
}

3.9. 適當關閉連接

關閉不必要的連接：在網絡請求、數據庫連接等場景中，及時關閉連接，以避免不必要的資源占用。

3.10總結

通過執行上述策略，可以有效減少 JavaScript 的內存使用并提升應用的性能。管理內存是優化應用的關鍵，需要持續關注和監控，以確保應用在不同環境下運行良好。

4. 異步編程

異步編程是 JavaScript 中處理任務的一種方式，允許代碼在等待某些操作（如網絡請求、文件讀取、定時器等）完成時繼續執行其他代碼。這種方式能夠提高應用的響應性和性能，使得用戶體驗更加流暢。以下是有關 JavaScript 異步編程的詳細說明。

4.1. 什么是異步編程？

異步編程允許在執行某個操作時不阻塞其他代碼的執行。這意味著您可以在等待某些任務完成時，執行其他任務。常見的異步操作包括：

網絡請求（AJAX）
文件讀取
定時器（setTimeout?和?setInterval）

4.2. 異步編程的傳統方式

在 JavaScript 中，最早的異步編程是通過?回調函數（Callbacks）?來實現的。回調函數是當某個操作完成時調用的函數。

2.1 使用回調

function fetchData(callback) {  setTimeout(() => {  // 模擬異步操作  const data = { message: 'Hello, World!' };  callback(data);  }, 2000); // 2秒后執行回調  
}  fetchData((data) => {  console.log(data.message); // 輸出: Hello, World!  
});

缺點：這種方式容易導致“回調地獄”，代碼結構變得混亂，難以維護。?

4.3. Promise

為了解決回調地獄的問題，JavaScript 引入了?Promise，它表示一個可能在未來某個時間完成的操作。

3.1 使用 Promise

function fetchData() {  return new Promise((resolve, reject) => {  setTimeout(() => {  const data = { message: 'Hello, World!' };  resolve(data); // 任務成功時調用 resolve  }, 2000);  });  
}  fetchData()  .then((data) => {  console.log(data.message); // 輸出: Hello, World!  })  .catch((error) => {  console.error('Error:', error); // 處理錯誤  });

3.2 Promise 的鏈式調用

Promise 支持鏈式調用，可以鏈式處理多個異步操作：

function fetchUser() {  return new Promise((resolve) => {  setTimeout(() => {  resolve({ id: 1, name: 'Alice' });  }, 1000);  });  
}  function fetchPosts(userId) {  return new Promise((resolve) => {  setTimeout(() => {  resolve([  { userId, id: 1, title: 'Post 1' },  { userId, id: 2, title: 'Post 2' },  ]);  }, 1000);  });  
}  fetchUser()  .then((user) => {  console.log('User:', user);  return fetchPosts(user.id); // 獲取用戶的帖子  })  .then((posts) => {  console.log('Posts:', posts);  })  .catch((error) => {  console.error('Error:', error);  });

4.4. async/await 語法

async/await?是基于 Promise 的更簡化的異步編程方法，使代碼更具可讀性。async?修飾函數，使其返回一個 Promise；await?用于等待 Promise 完成。

4.1 使用 async/await

async function fetchData() {  return new Promise((resolve) => {  setTimeout(() => {  resolve({ message: 'Hello, World!' });  }, 2000);  });  
}  async function main() {  const data = await fetchData(); // 等待 Promise 完成  console.log(data.message); // 輸出: Hello, World!  
}  main();

4.5. 錯誤處理

使用 Promise 和 async/await 時，處理異步操作中的錯誤是很重要的。

5.1 用 Promise 處理錯誤

fetchData()  .then((data) => {  console.log(data.message);  })  .catch((error) => {  console.error('Failed to fetch data:', error);  });

5.2 用 async/await 處理錯誤?

async function main() {  try {  const data = await fetchData();  console.log(data.message);  } catch (error) {  console.error('Failed to fetch data:', error);  }  
}  main();

4.6. 并發處理

可以使用?Promise.all?來同時處理多個異步操作。

async function fetchData() {  // 模擬多個異步操作  const userPromise = fetchUser();  const postsPromise = fetchPosts(1);  const [user, posts] = await Promise.all([userPromise, postsPromise]);  console.log('User:', user);  console.log('Posts:', posts);  
}  fetchData();

4.7. 小結

異步編程在 JavaScript 中至關重要，適當地使用回調、Promise 和 async/await 可以提高應用的性能和用戶體驗。每種方法都有其優缺點，選擇合適的異步編程風格可以減少代碼復雜性，提高可讀性。

5. 減少網絡請求

減少網絡請求是優化網頁應用性能的一個重要方面。這不僅能提高加載速度，還能降低服務器負載和用戶的帶寬使用，最終改善用戶體驗。以下是一些減少網絡請求的有效策略和技巧：

5.1. 合并請求

1.1 合并 CSS 和 JavaScript 文件

將多個 CSS 文件合并為一個文件，這樣可以減少請求數量。例如，將所有樣式文件（style1.css、style2.css 等）合并成一個 main.css 文件。
將多個 JavaScript 文件合并為一個文件，如將所有腳本文件（script1.js、script2.js 等）合并成一個 main.js 文件。

<!-- 之前的方式： -->  
<link rel="stylesheet" href="style1.css">  
<link rel="stylesheet" href="style2.css">  
<script src="script1.js"></script>  
<script src="script2.js"></script>  <!-- 合并后： -->  
<link rel="stylesheet" href="main.css">  
<script src="main.js"></script>

1.2 合并圖像

使用 CSS Sprites：將多個小圖像合并為一個大圖像，通過 CSS 背景定位來顯示所需的部分，這樣只需要一個請求來加載所有圖像。

.sprite {  background-image: url('sprite.png');  width: 50px; /* 單個圖像的寬度 */  height: 50px; /* 單個圖像的高度 */  
}  
.icon1 {  background-position: 0 0; /* 第一個圖像的位置 */  
}  
.icon2 {  background-position: -50px 0; /* 第二個圖像的位置 */  
}

5.2. 使用內容分發網絡（CDN）

將靜態資源托管在 CDN 上。CDN 是分布在多個地理位置的服務器網絡，可以更快速地提供用戶所需的靜態資源（如圖像、CSS、JavaScript），從而減少請求延遲并提高加載速度。

5.3. 延遲加載資源

3.1 惰性加載

只在需要時加載資源。用于圖像、視頻等非首次可見的內容，直到用戶滾動到這些元素為止，可以顯著減少初始網絡請求。

<img data-src="image.jpg" class="lazy" alt="Lazy Loaded Image">

const lazyImages = document.querySelectorAll('.lazy');  
const observer = new IntersectionObserver((entries) => {  entries.forEach(entry => {  if (entry.isIntersecting) {  const img = entry.target;  img.src = img.dataset.src; // 設置實際的 src  img.classList.remove('lazy');  observer.unobserve(img); // 停止觀察  }  });  
});  lazyImages.forEach(image => {  observer.observe(image); // 觀察每個懶加載圖像  
});

3.2 使用 Preload

預加載關鍵資源。可以通過?<link rel="preload">?標簽來告訴瀏覽器優先加載重要的資源。

<link rel="preload" href="important-script.js" as="script">

5.4. 緩存策略

利用瀏覽器緩存：通過 HTTP 頭（如?Cache-Control?和?Expires）來配置資源的緩存策略，能夠減少重復請求。

//http
Cache-Control: max-age=3600  // 資源可以被緩存 1 小時

ETag 和 Last-Modified：使用 ETag 和 Last-Modified 頭部，讓瀏覽器在請求資源時能驗證是否可以使用緩存內容。

5.5. 使用合適的請求方法

選擇 GET 和 POST 等的合適方法，對于一些不需要修改服務器狀態的請求，可以使用?GET，這樣可以利用瀏覽器緩存。
簡化請求參數，盡可能減少 URL 中的查詢參數數量，以減少請求大小。

5.6. 避免重復請求?

檢查不會重復發送的請求：在必要時，使用狀態變量來確保請求只有在所需時才會發送。

let isFetching = false;  function fetchData() {  if (isFetching) return;  isFetching = true;  fetch('/api/data')  .then(response => response.json())  .then(data => {  // 處理數據  })  .finally(() => {  isFetching = false; // 請求完成，允許新的請求  });  
}