【TzdTinyFramework】用纯 C99 手搓一个 4MB 的超轻量浏览器引擎与桌面运行时：告别臃肿的 Electron-北京尧图网络

前言与背景做前端或跨平台桌面开发的朋友应该苦 Electron 久矣。一个简单的 Hello World 打包出来动辄 100MB启动先黑屏两秒日常跑起来吃掉两三百兆内存更是家常便饭。如果直接调用系统自带的 WebView又会陷入各平台渲染行为不一致、底层能力受限的泥潭。为了探究现代浏览器内核底层的真实运行机制同时也为了做一个真正极端轻量的桌面级运行时我用纯 C99 从零写了一个轻量级浏览器内核与桌面应用框架 ——TinyFramework。不依赖 Chromium、Webkit也不依赖 Node.js。从最底层的 GPU 上下文、WHATWG HTML5 状态机、CSS 计算、DOM 树、布局排版到 JS 引擎集成与 VFS 加密打包全部自研。最终产出的完整二进制发布包体积仅约4MB冷启动耗时在0.15 秒左右运行时内存占用稳定在10~20MB。开源仓库地址https://github.com/tzdwindows/TinyFrameworkGit Clonegit clone [https://github.com/tzdwindows/TinyFramework.git](https://github.com/tzdwindows/TinyFramework.git)架构设计与核心指标TinyFramework 采用单线程主循环异步 I/O 线程池模型对外统一暴露简洁的 C API并支持双模式自由切换CUSTOM_MINI 模式全自研渲染管线 QuickJS 引擎功能完全可控。NATIVE 模式体积极致敏感时委托给系统原生 WebView。核心指标自研引擎模式 (CUSTOM_MINI)传统 Electron 方案二进制打包体积~4 MB(含 JIT、TLS、内置字体)120 MB ~ 200 MB冷启动耗时~0.15 秒1.5 ~ 3.5 秒基础内存开销10 ~ 20 MB150 ~ 300 MBJS 引擎与执行QuickJS (带基线 JIT SLJIT)V8核心子系统实现拆解1. GPU 渲染管线与字形系统向量命令缓冲借鉴现代游戏引擎设计渲染阶段先录制所有绘制命令帧末统一刷新。通过对材质与着色器状态预排序极大减少glUseProgram和glBindTexture的上下文切换开销。字形与图集基于stb_truetype实现动态字形图集支持多达 8 级字体回退链Fallback Chain。CPU 镜像合成直接上传纹理杜绝 GL 回读造成的管线停顿。抗锯齿与裁剪Scissor 基于 Stencil 缓冲的层叠圆角裁剪配合 16 槽 LRU 渐变光栅化缓存。2. HTML5 解析器与 DOM / 布局引擎标准 HTML5 状态机严格遵循 WHATWG 规范实现 Tokenizer 状态机及插入模式栈完整支持 Adoption Agency Algorithm (AAA) 处理错位嵌套标签与表格 Foster-parenting。增量渲染门控DOM 节点指针设计覆盖主流前端框架如 Vue 3 / React 18的 vDOM Diff 需求。通过dirty、layout_dirty、paint_dirty三级脏标记门控页面无属性变化或处于静态时CPU 占用自动归零。流式排版支持 Block 流式布局、Flexbox、Grid 以及基础 Web Components (Shadow DOM / Slots)。3. CSS 属性计算与复杂文本计算器与变量内置 CSS Variables 作用域递归解析数学计算引擎完整支持calc()多层嵌套及三角函数、区间限制函数clamp()、min()、max()等。国际化排版纯 C 实现 Unicode UAX #9 双向排版算法Bidi支持阿拉伯语形态连接Connecting Forms与天城文预基字重排。4. JS 运行时与 Node 风格原生扩展脚本引擎内嵌 QuickJS 核心开启基线 JIT 与 SLJIT 机器码生成。模块系统在 JS 端通过 CommonJS 包装C 端暴露fs、path、os、child_process等原生模块子进程通过非阻塞 Pipe 进行事件调度。WebGL 桥接完整实现 WebGL 1.0/2.0 基础上下文映射支持索引绘制与零拷贝纹理直接喂入可正常驱动 Three.js 核心渲染。5. 开发者工具与安全性CDP 调试服务内置 Chrome DevTools Protocol 独立服务默认端口 9222开发者可直接使用 Chrome 浏览器的chrome://inspect连接调试自研 DOM 树、控制台输出及性能分析。ChaCha20-Poly1305 VFS支持将前端代码预编译为 QuickJS 字节码并通过 RFC 8439 加密打包为app.pak。运行时仅在内存中解密执行杜绝明文源码泄漏。项目代码骨架项目代码遵循纯 C99 规范无多余外部臃肿依赖TinyFramework/ ├── include/ # 模块接口头文件 (mini_dom.h, mini_renderer.h 等) ├── src/ │ ├── main.c # 运行时主循环与生命周期管理 │ ├── mini_renderer.c # 向量命令缓冲与 OpenGL 渲染管线 │ ├── mini_dom.c # DOM 树构建与布局引擎 │ ├── mini_css.c # CSS 解析、变量计算与媒体查询 │ ├── mini_html5.c # WHATWG 规范分词与树构造器 │ └── mini_js_bridge.c # QuickJS 桥接绑定与 WebGL Polyfill ├── libs/ # 第三方微型依赖 (QuickJS, mbedTLS, stb, sljit) ├── CMakeLists.txt # 工程构建配置 └── build.py # 自动化编译与加密打包脚本快速编译与运行验证1. 克隆与环境准备支持 C99 的编译器GCC / Clang / MSVCCMake $\ge$ 3.16GLFW 3.4 动态/静态库git clone https://github.com/tzdwindows/TinyFramework.git cd TinyFramework2. CMake 编译与测试# 生成构建工程 (默认开启 JIT、TLS 与 CDP 调试支持) cmake -B build -S . \ -DGLFW_ROOT/path/to/glfw-3.4 \ -DENABLE_CDPON \ -DMINI_JITON \ -DMINI_TLSON # 编译生成可执行二进制 cmake --build build --config Release # 运行页面 ./build/tiny_app.exe src/index.html3. 生产加密打包# 源码转 QuickJS 字节码并经 ChaCha20 加密打包为单文件 python build.py \ --in src/ \ --out dist/ \ --bytecode \ --key 0123456789abcdef0123456789abcdef0123456789abcdef0123456789abcdef \ --jit --jit-codegen --upx总结与展望手写浏览器引擎并不意味着要完全复刻 Chromium 千万行代码的全部复杂特性。针对桌面应用场景裁剪掉冗余的遗留兼容包袱聚焦于高效的排版算法、轻量级 JS 虚拟机与精简渲染器完全可以在4MB的极小空间内实现流畅可靠的 Web 运行时环境。后续将继续完善 CSS Grid 复杂轨道排版与 WebAudio 规范的对齐欢迎大家 Star 与提 PR 交流探讨项目开源地址https://github.com/tzdwindows/TinyFramework

【TzdTinyFramework】用纯 C99 手搓一个 4MB 的超轻量浏览器引擎与桌面运行时：告别臃肿的 Electron

相关推荐

Crawl4AI v0.7.5 深度解析：Docker Hooks 系统、函数式钩子与 HTTPS 链接保留实战

C#集合类型深度解析：从List到并发集合的选型与性能优化

VMware Workstation安装与Ubuntu虚拟机配置保姆级教程

更多资讯

Oracle闪回分层实战：误操作恢复选型、机制与排错

Oracle闪回恢复实战：UNDO、SCN与六种闪回方式

超长上下文、Agentic检索与LLM Wiki：让大模型更聪明地获取知识

Python FTP上传下载进度条与断点续传实战：ftplib+tkinter

带进度条的FTP上传下载实例：断点续传与失败重试封装

动态规划实战：摆动序列与最大子数组和算法解析

今日更新

PLFM_RADAR：从被动告警到主动感知的微服务健康监控系统

SPI隔离设计实战：MAX14431BAEE+与STM32F407工业级应用

数字隔离器如何根治SPI通信地环路干扰：MAX14431与TM4C129实战

本周精选

面向复杂光照与角度的宠物面部识别鲁棒性增强策略

基于DRV8818与STM32的双极步进电机驱动方案实战解析

DRV8818PWPR+PIC18F45K80双极步进电机控制方案实战

本月热门

面向复杂光照与角度的宠物面部识别鲁棒性增强策略

基于DRV8818与STM32的双极步进电机驱动方案实战解析

DRV8818PWPR+PIC18F45K80双极步进电机控制方案实战

读完文章，想聊聊您的网站？