我終于成功登上了JS 框架榜單，并且僅落后于 React 4 名！
前言
如期而至，我獨(dú)立開發(fā)的 JavaScript 框架 Strve.js 迎來了一個(gè)大版本5.6.2。此次版本距離上次大版本發(fā)布已經(jīng)接近半年之多，為什么這么長時(shí)間沒有發(fā)布新的大版本呢？主要是研究 Strve.js 如何支持單文件組件，使代碼智能提示、代碼格式化方面更加友好。之前也發(fā)布了 Strve SFC，但是由于其語法規(guī)則的繁瑣以及是在運(yùn)行時(shí)編譯的種種原因，我果斷放棄了這個(gè)方案的繼續(xù)研究。而這次的版本5.6.2成功解決了代碼智能提示、代碼格式化方面友好的問題，另外還增加了很多錦上添花的特性，這些都?xì)w功于我們這次版本成功支持JSX語法。熟悉React的朋友知道，JSX語法非常靈活。 而 Strve.js 一大特性也就是靈活操作代碼塊，這里的代碼塊我們可以理解成函數(shù)，而JSX語法在一定場(chǎng)景下也恰恰滿足了我們這種需求。
那么，我們?nèi)绾卧?Strve 項(xiàng)目中使用JSX語法呢？我們?cè)赟trve項(xiàng)目構(gòu)建工具 CreateStrveApp 預(yù)置了模版，你可以選擇 strve-jsx 或者 strve-jsx-apps 模版即可。我們使用 CreateStrveApp 搭建完 Strve 項(xiàng)目會(huì)發(fā)現(xiàn)，同時(shí)安裝了babelPluginStrve、babelPluginJsxToStrve，這是因?yàn)槲覀冃枰褂?babelPluginJsxToStrve 將 JSX 轉(zhuǎn)換為標(biāo)簽?zāi)０妫笤偈褂胋abelPluginStrve 將標(biāo)簽?zāi)０孓D(zhuǎn)換為 Virtual DOM，進(jìn)而實(shí)現(xiàn)差異化更新視圖。
嘗試
我既然發(fā)布出了一個(gè)大版本，并且個(gè)人還算比較滿意。那么下一步我如何推廣它呢？畢竟毛遂自薦有時(shí)候還是非常有意義的。所以，我打算通過js-framework-benchmark 這個(gè)項(xiàng)目評(píng)估下性能。
js-framework-benchmark 是什么？我們這里就簡單介紹下 js-framework-benchmark，它是一個(gè)用于比較 JavaScript 框架性能的項(xiàng)目。它旨在通過執(zhí)行一系列基準(zhǔn)測(cè)試來評(píng)估不同框架在各種場(chǎng)景下的性能表現(xiàn)。這些基準(zhǔn)測(cè)試包括渲染大量數(shù)據(jù)、更新數(shù)據(jù)、處理復(fù)雜的 UI 組件等。通過運(yùn)行這些基準(zhǔn)測(cè)試，可以比較不同框架在各種方面的性能優(yōu)劣，并幫助開發(fā)人員選擇最適合其需求的框架。js-framework-benchmark 項(xiàng)目提供了一個(gè)包含多個(gè)流行 JavaScript 框架的基準(zhǔn)測(cè)試套件。這些框架包括 Angular、React、Vue.js、Ember.js 等。每個(gè)框架都會(huì)在相同的測(cè)試場(chǎng)景下運(yùn)行，然后記錄下執(zhí)行時(shí)間和內(nèi)存使用情況等性能指標(biāo)。通過比較這些指標(biāo)，可以得出不同框架的性能差異。這個(gè)項(xiàng)目的目標(biāo)是幫助開發(fā)人員了解不同 JavaScript 框架的性能特點(diǎn)，以便在選擇框架時(shí)能夠做出更加明智的決策。同時(shí)，它也可以促進(jìn)框架開發(fā)者之間的競(jìng)爭(zhēng)，推動(dòng)框架的不斷改進(jìn)和優(yōu)化。
那么，我們就抱著試試的心態(tài)去運(yùn)行下這個(gè)項(xiàng)目。
測(cè)試
我們進(jìn)入js-framework-benchmark Github主頁，然后 clone 下這個(gè)項(xiàng)目。
git clone https://github.com/krausest/js-framework-benchmark.git然后，我們 clone 到本地之后，打開 README.md 文件找到如何評(píng)估框架。大體瀏覽之后，我們得出的結(jié)論是：通過使用自己的框架完成js-framework-benchmark規(guī)定的練習(xí)項(xiàng)目。
那么，我們就照著其他框架已經(jīng)開發(fā)完成的示例進(jìn)行開發(fā)吧！在開發(fā)之前，我們必須要了解js-framework-benchmark 中有兩種模式。一種是keyed，另一種是non-keyed。在 js-framework-benchmark 中，"keyed" 模式是指通過給數(shù)據(jù)項(xiàng)分配一個(gè)唯一標(biāo)識(shí)符作為 "key" 屬性，從而實(shí)現(xiàn)數(shù)據(jù)項(xiàng)與 DOM 節(jié)點(diǎn)之間的一對(duì)一關(guān)系。當(dāng)數(shù)據(jù)發(fā)生變化時(shí)，與之相關(guān)聯(lián)的 DOM 節(jié)點(diǎn)也會(huì)相應(yīng)更新。而 "non-keyed" 模式是指當(dāng)數(shù)據(jù)項(xiàng)發(fā)生變化時(shí)，可能會(huì)修改之前與其他數(shù)據(jù)項(xiàng)關(guān)聯(lián)的 DOM 節(jié)點(diǎn)。因?yàn)?Strve 暫時(shí)沒有類似唯一標(biāo)識(shí)符這種特性，所以我們選擇non-keyed模式。
我們打開項(xiàng)目下/frameworks/non-keyed文件夾，找一個(gè)案例框架看一下它們開發(fā)的項(xiàng)目，我們選擇 Vue 吧！ 我們根據(jù)它開發(fā)的樣例遷移到自己的框架中去。為了測(cè)試新版本，我們將使用JSX語法進(jìn)行開發(fā)。
import { createApp, setData } from "strve-js";
import { buildData } from "./data.js";
let selected = undefined;
let rows = [];
function setRows(update = rows.slice()) {
setData(
() => {
rows = update;
},
{
name: TbodyComponent,
}
);
}
function add() {
const data = rows.concat(buildData(1000));
setData(
() => {
rows = data;
},
{
name: TbodyComponent,
}
);
}
function remove(id) {
rows.splice(
rows.findIndex((d) => d.id === id),
1
);
setRows();
}
function select(id) {
setData(
() => {
selected = +id;
},
{
name: TbodyComponent,
}
);
}
function run() {
setRows(buildData());
selected = undefined;
}
function update() {
for (let i = 0; i < rows.length; i += 10) {
rows[i].label += " !!!";
}
setRows();
}
function runLots() {
setRows(buildData(10000));
selected = undefined;
}
function clear() {
setRows([]);
selected = undefined;
}
function swapRows() {
if (rows.length > 998) {
const d1 = rows[1];
const d998 = rows[998];
rows[1] = d998;
rows[998] = d1;
setRows();
}
}
function TbodyComponent() {
return (
<tbody $key>
{rows.map((item) => (
<tr
class={item.id === selected ? "danger" : ""}
data-label={item.label}
$key
>
<td class="col-md-1" $key>
{item.id}
</td>
<td class="col-md-4">
<a onClick={() => select(item.id)} $key>
{item.label}
</a>
</td>
<td class="col-md-1">
<a onClick={() => remove(item.id)} $key>
<span
class="glyphicon glyphicon-remove"
aria-hidden="true"
></span>
</a>
</td>
<td class="col-md-6"></td>
</tr>
))}
</tbody>
);
}
function MainBody() {
return (
<>
<div class="jumbotron">
<div class="row">
<div class="col-md-6">
<h1>Strve-non-keyed</h1>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-sm-6 smallpad">
<button
type="button"
class="btn btn-primary btn-block"
id="run"
onClick={run}
>
Create 1,000 rows
</button>
</div>
<div class="col-sm-6 smallpad">
<button
type="button"
class="btn btn-primary btn-block"
id="runlots"
onClick={runLots}
>
Create 10,000 rows
</button>
</div>
<div class="col-sm-6 smallpad">
<button
type="button"
class="btn btn-primary btn-block"
id="add"
onClick={add}
>
Append 1,000 rows
</button>
</div>
<div class="col-sm-6 smallpad">
<button
type="button"
class="btn btn-primary btn-block"
id="update"
onClick={update}
>
Update every 10th row
</button>
</div>
<div class="col-sm-6 smallpad">
<button
type="button"
class="btn btn-primary btn-block"
id="clear"
onClick={clear}
>
Clear
</button>
</div>
<div class="col-sm-6 smallpad">
<button
type="button"
class="btn btn-primary btn-block"
id="swaprows"
onClick={swapRows}
>
Swap Rows
</button>
</div>
</div>
</div>
</div>
</div>
<table class="table table-hover table-striped test-data">
<component $name={TbodyComponent.name}>{TbodyComponent()}</component>
</table>
<span
class="preloadicon glyphicon glyphicon-remove"
aria-hidden="true"
></span>
</>
);
}
createApp(() => MainBody()).mount("#main");其實(shí)，我們雖然使用了JSX語法，但是你會(huì)發(fā)現(xiàn)有很多特性并不與JSX語法真正相同，比如我們可以直接使用 class 去表示樣式類名屬性，而不能使用 className 表示。
評(píng)估案例項(xiàng)目開發(fā)完成了，我們下一步就要測(cè)試一下項(xiàng)目是否符合評(píng)估標(biāo)準(zhǔn)。
npm run bench non-keyed/strve
測(cè)試標(biāo)準(zhǔn)包括：
- create rows：創(chuàng)建行，頁面加載后創(chuàng)建 1000 行的持續(xù)時(shí)間（無預(yù)熱）
- replace all rows：替換所有行，替換表中所有 1000 行所需的時(shí)間（5 次預(yù)熱循環(huán)）。該指標(biāo)最大的價(jià)值就是了解當(dāng)頁面上的大部分內(nèi)容發(fā)生變化時(shí)庫的執(zhí)行方式。
- partial update：部分更新，對(duì)于具有 10000 行的表，每 10 行更新一次文本（進(jìn)行 5 次預(yù)熱循環(huán)）。該指標(biāo)是動(dòng)畫性能和深層嵌套數(shù)據(jù)結(jié)構(gòu)開銷等方面的最佳指標(biāo)。
- select row：選擇行，在單擊行時(shí)高亮顯示該行所需的時(shí)間（進(jìn)行 5 次預(yù)熱循環(huán)）。
- swap rows：交換行，在包含 1000 行的表中交換 2 行的時(shí)間（進(jìn)行 5 次預(yù)熱迭代）。
- remove row：刪除行，在包含 1,000 行的表格上移除一行所需的時(shí)間（有 5 次預(yù)熱迭代），該指標(biāo)可能變化最少，因?yàn)樗葞斓娜魏伍_銷更多地測(cè)試瀏覽器布局變化（因?yàn)樗行邢蛏弦苿?dòng)）。
- create many rows：創(chuàng)建多行，創(chuàng)建 10000 行所需的時(shí)間（沒有預(yù)熱），該指標(biāo)更容易受到內(nèi)存開銷的影響，并且對(duì)于效率較低的庫來說，擴(kuò)展性會(huì)更差。
- append rows to large table：追加行到大型表格，在包含 10000 行的表格上添加 1000 行所需的時(shí)間（沒有預(yù)熱）。
- clear rows：清空行，清空包含 10000 行的表格所需的時(shí)間（沒有預(yù)熱），該指標(biāo)說明了庫清理代碼的成本，內(nèi)存使用對(duì)這個(gè)指標(biāo)的影響很大，因?yàn)闉g覽器需要更多的 GC。
最終，Strve 頂住了壓力，通過了測(cè)試。
看到了successful run之后，覺得特別開心！那種成就感是任何事物都難以代替的。
跑分
我們既然通過了測(cè)試，那么下一步我們將與前端兩大框架Vue、React進(jìn)行比較跑分，我們先在我自己本地環(huán)境上跑一下，看一下效果。
性能測(cè)試基準(zhǔn)分為三類：
- 持續(xù)時(shí)間
- 啟動(dòng)指標(biāo)
- 內(nèi)存分配
持續(xù)時(shí)間
啟動(dòng)指標(biāo)
內(nèi)存分配
圖片
總體而言，我感覺還不錯(cuò)，畢竟跟兩個(gè)大哥在比較。到這里我還是覺得不夠，跟其他框架比比呢！
提交
只要框架通過了測(cè)試，并且按照提交PR的規(guī)定提交，是可以被選錄到 js-framework-benchmark 中去的。
好，那我們就去試試！
又一個(gè)比較有成就感的事！提交的PR被作者合并了！
成績單
我迫不及待的去榜單上看下我的排名，會(huì)不會(huì)墊底啊！
因?yàn)闉g覽器版本發(fā)布的時(shí)差問題，暫時(shí) Official results ( 官方結(jié)果 ) 還沒有發(fā)布最新結(jié)果，我們可以先來 Snapshot of the results ( 快照結(jié)果 ) 中查看。
我們打開下方網(wǎng)址就可以看到JS框架的最新榜單了。
https://krausest.github.io/js-framework-benchmark/current.html我們?cè)诔掷m(xù)時(shí)間這個(gè)類別下從后往前找，目前63個(gè)框架我居然排名 50 名，并且大名鼎鼎的 React 排名45名。
我們先不激動(dòng)，我們?cè)倏聪聠?dòng)指標(biāo)類別。Strve 平均分?jǐn)?shù)是1.04，我看了看好幾個(gè)框架分?jǐn)?shù)是1.04。Strve 可以排到前8名。
我們?cè)俜€(wěn)一下，繼續(xù)看內(nèi)存分配這個(gè)類別。Strve 平均分?jǐn)?shù)是1.40，Strve 可以排到前12名。
意義
js-framework-benchmark 的測(cè)試結(jié)果是相對(duì)準(zhǔn)確的，因?yàn)樗轻槍?duì)同樣的測(cè)試樣本和基準(zhǔn)測(cè)試情境進(jìn)行比較，可以提供框架之間的相對(duì)性能比較。然而，需要注意的是，這個(gè)測(cè)試結(jié)果也只是反映了測(cè)試條件下的性能表現(xiàn)。框架實(shí)際的性能可能還會(huì)受到很多方面的影響。 此外，js-framework-benchmark 測(cè)試結(jié)果也不應(yīng)該成為選擇框架的唯一指標(biāo)。在選擇框架時(shí)，還需要考慮框架的生態(tài)、開發(fā)效率、易用性等多方面因素，而不僅僅是性能表現(xiàn)。
雖然，Strve 跟 React 比較是有點(diǎn)招黑，但是不妨這樣想，榜樣的力量是巨大的！只有站在巨人的肩膀上才能望得更遠(yuǎn)！
Strve 要走的路還有很長，入選JS框架榜單使我更加明確了方向。我覺得做自己喜歡做得事情，這樣才會(huì)有意義！
