大家好，我是 CUGGZ，祝大家端午節快樂~

JavaScript 框架數量眾多，那究竟哪個框架速度更快呢？今天就來分享一個開源的 JavaScript 框架性能基準工具：js-framework-benchmark，它通過測量各種常見操作的執行時間、內存占用等來對比不同框架的性能。下面就來看看這個工具是怎么使用的吧！

瀏覽器版本

進入官方測試結果的首頁，可以看到不同瀏覽器版本的測試結果鏈接，從 Chrome 55 版本到最新的 114 版本，該頁面會隨著瀏覽器版本的更新而更新（更新有延遲）。

這里我們選擇最新的版本進行查看：

這個頁面最上方會有一些篩選項，包括框架種類、基準種類、展示模式。

框架種類

這里將 JavaScript 框架分為兩類：

• 基于 key 的實現：通過分配 key 來創建數據和 DOM 元素之間的關聯。如果數據發生變化，具有該 key 的 DOM 元素將更新。因此，在數據數組中插入或刪除元素會導致相應地更改 DOM。
• 非基于 key 的實現：允許重用現有的 DOM 元素。因此，在數據數組中插入或刪除元素可能會在最后一個表行后追加，或者刪除該行，并更新插入或刪除索引后的所有元素的內容。這樣做可能性能更好，但是如果 DOM 狀態在外部被修改可能會導致問題。

下面是 js-framework-benchmark 支持的 JavaScript 框架：

這里提供了全選和全不選按鈕，并支持選擇任意框架，選擇完之后就可以查看結果了：

基準種類

性能測試基準分為三類：

• 持續時間
• 啟動指標
• 內存分配

當選擇完框架之后，就會展示三個表格，分別對應這三類指標。

可以看到，在所有的指標中， solid.js 的平均值都是最低的，性能最好。在最常用的三大前端框架（Vue、React、Angular）中，Vue 的性能最好，React 的性能最差。

（1）持續時間

• create rows：創建行，頁面加載后創建 1000 行的持續時間（無預熱）
• replace all rows：替換所有行，替換表中所有 1000 行所需的時間（5 次預熱循環）。該指標最大的價值就是了解當頁面上的大部分內容發生變化時庫的執行方式。
• partial update：部分更新，對于具有 10000 行的表，每 10 行更新一次文本（進行 5 次預熱循環）。該指標是動畫性能和深層嵌套數據結構開銷等方面的最佳指標。
• select row：選擇行，在單擊行時高亮顯示該行所需的時間（進行 5 次預熱循環）。
• swap rows：交換行，在包含 1000 行的表中交換 2 行的時間（進行 5 次預熱迭代）。
• remove row：刪除行，在包含 1,000 行的表格上移除一行所需的時間（有 5 次預熱迭代），該指標可能變化最少，因為它比庫的任何開銷更多地測試瀏覽器布局變化（因為所有行向上移動）。
• create many rows：創建多行，創建 10000 行所需的時間（沒有預熱），該指標更容易受到內存開銷的影響，并且對于效率較低的庫來說，擴展性會更差。
• append rows to large table：追加行到大型表格，在包含 10000 行的表格上添加 1000 行所需的時間（沒有預熱）。
• clear rows：清空行，清空包含 10000 行的表格所需的時間（沒有預熱），該指標說明了庫清理代碼的成本，內存使用對這個指標的影響很大，因為瀏覽器需要更多的 GC。

（2）內存分配

• ready memory：頁面加載后的內存使用量。頁面上只有幾個按鈕，因此這個內存數字較低，大多數庫在這里表現相似。
• run memory：添加1000行后的內存使用情況。
• Update every 10th row：與性能測試 3 相同，但這次我們看到了執行部分更新的內存開銷。大多數情況下，這是新字符串值的分配，但第一次看到庫動態比較機制的內存開銷。
• Replace Rows：這將 1000 行替換 5 次。這是檢測內存泄漏的一個很好的測試。
• Create/Clear Rows：創建然后清除 1000 行。

（3）啟動指標

• Consistently Interactive：持續交互，一個悲觀的TTI，等待CPU空閑50ms。除非庫很大，否則這里的分數分布不會那么大，而且主要隨著包大小而擴展，但似乎沒有受到影響的 WASM 庫除外（Blazor 除外）。
• Total Kilobyte Weight：總 KB 大小，這衡量了所有資源的總大小，包括用戶代碼、HTML 和 CSS。這很有用，因為它顯示了實際構建大小與包大小之間的差別。

其他框架

該工具除了支持對 JavaScript 框架進行性能基準測試之外，還支持對 Rust 實現的 WebAssembly 庫和框架進行測試，如 wasm-bindgen、stdweb、yew、seed 等。

小結

js-framework-benchmark 的測試結果是相對準確的，因為它是針對同樣的測試樣本和基準測試情境進行比較，可以提供框架之間的相對性能比較。然而，需要注意的是，這個測試結果也只是反映了測試條件下的性能表現。框架實際的性能可能還會受到很多方面的影響。

此外，js-framework-benchmark 測試結果也不應該成為選擇框架的唯一指標。在選擇框架時，還需要考慮框架的生態、開發效率、易用性等多方面因素，而不僅僅是性能表現。

Github：https://github.com/krausest/js-framework-benchmark