 4MB 的超輕量瀏覽器引擎與桌面運(yùn)行時(shí)：告別臃腫的 Electron)
前言與背景做前端或跨平臺桌面開發(fā)的朋友應(yīng)該苦 Electron 久矣。一個(gè)簡單的 Hello World 打包出來動(dòng)輒 100MB啟動(dòng)先黑屏兩秒日常跑起來吃掉兩三百兆內(nèi)存更是家常便飯。如果直接調(diào)用系統(tǒng)自帶的 WebView又會陷入各平臺渲染行為不一致、底層能力受限的泥潭。為了探究現(xiàn)代瀏覽器內(nèi)核底層的真實(shí)運(yùn)行機(jī)制同時(shí)也為了做一個(gè)真正極端輕量的桌面級運(yùn)行時(shí)我用純 C99 從零寫了一個(gè)輕量級瀏覽器內(nèi)核與桌面應(yīng)用框架 ——TinyFramework。不依賴 Chromium、Webkit也不依賴 Node.js。從最底層的 GPU 上下文、WHATWG HTML5 狀態(tài)機(jī)、CSS 計(jì)算、DOM 樹、布局排版到 JS 引擎集成與 VFS 加密打包全部自研。最終產(chǎn)出的完整二進(jìn)制發(fā)布包體積僅約4MB冷啟動(dòng)耗時(shí)在0.15 秒左右運(yùn)行時(shí)內(nèi)存占用穩(wěn)定在10~20MB。開源倉庫地址https://github.com/tzdwindows/TinyFrameworkGit Clonegit clone [https://github.com/tzdwindows/TinyFramework.git](https://github.com/tzdwindows/TinyFramework.git)架構(gòu)設(shè)計(jì)與核心指標(biāo)TinyFramework 采用單線程主循環(huán) 異步 I/O 線程池模型對外統(tǒng)一暴露簡潔的 C API并支持雙模式自由切換CUSTOM_MINI 模式全自研渲染管線 QuickJS 引擎功能完全可控。NATIVE 模式體積極致敏感時(shí)委托給系統(tǒng)原生 WebView。核心指標(biāo)自研引擎模式 (CUSTOM_MINI)傳統(tǒng) Electron 方案二進(jìn)制打包體積~4 MB(含 JIT、TLS、內(nèi)置字體)120 MB ~ 200 MB冷啟動(dòng)耗時(shí)~0.15 秒1.5 ~ 3.5 秒基礎(chǔ)內(nèi)存開銷10 ~ 20 MB150 ~ 300 MBJS 引擎與執(zhí)行QuickJS (帶基線 JIT SLJIT)V8核心子系統(tǒng)實(shí)現(xiàn)拆解1. GPU 渲染管線與字形系統(tǒng)向量命令緩沖借鑒現(xiàn)代游戲引擎設(shè)計(jì)渲染階段先錄制所有繪制命令幀末統(tǒng)一刷新。通過對材質(zhì)與著色器狀態(tài)預(yù)排序極大減少glUseProgram和glBindTexture的上下文切換開銷。字形與圖集基于stb_truetype實(shí)現(xiàn)動(dòng)態(tài)字形圖集支持多達(dá) 8 級字體回退鏈Fallback Chain。CPU 鏡像合成直接上傳紋理杜絕 GL 回讀造成的管線停頓?？逛忼X與裁剪Scissor 基于 Stencil 緩沖的層疊圓角裁剪配合 16 槽 LRU 漸變光柵化緩存。2. HTML5 解析器與 DOM / 布局引擎標(biāo)準(zhǔn) HTML5 狀態(tài)機(jī)嚴(yán)格遵循 WHATWG 規(guī)范實(shí)現(xiàn) Tokenizer 狀態(tài)機(jī)及插入模式棧完整支持 Adoption Agency Algorithm (AAA) 處理錯(cuò)位嵌套標(biāo)簽與表格 Foster-parenting。增量渲染門控DOM 節(jié)點(diǎn)指針設(shè)計(jì)覆蓋主流前端框架如 Vue 3 / React 18的 vDOM Diff 需求。通過dirty、layout_dirty、paint_dirty三級臟標(biāo)記門控頁面無屬性變化或處于靜態(tài)時(shí)CPU 占用自動(dòng)歸零。流式排版支持 Block 流式布局、Flexbox、Grid 以及基礎(chǔ) Web Components (Shadow DOM / Slots)。3. CSS 屬性計(jì)算與復(fù)雜文本計(jì)算器與變量內(nèi)置 CSS Variables 作用域遞歸解析數(shù)學(xué)計(jì)算引擎完整支持calc()多層嵌套及三角函數(shù)、區(qū)間限制函數(shù)clamp()、min()、max()等。國際化排版純 C 實(shí)現(xiàn) Unicode UAX #9 雙向排版算法Bidi支持阿拉伯語形態(tài)連接Connecting Forms與天城文預(yù)基字重排。4. JS 運(yùn)行時(shí)與 Node 風(fēng)格原生擴(kuò)展腳本引擎內(nèi)嵌 QuickJS 核心開啟基線 JIT 與 SLJIT 機(jī)器碼生成。模塊系統(tǒng)在 JS 端通過 CommonJS 包裝C 端暴露fs、path、os、child_process等原生模塊子進(jìn)程通過非阻塞 Pipe 進(jìn)行事件調(diào)度。WebGL 橋接完整實(shí)現(xiàn) WebGL 1.0/2.0 基礎(chǔ)上下文映射支持索引繪制與零拷貝紋理直接喂入可正常驅(qū)動(dòng) Three.js 核心渲染。5. 開發(fā)者工具與安全性CDP 調(diào)試服務(wù)內(nèi)置 Chrome DevTools Protocol 獨(dú)立服務(wù)默認(rèn)端口 9222開發(fā)者可直接使用 Chrome 瀏覽器的chrome://inspect連接調(diào)試自研 DOM 樹、控制臺輸出及性能分析。ChaCha20-Poly1305 VFS支持將前端代碼預(yù)編譯為 QuickJS 字節(jié)碼并通過 RFC 8439 加密打包為app.pak。運(yùn)行時(shí)僅在內(nèi)存中解密執(zhí)行杜絕明文源碼泄漏。項(xiàng)目代碼骨架項(xiàng)目代碼遵循純 C99 規(guī)范無多余外部臃腫依賴TinyFramework/ ├── include/ # 模塊接口頭文件 (mini_dom.h, mini_renderer.h 等) ├── src/ │ ├── main.c # 運(yùn)行時(shí)主循環(huán)與生命周期管理 │ ├── mini_renderer.c # 向量命令緩沖與 OpenGL 渲染管線 │ ├── mini_dom.c # DOM 樹構(gòu)建與布局引擎 │ ├── mini_css.c # CSS 解析、變量計(jì)算與媒體查詢 │ ├── mini_html5.c # WHATWG 規(guī)范分詞與樹構(gòu)造器 │ └── mini_js_bridge.c # QuickJS 橋接綁定與 WebGL Polyfill ├── libs/ # 第三方微型依賴 (QuickJS, mbedTLS, stb, sljit) ├── CMakeLists.txt # 工程構(gòu)建配置 └── build.py # 自動(dòng)化編譯與加密打包腳本快速編譯與運(yùn)行驗(yàn)證1. 克隆與環(huán)境準(zhǔn)備支持 C99 的編譯器GCC / Clang / MSVCCMake $\ge$ 3.16GLFW 3.4 動(dòng)態(tài)/靜態(tài)庫git clone https://github.com/tzdwindows/TinyFramework.git cd TinyFramework2. CMake 編譯與測試# 生成構(gòu)建工程 (默認(rèn)開啟 JIT、TLS 與 CDP 調(diào)試支持) cmake -B build -S . \ -DGLFW_ROOT/path/to/glfw-3.4 \ -DENABLE_CDPON \ -DMINI_JITON \ -DMINI_TLSON # 編譯生成可執(zhí)行二進(jìn)制 cmake --build build --config Release # 運(yùn)行頁面 ./build/tiny_app.exe src/index.html3. 生產(chǎn)加密打包# 源碼轉(zhuǎn) QuickJS 字節(jié)碼并經(jīng) ChaCha20 加密打包為單文件 python build.py \ --in src/ \ --out dist/ \ --bytecode \ --key 0123456789abcdef0123456789abcdef0123456789abcdef0123456789abcdef \ --jit --jit-codegen --upx總結(jié)與展望手寫瀏覽器引擎并不意味著要完全復(fù)刻 Chromium 千萬行代碼的全部復(fù)雜特性。針對桌面應(yīng)用場景裁剪掉冗余的遺留兼容包袱聚焦于高效的排版算法、輕量級 JS 虛擬機(jī)與精簡渲染器完全可以在4MB的極小空間內(nèi)實(shí)現(xiàn)流暢可靠的 Web 運(yùn)行時(shí)環(huán)境。后續(xù)將繼續(xù)完善 CSS Grid 復(fù)雜軌道排版與 WebAudio 規(guī)范的對齊歡迎大家 Star 與提 PR 交流探討項(xiàng)目開源地址https://github.com/tzdwindows/TinyFramework 【TzdTinyFramework】用純 C99 手搓一個(gè) 4MB 的超輕量瀏覽器引擎與桌面運(yùn)行時(shí)：告別臃腫的 Electron
前言與背景做前端或跨平臺桌面開發(fā)的朋友應(yīng)該苦 Electron 久矣。一個(gè)簡單的 Hello World 打包出來動(dòng)輒 100MB啟動(dòng)先黑屏兩秒日常跑起來吃掉兩三百兆內(nèi)存更是家常便飯。如果直接調(diào)用系統(tǒng)自帶的 WebView又會陷入各平臺渲染行為不一致、底層能力受限的泥潭。為了探究現(xiàn)代瀏覽器內(nèi)核底層的真實(shí)運(yùn)行機(jī)制同時(shí)也為了做一個(gè)真正極端輕量的桌面級運(yùn)行時(shí)我用純 C99 從零寫了一個(gè)輕量級瀏覽器內(nèi)核與桌面應(yīng)用框架 ——TinyFramework。不依賴 Chromium、Webkit也不依賴 Node.js。從最底層的 GPU 上下文、WHATWG HTML5 狀態(tài)機(jī)、CSS 計(jì)算、DOM 樹、布局排版到 JS 引擎集成與 VFS 加密打包全部自研。最終產(chǎn)出的完整二進(jìn)制發(fā)布包體積僅約4MB冷啟動(dòng)耗時(shí)在0.15 秒左右運(yùn)行時(shí)內(nèi)存占用穩(wěn)定在10~20MB。開源倉庫地址https://github.com/tzdwindows/TinyFrameworkGit Clonegit clone [https://github.com/tzdwindows/TinyFramework.git](https://github.com/tzdwindows/TinyFramework.git)架構(gòu)設(shè)計(jì)與核心指標(biāo)TinyFramework 采用單線程主循環(huán) 異步 I/O 線程池模型對外統(tǒng)一暴露簡潔的 C API并支持雙模式自由切換CUSTOM_MINI 模式全自研渲染管線 QuickJS 引擎功能完全可控。NATIVE 模式體積極致敏感時(shí)委托給系統(tǒng)原生 WebView。核心指標(biāo)自研引擎模式 (CUSTOM_MINI)傳統(tǒng) Electron 方案二進(jìn)制打包體積~4 MB(含 JIT、TLS、內(nèi)置字體)120 MB ~ 200 MB冷啟動(dòng)耗時(shí)~0.15 秒1.5 ~ 3.5 秒基礎(chǔ)內(nèi)存開銷10 ~ 20 MB150 ~ 300 MBJS 引擎與執(zhí)行QuickJS (帶基線 JIT SLJIT)V8核心子系統(tǒng)實(shí)現(xiàn)拆解1. GPU 渲染管線與字形系統(tǒng)向量命令緩沖借鑒現(xiàn)代游戲引擎設(shè)計(jì)渲染階段先錄制所有繪制命令幀末統(tǒng)一刷新。通過對材質(zhì)與著色器狀態(tài)預(yù)排序極大減少glUseProgram和glBindTexture的上下文切換開銷。字形與圖集基于stb_truetype實(shí)現(xiàn)動(dòng)態(tài)字形圖集支持多達(dá) 8 級字體回退鏈Fallback Chain。CPU 鏡像合成直接上傳紋理杜絕 GL 回讀造成的管線停頓?？逛忼X與裁剪Scissor 基于 Stencil 緩沖的層疊圓角裁剪配合 16 槽 LRU 漸變光柵化緩存。2. HTML5 解析器與 DOM / 布局引擎標(biāo)準(zhǔn) HTML5 狀態(tài)機(jī)嚴(yán)格遵循 WHATWG 規(guī)范實(shí)現(xiàn) Tokenizer 狀態(tài)機(jī)及插入模式棧完整支持 Adoption Agency Algorithm (AAA) 處理錯(cuò)位嵌套標(biāo)簽與表格 Foster-parenting。增量渲染門控DOM 節(jié)點(diǎn)指針設(shè)計(jì)覆蓋主流前端框架如 Vue 3 / React 18的 vDOM Diff 需求。通過dirty、layout_dirty、paint_dirty三級臟標(biāo)記門控頁面無屬性變化或處于靜態(tài)時(shí)CPU 占用自動(dòng)歸零。流式排版支持 Block 流式布局、Flexbox、Grid 以及基礎(chǔ) Web Components (Shadow DOM / Slots)。3. CSS 屬性計(jì)算與復(fù)雜文本計(jì)算器與變量內(nèi)置 CSS Variables 作用域遞歸解析數(shù)學(xué)計(jì)算引擎完整支持calc()多層嵌套及三角函數(shù)、區(qū)間限制函數(shù)clamp()、min()、max()等。國際化排版純 C 實(shí)現(xiàn) Unicode UAX #9 雙向排版算法Bidi支持阿拉伯語形態(tài)連接Connecting Forms與天城文預(yù)基字重排。4. JS 運(yùn)行時(shí)與 Node 風(fēng)格原生擴(kuò)展腳本引擎內(nèi)嵌 QuickJS 核心開啟基線 JIT 與 SLJIT 機(jī)器碼生成。模塊系統(tǒng)在 JS 端通過 CommonJS 包裝C 端暴露fs、path、os、child_process等原生模塊子進(jìn)程通過非阻塞 Pipe 進(jìn)行事件調(diào)度。WebGL 橋接完整實(shí)現(xiàn) WebGL 1.0/2.0 基礎(chǔ)上下文映射支持索引繪制與零拷貝紋理直接喂入可正常驅(qū)動(dòng) Three.js 核心渲染。5. 開發(fā)者工具與安全性CDP 調(diào)試服務(wù)內(nèi)置 Chrome DevTools Protocol 獨(dú)立服務(wù)默認(rèn)端口 9222開發(fā)者可直接使用 Chrome 瀏覽器的chrome://inspect連接調(diào)試自研 DOM 樹、控制臺輸出及性能分析。ChaCha20-Poly1305 VFS支持將前端代碼預(yù)編譯為 QuickJS 字節(jié)碼并通過 RFC 8439 加密打包為app.pak。運(yùn)行時(shí)僅在內(nèi)存中解密執(zhí)行杜絕明文源碼泄漏。項(xiàng)目代碼骨架項(xiàng)目代碼遵循純 C99 規(guī)范無多余外部臃腫依賴TinyFramework/ ├── include/ # 模塊接口頭文件 (mini_dom.h, mini_renderer.h 等) ├── src/ │ ├── main.c # 運(yùn)行時(shí)主循環(huán)與生命周期管理 │ ├── mini_renderer.c # 向量命令緩沖與 OpenGL 渲染管線 │ ├── mini_dom.c # DOM 樹構(gòu)建與布局引擎 │ ├── mini_css.c # CSS 解析、變量計(jì)算與媒體查詢 │ ├── mini_html5.c # WHATWG 規(guī)范分詞與樹構(gòu)造器 │ └── mini_js_bridge.c # QuickJS 橋接綁定與 WebGL Polyfill ├── libs/ # 第三方微型依賴 (QuickJS, mbedTLS, stb, sljit) ├── CMakeLists.txt # 工程構(gòu)建配置 └── build.py # 自動(dòng)化編譯與加密打包腳本快速編譯與運(yùn)行驗(yàn)證1. 克隆與環(huán)境準(zhǔn)備支持 C99 的編譯器GCC / Clang / MSVCCMake $\ge$ 3.16GLFW 3.4 動(dòng)態(tài)/靜態(tài)庫git clone https://github.com/tzdwindows/TinyFramework.git cd TinyFramework2. CMake 編譯與測試# 生成構(gòu)建工程 (默認(rèn)開啟 JIT、TLS 與 CDP 調(diào)試支持) cmake -B build -S . \ -DGLFW_ROOT/path/to/glfw-3.4 \ -DENABLE_CDPON \ -DMINI_JITON \ -DMINI_TLSON # 編譯生成可執(zhí)行二進(jìn)制 cmake --build build --config Release # 運(yùn)行頁面 ./build/tiny_app.exe src/index.html3. 生產(chǎn)加密打包# 源碼轉(zhuǎn) QuickJS 字節(jié)碼并經(jīng) ChaCha20 加密打包為單文件 python build.py \ --in src/ \ --out dist/ \ --bytecode \ --key 0123456789abcdef0123456789abcdef0123456789abcdef0123456789abcdef \ --jit --jit-codegen --upx總結(jié)與展望手寫瀏覽器引擎并不意味著要完全復(fù)刻 Chromium 千萬行代碼的全部復(fù)雜特性。針對桌面應(yīng)用場景裁剪掉冗余的遺留兼容包袱聚焦于高效的排版算法、輕量級 JS 虛擬機(jī)與精簡渲染器完全可以在4MB的極小空間內(nèi)實(shí)現(xiàn)流暢可靠的 Web 運(yùn)行時(shí)環(huán)境。后續(xù)將繼續(xù)完善 CSS Grid 復(fù)雜軌道排版與 WebAudio 規(guī)范的對齊歡迎大家 Star 與提 PR 交流探討項(xiàng)目開源地址https://github.com/tzdwindows/TinyFramework