JavaScript 評測代碼運行速度

一、使用 performance.now() API

在 JavaScript 中，可以使用 performance.now() API 來評測代碼的運行速度。該 API 返回當前頁面的高精度時間戳，您可以在代碼執行前後調用它來計算代碼執行所需的時間。

例如：

let t0 = performance.now();

// 執行需要測試的代碼
for (let i = 0; i < 1000000000; i++) {
  // some code
}

let t1 = performance.now();
console.log("Code took " + (t1 - t0) + " milliseconds.");

註意，performance.now() API 只在現代瀏覽器中可用，並且可能會受到其他因素（例如電腦性能和當前頁面的負載）的影響，因此該結果只能作為相對值。

二、使用 console.time() 和 console.timeEnd()

另一種評測 JavaScript 代碼運行速度的方法是使用 console.time() 和 console.timeEnd()。這兩個方法允許您給特定代碼塊計時，併在代碼執行後在控制臺中顯示計時結果。

例如：

console.time("Test code");

// 執行需要測試的代碼
for (let i = 0; i < 1000000000; i++) {
  // some code
}

console.timeEnd("Test code");

 在控制臺中，您將看到類似於以下內容的輸出：

Test code: 824.047119140625 ms

使用 performance.now() API 和使用 console.time() 和 console.timeEnd()這兩種方法都可以快速評測代碼的性能，但這些方法只是大致估算代碼運行速度，而不是精確的性能測量工具。因此，如果需要更精確的評測，可以使用專業的性能分析工具。

三、使用第三方庫

如果需要進行更嚴格的性能測試，您可以使用第三方庫，例如 Benchmark.js 或 JSLitmus。這些庫可以在多次運行代碼的情況下進行測試，並以可讀的方式報告結果，以便更好地評估性能。

例如，使用 Benchmark.js 進行性能測試的代碼可能如下所示：

var suite = new Benchmark.Suite;

// 添加測試用例
suite.add('Test code', function() {
  for (let i = 0; i < 1000000000; i++) {
    // some code
  }
})

// 運行測試用例
.on('cycle', function(event) {
  console.log(String(event.target));
})
.run({ 'async': true });

可以使用各種配置選項，例如指定運行次數、自動運行測試等，以適應需求。通過使用這些庫，可以對代碼的性能進行更精確的評估，並瞭解其在不同瀏覽器和設備環境中的表現。

四、使用瀏覽器開發者工具

例如，如果使用 Chrome 瀏覽器，可以使用 Chrome 開發者工具評測代碼的運行速度。

1. 打開 Chrome 瀏覽器，並打開需要評測的頁面。

2. 單擊瀏覽器的“更多工具”選項卡，然後選擇“開發者工具”。

3. 在開發者工具的“控制台”選項卡中，單擊“Performance”按鈕，以啟動性能分析器。

4. 單擊“開始”按鈕，以開始評測代碼的運行速度。

5. 在瀏覽器控制臺中運行代碼，並觀察分析結果。您可以看到詳細的性能分析報告，其中包括代碼的 CPU 使用情況、記憶體使用情況、幀率等。

如使用 Firefox 瀏覽器，可以使用 Firefox 開發者工具評測代碼的運行速度。Firefox 開發者工具的使用方法類似 Chrome 開發者工具，請參閱 Firefox 開發者工具的文檔以獲取更多信息。

瀏覽器工具是評測 JavaScript 代碼運行速度的非常方便的工具。通過使用它，您可以獲得有關代碼性能的詳細信息，並確保代碼在各種環境中良好運行。

作者：yuzhihui

出處：https://www.cnblogs.com/yuzhihui/p/17104239.html

聲明：歡迎任何形式的轉載，但請務必註明出處！！！