# 策展 · X (Twitter) 🔥🔥🔥

> 📖 本站完整內容索引（documentation index）：[llms.txt](/llms.txt)

> 作者：Yifeng "Evan" Wang (@ewind_dev) · 平台：X (Twitter) · 日期：2026-07-07

> 原始來源：https://x.com/ewind_dev/status/2073954581017698454

## 中文摘要

Yifeng Wang 發布 PocketJS 框架讓低記憶體硬體運行網頁介面。

**核心突破與技術架構**
開發者 Yifeng "Evan" Wang 透過「Fable」的輔助，做出了 PocketJS 這套跨平台 UI 框架。該專案將 QuickJS 移植至僅有 32MB 記憶體的 Sony PSP 掌機，並結合標準版 SolidJS 與 Vue Vapor，配合編譯期的 Tailwind 樣式引擎，在僅使用 8MB 記憶體的極限環境下，實現了 60fps 的流暢動畫表現。

![](https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/68208605ed3344c7.jpg)
> 把 JavaScript 執行環境整合進 PSP 工具鏈、並在模擬器上跑起貪食蛇遊戲的開發紀錄。

**開發歷程與 AI 協作**
PocketJS 的誕生源於 Yifeng "Evan" Wang 五年前嘗試的「PSP-JS」專案。當年他雖已成功編譯 QuickJS，但始終無法解決初始化過程中的崩潰問題而擱置。此次在 Claude 的協助下，透過解決三個關鍵 bug，成功點亮螢幕並完成開發，展現了 AI 在突破個人技術極限上的應用價值。

**硬體適配與效能表現**
PocketJS 專為硬體資源極度受限的環境設計，其效能優勢如下：
- 框架支援：針對 React 在低階硬體上無法運行 JS_Eval 的問題，PocketJS 選擇優先支援 SolidJS 與 Vue Vapor 模式，確保在 16ms 的幀預算內達到流暢體驗。
- 實際應用：在 Sony PSP 的實測中，系統介面包含通知中心、設定選單、遊戲庫與音樂播放器，均能維持 60fps 的高水準表現。
- 系統監控：透過「Mission Control」頁面顯示，該框架在運行時 CPU 佔用率約 42%、GPU 佔用率 71%，記憶體（RAM）使用率約 63%，證明了其在「裸金屬（Bare Metal）」環境下運行現代化網頁技術的可行性。

![](https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/33770651a160c5c0.jpg)
> 在 PPSSPP 模擬器環境下，Solid 效能表現最優，而 Vue Vapor 在幀工作量（avg_work_us）上顯著優於原生 Vue，且兩者皆能流暢運行，而 React 則因無法運行而未列入。

**開發體驗與未來展望**
PocketJS 不僅追求極致的硬體效能，同時也強調對開發者的友善度。該框架提供最符合 Agent 需求的開發體驗，並能在任何效能高於 PSP 的硬體上，以最低的效能開銷渲染出相容現代網頁標準的 UI。

<video src="https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/1783395149724-7ymohurb.mp4" poster="https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/77fdcd73753e2380.jpg" controls playsinline preload="metadata" style="max-width:100%;height:auto;display:block;margin:1rem 0"></video>
> 一名使用者在 Sony PSP 掌機上展示名為「PocketJS」的開發框架介面與效能監控功能。

更多詳細資訊與體驗可參考官方網站：[PocketJS](https://pocketjs.dev)

## 媒體內容

**在 PPSSPP 模擬器環境下，Solid 效能表現最優，而 Vue Vapor 在幀工作量（avg_work_us）上顯著優於原生 Vue，且兩者皆能流暢運行，而 React 則因無法運行而未列入。**

**數據表（1）跨 Demo 幾何平均值 (Cross-demo geometric means)**

|   | Vue Vapor | Vue | Solid |
| --- | --- | --- | --- |
| JS eval / startup (eval_us) | 2323 ms | 1643 ms | 666 ms |
| boot to first frame (boot_to_frame0_us) | 2438 ms | 1797 ms | 777 ms |
| frame JS callback (avg_js_us) | 402 us | 336 us | 252 us |
| promise/jobs drain (avg_jobs_us) | 1692 us | 26600 us | near 0 us |
| UI tick (avg_tick_us) | 2.64 ms | 2.63 ms | 395 us |
| draw (avg_draw_us) | 6.42 ms | 6.26 ms | 6.05 ms |
| render submit (avg_render_us) | 9.22 ms | 9.02 ms | 8.13 ms |
| total frame work (avg_work_us) | 23.4 ms | 59.6 ms | 16.0 ms |
| worst frame work (max_work_us) | 99.5 ms | 205 ms | 41.7 ms |
| PPSSPP wall time (host_wall_ms) | 471 ms | 687 ms | 318 ms |
| JS bundle size (bundle_bytes) | 135 KB | 90 KB | 37 KB |
| DCPAK asset pack (dcpak_bytes) | 199 KB | 199 KB | 199 KB |

**數據表（2）單一 Demo 總幀工作量 (Per-demo total frame work (avg_work_us))**

|   | Vue Vapor | Vue | Solid |
| --- | --- | --- | --- |
| hero | 16.7 ms | 90.8 ms | 15.1 ms |
| cards | 19.4 ms | 20.3 ms | 18.6 ms |
| stats | 43.9 ms | 143.6 ms | 20.2 ms |
| library | 14.4 ms | 32.8 ms | 7.5 ms |
| settings | 24.7 ms | 27.8 ms | 22.8 ms |
| notifications | 18.4 ms | 93.1 ms | 15.9 ms |
| music | 41.4 ms | 118.4 ms | 17.2 ms |

**一名使用者在 Sony PSP 掌機上展示名為「PocketJS」的開發框架介面與效能監控功能。**

**影片中的 Prompt 與操作**

操作步驟：

1. @00:00 使用方向鍵瀏覽主選單。
2. @00:04 進入 Feature Cards 頁面查看模組細節。
3. @00:09 切換至圖庫選單。
4. @00:12 查看效能監控數據。
5. @00:15 瀏覽遊戲庫並查看遊戲資訊。
6. @00:24 切換至音樂播放介面。
7. @00:32 查看通知清單。
8. @00:37 進入設定頁面調整亮度與主題。
9. @00:49 查看系統監控數據。

## 標籤

開源專案, Web, 硬體, PocketJS, SolidJS, Vue