自研框架躋身全球 JS 框架榜單，排名緊隨 React、Angular 之后！
前言
終于實現了一個重要目標！我獨立研發的 JavaScript 框架 Strve，最近發布了重大版本 6.0.2。距離上次大版本發布已經接近兩個月，期間進行了大量的優化，使得框架性能和穩定性都得到了大幅度的提升。在上次的大版本更新中，成功實現了對 JSX 語法的全面支持，使得 Strve 在代碼智能提示和代碼格式化方面更加友好，進一步提高了開發效率。
介紹
相信有些小伙伴沒有聽說過 Strve 到底是什么，那我這里就大體介紹一下。
Strve 是一個可以將字符串轉換為視圖（用戶界面）的 JavaScript 庫。Strve 不僅易于使用，而且可以靈活地拆解不同的代碼塊。使用模板字符串開發用戶界面，主要是利用 JavaScript 的能力，只關注 JavaScript 文件。Strve 又是一個易用性的 JavaScript 框架，它提供了很多實用的功能與生態工具。
我們可以通過一些簡單的示例來了解 Strve 的使用方法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Strve.js</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/strve-js@6.0.2/dist/strve.full.prod.js"></script>
<script>
const { html, setData, createApp } = Strve;
const state = {
count: 0,
};
function add() {
setData(() => {
state.count++;
});
}
function App() {
return html`<h1 onClick=${add}>${state.count}</h1>`;
}
const app = createApp(App);
app.mount('#app');
</script>
</body>
</html>在上述代碼中，我們通過引入 Strve 庫，并使用 createApp 方法創建了一個 App 組件，然后通過 mount 方法掛載到頁面上，這里的 App 組件就是通過模板字符串來定義的。這樣就可以在 JS 代碼中編寫用戶界面，是不是很方便呢？我們發現，在模板字符串中，我們使用 ${} 來引用數據，并且使用 onClick 方法來綁定事件。這樣就可以實現一個計數器的功能。
除了這種簡單的示例，Strve 還支持很多復雜的功能，我們可以使用 JSX 語法來編寫組件，也可以使用函數式組件來編寫組件，還可以使用組件來編寫組件，甚至可以編寫一些自定義的組件。
如果想了解更多關于 Strve 的信息，稍后可以到文章末尾處查閱官方文檔。
性能評估
我們既然發布了 Strve，那么肯定需要對其性能進行評估，我們評估的工具就用js-framework-benchmark 。js-framework-benchmark 是什么？我們這里就簡單介紹下 js-framework-benchmark，它是一個用于比較 JavaScript 框架性能的項目。它旨在通過執行一系列基準測試來評估不同框架在各種場景下的性能表現。這些基準測試包括渲染大量數據、更新數據、處理復雜的 UI 組件等。通過運行這些基準測試，可以比較不同框架在各種方面的性能優劣，并幫助開發人員選擇最適合其需求的框架。js-framework-benchmark 項目提供了一個包含多個流行 JavaScript 框架的基準測試套件。這些框架包括 Angular、React、Vue 等。每個框架都會在相同的測試場景下運行，然后記錄下執行時間和內存使用情況等性能指標。通過比較這些指標，可以得出不同框架的性能差異。這個項目的目標是幫助開發人員了解不同 JavaScript 框架的性能特點，以便在選擇框架時能夠做出更加明智的決策。同時，它也可以促進框架開發者之間的競爭，推動框架的不斷改進和優化。
在評估之前，我們必須要了解 js-framework-benchmark 中有兩種模式。一種是 keyed，另一種是 non-keyed。在 js-framework-benchmark 中，"keyed" 模式是指通過給數據項分配一個唯一標識符作為 "key" 屬性，從而實現數據項與 DOM 節點之間的一對一關系。當數據發生變化時，與之相關聯的 DOM 節點也會相應更新。而 non-keyed 模式是指當數據項發生變化時，可能會修改之前與其他數據項關聯的 DOM 節點。
因為 Strve 支持keyed模式，所以我們將使用此模式來評估 Strve 的性能。
對以下操作進行了基準測試：
- 創建行：頁面加載后創建 1,000 行的持續時間（無預熱）。
- 替換所有行：替換表中所有 1,000 行的持續時間（5 次預熱迭代）。
- 部分更新：對于具有 10,000 行的表，每 10 行更新一次文本（進行 5 次預熱迭代）。
- 選擇行：響應單擊該行而突出顯示該行的持續時間。（5 次預熱迭代）。
- 交換行：在包含 1,000 行的表中交換 2 行的時間。（5 次預熱迭代）。
- 刪除行：刪除具有 1,000 行的表的行的持續時間。（5 次預熱迭代）。
- 創建多行：創建 10,000 行的持續時間（無預熱）
- 將行追加到大型表：在包含 10,000 行的表中添加 1,000 行的持續時間（無預熱）。
- 清除行：清除填充有 10,000 行的表的持續時間。（無熱身）
- 就緒內存：頁面加載后的內存使用情況。
- 運行內存：添加 1,000 行后的內存使用情況。
- 更新內存：1000 行的表點擊 5 次更新后的內存使用情況。
- 替換內存：點擊 5 次創建 1000 行后的內存使用情況。
- 重復清除內存：創建并清除 1,000 行 5 次后的內存使用情況。
- 更新內存：1000 行的表點擊 5 次更新后的內存使用情況。
- 啟動時間：加載和解析 javascript 代碼以及渲染頁面的持續時間。
- 持續交互：燈塔指標 TimeToConstantlyInteractive：悲觀 TTI - 當 CPU 和網絡都非?？臻e時。（不再有超過 50 毫秒的 CPU 任務）
- 腳本啟動時間：燈塔指標 ScriptBootUpTtime：解析/編譯/評估所有頁面腳本所需的總毫秒數
- 主線程工作成本：燈塔指標 MainThreadWorkCost：在主線程上工作所花費的總時間包括樣式/布局等。
- 總字節權重：燈塔指標 TotalByteWeight：加載到頁面中的所有資源的網絡傳輸成本（壓縮后）。
對于所有基準測試，都會測量持續時間，包括渲染時間。
因為js-framework-benchmark是一個自動化測試的工具，只需要符合標準的代碼就可以進行測試。Strve 支持 JSX 語法，所以我們將使用 JSX 語法來編寫測試代碼。
import { setData, createApp } from 'strve-js';
import { buildData } from './data.js';
let selected;
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>
{rows.map((item) => (
<tr class={item.id === selected ? 'danger' : ''} data-label={item.label} key={item.id}>
<td class='col-md-1'>{item.id}</td>
<td class='col-md-4'>
<a onClick={() => select(item.id)}>{item.label}</a>
</td>
<td class='col-md-1'>
<a onClick={() => remove(item.id)}>
<span class='glyphicon glyphicon-remove' aria-hidden='true'></span>
</a>
</td>
<td class='col-md-6'></td>
</tr>
))}
</tbody>
);
}
function MainBody() {
return (
<fragment>
<div class='jumbotron'>
<div class='row'>
<div class='col-md-6'>
<h1>Strve-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>
</fragment>
);
}
createApp(() => MainBody()).mount('#main');以下頁面就是將進行基準測試的頁面：
圖片
我們大體看下測試過程，我們將使用動圖來展示頁面效果，這樣會覺得更加直觀。
動圖
最終，Strve 通過了壓力測試！
圖片
基準測試結果
既然我們通過測試，我們就需要提交到js-framework-benchmark官方項目中，進行綜合評估，與全球其他框架進行比較。
我們提交的 PR 在 2023 年 9 月 18 號被作者合并了。
圖片
在接下來的時間里，作者進行了一系列的測試。最終，Chrome 118 版本于上周發布，并在 GitHub 上公布了官方的測試結果。
圖片
我們打開下面的網址，看下 Strve 的官方測試結果：
https://krausest.github.io/js-framework-benchmark/2023/table_chrome_118.0.5993.70.html
經過查詢，全球 JavaScript 框架榜單中共有 142 個框架。
性能測試基準分為三類：
- 持續時間
- 啟動指標
- 內存分配
【持續時間】
在此測試基準中，Strve 平均值 1.42，排名第 90 位。
React、Angular 和 Vue，平均值分別為1.40、1.38 和 1.20，分別排名第 85 位、第 83 位和第 51 位。
平均值越小，排名則越靠前。顏色越綠代表越優。
持續時間
【啟動指標】
在此測試基準中，Strve 平均值 1.07。
React、Angular 和 Vue，平均值分別為 1.68、1.80 和 1.30。
平均值越小，排名則越靠前。顏色越綠代表越優。
啟動指標
【內存分配】
在此測試基準中，Strve 平均值 1.33。
React、Angular 和 Vue，平均值分別為 2.46、2.82 和 1.86。
平均值越小，排名則越靠前。顏色越綠代表越優。
內存分配
新特性
我們在上面的測試中，可以看到 Strve 性能表現非常不錯。
這次我們發布的大版本號為 6.0.2，我們將這個具有里程碑意義的大版本命名為 Strve6，而 “Strve6，從芯出發！” 這個口號正是 Strve6 的核心理念。這一版本象征著我們從底層技術出發，致力于為用戶提供更優質、更高效的開發體驗。
此次版本我們在性能與體驗之間做了權衡。在源碼層面，我們將普通 Diff 算法升級為 雙端 Diff 算法，大大提升了性能。另外，我們在用戶體驗層面也做了很大的改進。
這里，我們提到了雙端 Diff 算法，我們在面試中經常提到這個概念，但是很少用到實際項目中去。那么，為了更好地理解雙端 Diff 算法如何提高性能，我們來看一個關于 Strve 簡單的示例。
我們來遍歷一個數組，并且每次點擊按鈕，往數組頭部中添加一個元素。
【普通 Diff 算法】
<script type="module">
import {
html,
setData,
createApp,
} from 'https://cdn.jsdelivr.net/npm/strve-js@6.0.2/dist/strve.full-esm.js';
const state = {
arr: [1, 2],
count: 3,
};
function useUnshift() {
setData(() => {
state.count++;
state.arr.unshift(state.count);
});
}
function App() {
return html`
<fragment>
<button onClick=${useUnshift}>Unshift</button>
<ul>
${state.arr.map((todo) => html`<li>${todo}</li>`)}
</ul>
</fragment>
`;
}
const app = createApp(App);
app.mount('#app');
</script>我們可以看到右側 DOM 樹，每次點擊按鈕，都會重新渲染整個列表。這樣是肯定耗損瀏覽器性能的。
動圖
【雙端 Diff 算法】
<script type="module">
import {
html,
setData,
createApp,
} from 'https://cdn.jsdelivr.net/npm/strve-js@6.0.2/dist/strve.full-esm.js';
const state = {
arr: [1, 2],
count: 3,
};
function useUnshift() {
setData(() => {
state.count++;
state.arr.unshift(state.count);
});
}
function App() {
return html`
<fragment>
<button onClick=${useUnshift}>Unshift</button>
<ul>
${state.arr.map((todo) => html`<li key=${todo}>${todo}</li>`)}
</ul>
</fragment>
`;
}
const app = createApp(App);
app.mount('#app');
</script>我們可以看到右側 DOM 樹，每次點擊按鈕，僅添加必要的元素，而不是重新渲染整個列表。這是因為我們在每個列表項中添加了 key 屬性，并且這個 key 是唯一的。key 這個特殊的 attribute 主要作為 Strve 的虛擬 DOM 算法提示，在比較新舊節點列表時用于識別 vnode。只要標簽類型與 key 值都相等，就說明當前元素可以被復用。
動圖
熱門話題
文章接近尾聲，讓我們來回顧一下最近社區的幾個熱門話題。
- 為什么要開發這個框架？初衷是什么？
答：其實，我的動機特別簡單，完全受 JSX 語法的影響。剛接觸 JSX 語法的時候，就被它那種魔法深深地吸引住了，可以在 JS 中寫 HTML。所以，我就想我自己可不可以也搞一個類似 JSX 語法的庫或者框架呢！一方面可以鍛煉自己的代碼能力，另一方面體驗開發框架的整個流程，也方便我以后更全面的學習其他框架（Vue.js、React.js 等）。
做自己喜歡的事情是特別有意義的！
- 為什么選擇 Strve 作為框架的名字？
答：Strve 最初定位是可以將字符串轉換為視圖（用戶界面）的 JavaScript 庫，所以是由 String 和 View 兩個單詞縮減組成的新單詞。
- 跟前端熱門框架比較，是想超過它們嗎？
答：不是，我主要是想學習一下前端熱門框架的實現原理，然后自己實現一個框架。有一句話說得好：“只有站在巨人的肩膀上才能望得更遠！”。
- 記得之前也寫過登上框架榜單的文章，這次為什么還要寫？
答：之前，Strve 測評的模式是使用"non-keyed"?，F在，Strve 新的版本支持"keyed"模式，所以，我重新寫了一篇文章，來介紹 Strve 的新特性。
- Strve 6.0.2 版本發布，普通 Diff 算法升級為雙端 Diff 算法，可以簡單講下雙端 Diff 算法的概念嗎？
答：雙端 diff 算法就是頭尾指針向中間移動，分別判斷頭尾節點是否可以復用，如果沒有找到可復用的節點再去遍歷查找對應節點的下標，然后移動。全部處理完之后要對剩下的節點進行批量的新增和刪除。
- Strve 是個 JavaScript 庫還是 JavaScript 框架？
答：首先，我們來看下框架與庫有什么區別？庫更多是一個封裝好的特定的集合，提供給開發者使用，而且是特定于某一方面的集合（方法和函數），庫沒有控制權，控制權在使用者手中，在庫中查詢需要的功能在自己的應用中使用，我們可以從封裝的角度理解庫；框架顧名思義就是一套架構，會基于自身的特點向用戶提供一套相當于叫完整的解決方案，而且控制權的在框架本身，使用者要找框架所規定的某種規范進行開發。Strve 可以是框架，因為 Strve 提供了路由、插件等生態工具；Strve 也可以是庫， 因為 Strve 可以單獨作為一個渲染庫。
- Strve 你還要繼續維護下去嗎？
答：是的，我還會繼續維護下去，因為我也想學習下去，也希望能幫助到更多前端開發者。
關于
Strve 我是從 2021 年下半年開始開發，到現在也快兩年了。在這兩年中，從一個之前只會 調用 API 的碼農，到現在可以獨立開發一個框架，讓我收獲了很多。學習了如何去分析一個框架的實現原理，也學習了如何去設計一個框架。
Strve 源碼倉庫：https://github.com/maomincoding/strve
Strve 中文文檔：https://maomincoding.gitee.io/strve-doc-zh/
如果大家覺得 Strve 還不錯，麻煩幫我點下 Star 吧，謝謝！
