Hermes widgets 基准测试全解析:类继承、数组方法与 Map 的引擎性能探针
语言运行时编译器移动开发【免费下载链接】hermesA JavaScript engine optimized for running React Native.项目地址https://gitcode.com/gh_mirrors/hermes/hermes点击查看免费下载导读widgets benchmark 是 Hermes 仓库中一组以组件树渲染与协调reconcile/diff为载荷的基准测试用于衡量 JavaScript 引擎在处理类继承、方法调用、字段查找、数组方法以及Map等常见对象密集型工作负载时的表现。本文以 benchmarks/widgets/README.md 为主干结合仓库内的 Flow 源码、去类型化版本、ES5 降级产物与 C 对照实现完整讲解该基准的目录结构、各变体差异、核心算法与运行方式帮助你理解 Hermes 团队如何用这一组精心构造的测试来观察引擎行为。这个基准在测什么Feature 清单与设计意图根据 benchmarks/widgets/README.mdwidgets benchmark 主要覆盖两类语言特性classes继承inheritance、方法methods、字段查找field lookupsarray methods以及Map。从源码看这些特性被组织成一个模拟 UI 组件树渲染的最小应用Button、Floater、Gltf、Container等 Widget 类通过继承Widget基类实现多态reduceRenderNode用数组与扁平化flatMap操作维护渲染结果Context用字符串拼接生成子树 keyapp_runner.js则用Map与数组的map/filter/includes完成两棵渲染树的差异计算。因此这个基准本质上是对小对象 多态方法 数组/Map 容器操作密集场景的一次高强度压力测试与 React Native 中组件树的实际行为模式高度相似。目录结构总览四种变体与两类子目录仓库 benchmarks/widgets 下的核心目录如下目录说明original/原始 Flow 类型注解版本多模块含import/exportsingle-file/将 original 所有文件拼接成单个文件single-file/cpp/C 对照实现simple-classes/只使用 Flow 类、不含其他复杂类型的简化版本同时几乎每个变体下都存在两类按输出形态划分的子目录/stripped/子目录每个变体都包含存放去除了 Flow 类型注解的 JS可以直接交给不识别 Flow 的引擎如 v8运行/es5/子目录在存在的地方存放降级到 ES5的代码。降级方式有讲究——对单个文件只使用 Babel而对多模块则使用 Webpack见 benchmarks/widgets/README.md。这种同一逻辑、多种形态的布局让开发者可以对比类型注解是否影响引擎行为、ES5 降级是否改变性能特征、C 基线能跑到多快——从而把 JS 引擎自身的开销与算法本身的成本分离开。变体一original——Flow 类型注解的多模块原版benchmarks/widgets/original 是基准的源头所有其他变体都由此派生。它由多个 ES Module 组成模块之间通过import/export连接。核心类层次Widget → Button/Floater/Gltf/Container基类Widget定义了一个抽象契约——reduce(ctx)把自身归约为一个渲染节点默认实现直接抛错要求子类实现ComposedWidget则在reduce中先调用render()取得子 widget 再委托给它的reduce见 widget.js。四个具体 Widget 类定义在 widgets.js 中Button持有num: number字段reduce时构造NumberComponentFloater与Button结构对称的另一个数值型 widgetGltf持有path: string字段reduce时构造StringComponentContainer持有children: Widget[]数组字段reduce时先产出自己的组件再用this.children.map(child RenderNode.createForChild(ctx, child))递归处理所有子 widget。这些类直接体现了基准要压测的字段查找 方法调用 继承多态每次reduce都要读取实例字段、做一次动态分派的方法调用并创建新的组件对象。组件与渲染节点小对象与数组操作的温床components.js 定义了NumberComponent {x: number}、StringComponent {x: string}与联合类型Component NumberComponent | StringComponentrender_node.js 定义RenderNode持有key、id、components数组与children数组用static idCounter生成全局递增 idreduce()通过(this.children || []).flatMap(child child.reduce())把整棵子树拍平成VirtualEntity[]即[number, Component[]]元组数组context.js 定义Context维护key字符串与childCountercreateForChild会用父 key 拼接子 widget 的 key缺省时取child.constructor.name 计数器生成树状唯一 key。值得注意RenderNode.createForChild中ctx参数实际未被使用这种冗余参数也暗示 benchmark 更关注运行开销而非代码优雅性——它刻意制造了大量可被引擎观察的对象分配与方法调用。运行载荷从 10 个 widget 到 25 个 widget 的 diffapp_runner.js 中的runTest是核心载荷它完整模拟了一次组件树更新 协调过程渲染一棵10 个 widget的旧树new TestApp(false).render()→reduce(oldCtx)→reduce()得到旧实体树渲染一棵25 个 widget的新树前 5 个与旧树相同new TestApp(true).render()→reduce(newCtx)用reconcileRenderNode/reconcileChildren按 key 协调新旧树复用以相同 key 存在的旧节点 idoldNode.id用diffTrees对比新旧实体树通过MapmapEntitiesToComponents和数组的map/filter/includes求出创建/删除的实体与组件集合。可以看到Map被用于实体 id → 组件数组的哈希映射includes/filter被反复用于集合差运算——这正是 README 提到的 array methods andMap 特性的落地位置。入口与计时warmup 5000 次迭代main.mjs 提供了标准计时流程先50 次runFullTest(false)预热printDiff为false时跳过树序列化再以Date.now()计时跑5000 次迭代最后打印Date.now() - t1毫秒数与迭代次数。index.js 则把runTest挂到globalThis.runFullTest上而 original/README.md 说明main.js只是main.mjs的副本仅供 Webpack 使用Webpack 对.mjs的处理与 Babel 路径不同。变体二stripped——用 Juno 去除 Flow 类型original/stripped/README.md 解释了去类型版本的来龙去脉这是用脚本strip.sh通过 Juno 完成的转换产物是不含 Flow 注解的 JS以便在 v8 上运行。运行方式原文明确为v8 main.mjs同时该 README 提示用 NodeJS 也可能可以运行但似乎需要把所有文件重命名为.mjs扩展名并同步修改 import 语句中的引用。stripped目录中的 strip.sh 就是类型剥离的复现脚本。由于simple-classes/stripped/与single-file/stripped/同样存在说明有类型 vs 无类型的对比在三种变体下都成立——这为观察 Flow 类型系统及其在 Hermes 中的处理对运行性能的影响提供了直接对照。变体三es5——Babel 与 Webpack 的降级路线/es5/子目录展示了把现代 JS类、模块、flatMap等降级到 ES5 的两种路径单文件场景只用 Babel见 single-file/es5/README.md预生成的产物是widgets.js如需重新生成在该目录执行npm install npm run build其配套 babelrc.json 与 package.json 定义了 Babel 的构建配置与依赖多模块场景用 Webpack见 original/es5 目录其中 webpack.config.js 负责把多模块打包降级产物连同 source mapwidgets.js.map一起输出。对比这两个版本的产物形态单文件 Babel 产物 vs Webpack 打包产物可以评估打包工具对代码体积与运行开销的影响——这也是 README 明确指出的lowering 方式随模块数量而变的工程细节。变体四single-file——拼接单文件与 C 对照拼接规则single-file/README.md 给出单文件的生成方式按能用 Flow 通过类型检查的顺序把original下所有文件拼接在一起并删除所有import/export语句。这与stripped去类型不同——single-file/widgets.js保留了类型注解只是抹掉了模块边界。C 对照实现衡量引擎开销的基线single-file/cpp 提供了三个 C 程序用于建立算法本身的成本基线widgets.cpp忠实翻译 JS 语义用std::vector与std::function模拟数组方法手工实现arrayMap/arrayFilter/arrayIncludes/arrayForEach/arrayConcat用继承NumberComponent/StringComponent继承自带虚函数的Component模拟多态widgets_fast.cpp更宽松的快速版本从命名与widgets_fast_int的差别看放宽了对 JS 语义的严格模拟以换取编译器的优化空间widgets_fast_int.cpp在 fast 基础上把数值组件字段从double换成intint x;进一步贴近整数优化路径。配套 Makefile 定义了 6 个构建目标widgets、widgets_fast、widgets_fast_int各自独立构建以及各自链接libfakemalloc.so的*_with_fakemalloc变体。fakemalloc.cpp是一个用-D_GNU_SOURCE-ldl编译的共享库通过拦截 malloc 相关调用模拟真实分配行为。编译命令统一为c widgets.cpp -o build/widgets -stdc17 -O3 -wmake run会把三个程序各自跑两遍本机一次、fakemalloc一次便于观察 GC/内存分配器对结果的影响。从源码结构看这种JS 原版 / 快速版 / 整数版 × 有无自定义内存分配器的矩阵正是为了把 JS 引擎的解释执行、对象模型与 GC 开销从算法成本中剥离出来单独量化。变体五simple-classes——只保留类的极端简化simple-classes/README.md 说明该版本刻意做了两处简化没有static成员对应 original 中RenderNode.idCounter这类静态字段被去掉或改写没有 tuple 或 object 类型对应 original 中VirtualEntity [number, Component[]]元组与{x: number}对象字面量组件。simple-classes/widgets.js及stripped/widgets.js因此成为纯类 纯数组/Map 方法的最小化场景用于隔离复杂 Flow 类型与元组/对象字面量这一变量观察仅凭类机制本身引擎能跑出怎样的性能特征——它与 original 的对比结果直接回答类型与对象字面量是否是性能瓶颈。如何上手运行与进一步探索综合各 README 与源码运行 widgets 基准的推荐路径如下去类型版本最快验证引擎本身进入 benchmarks/widgets/original/stripped执行v8 main.mjsNodeJS 需先把相关文件改为.mjs扩展名并同步 import 引用Hermes 直接运行Hermes 的 REPL/命令行工具可直接加载original或single-file下的 JS 入口入口通过globalThis.runFullTest暴露计时逻辑在 main.mjs 中默认 50 次预热 5000 次迭代 Date.now()计时ES5 产物复现在 single-file/es5 中执行npm install npm run build重新生成widgets.js多模块 ES5 由 original/es5 的 Webpack 配置负责C 基线在 benchmarks/widgets/single-file/cpp 执行make run先make all亦可对比 6 个二进制产物即可获得算法成本的下界参考。如需把 widgets 放入更大的基准集合可参考 benchmarks/CMakeLists.txt 与 benchmarks 下其他同类负载如raytracer、imgui-demo、sqlite-read它们共享JS 场景 类型化/非类型化变体 C 对照的编排思路Hermes 官方基准运行框架可参考 benchmarks/bench-runner 与 agent-perf 目录中的工具链。小结为什么 widgets 值得单独研读widgets 基准的核心价值在于用一套贴近真实 UI 应用的最小模型同时压测引擎的多个关键子系统类继承与多态分派Widget.reduce动态分派、字段查找与隐藏类实例字段读写、小对象分配组件对象与渲染节点、数组方法map/filter/flatMap/includes/forEach以及Map哈希表。而original / stripped / es5 / single-file / simple-classes / cpp的多维变体矩阵让开发者可以逐步剥离类型注解、模块化、ES5 降级、对象字面量等变量把性能差异精确定位到引擎实现的某一层。对希望深入理解 Hermes 对象模型与 GC 行为的读者来说这是仓库中信息密度极高的起点之一。赞分享语言运行时编译器移动开发【免费下载链接】hermesA JavaScript engine optimized for running React Native.项目地址https://gitcode.com/gh_mirrors/hermes/hermes点击查看免费下载相关推荐多子类继承属性访问基准解析Hermes Static Hermes 类型推断与内联优化的逐步演进多子类继承属性访问基准解析Hermes Static Hermes 类型推断与内联优化的逐步演进 本篇技术指南以 benchmarks/many subcla语言运行时编译器移动开发Galacean Runtime引擎性能基准测试全面解析Galacean Runtime引擎性能基准测试全面解析 引言为什么性能基准测试如此重要 在现代Web 3D应用开发中性能往往是决定用户体验成败的关键因素图形学3D渲染游戏开发超越人类极限Stockfish性能基准测试全解析与引擎对比超越人类极限Stockfish性能基准测试全解析与引擎对比 你是否曾好奇国际象棋引擎是如何在毫秒级时间内评估数百万种走法为什么顶尖引擎能让特级大师也甘拜下人工智能机器学习游戏开发创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考

相关新闻

迪文T5L屏告别SD卡:DGUS II串口下载与在线调试完整实操指南

迪文T5L屏告别SD卡:DGUS II串口下载与在线调试完整实操指南

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/9/24 4:48:27 阅读更多 →
Kubernetes 高可用 etcd 集群部署:基于 kubernetes-handbook 的三节点 TLS 加密集群实战

Kubernetes 高可用 etcd 集群部署:基于 kubernetes-handbook 的三节点 TLS 加密集群实战

教程云原生容器编排 【免费下载链接】kubernetes-handbook Kubernetes 架构与生态:从云原生到 AI 原生基础设施的构建指南 项目地址: https://gitcode.com/gh_mirrors/ku/kubernetes-handbook 点击查看 免费下载 本文基于 kubernetes-handbook 仓库中的…

2026/9/24 4:48:27 阅读更多 →
华为S5700交换机VLAN配置实战:Access、Trunk、Hybrid与排错指南

华为S5700交换机VLAN配置实战:Access、Trunk、Hybrid与排错指南

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/9/24 4:47:27 阅读更多 →

最新新闻

从 Yii 1.1 升级到 Yii 2.0:核心架构差异与迁移实践全指南(Yii 2 Framework)

从 Yii 1.1 升级到 Yii 2.0:核心架构差异与迁移实践全指南(Yii 2 Framework)

后端Web框架 【免费下载链接】yii2 Yii 2: The Fast, Secure and Professional PHP Framework 项目地址: https://gitcode.com/gh_mirrors/yi/yii2 点击查看 免费下载 Yii 2.0 是相对 1.1 完全重写的一代框架,两者在命名空间、对象模型、事件机制、Acti…

2026/9/24 7:06:51 阅读更多 →
案例4.6 image组件:14种显示模式详解与学习笔记

案例4.6 image组件:14种显示模式详解与学习笔记

一、案例概述本案例来自《微信小程序开发》课程,由逄焕刚老师设计,主要演示微信小程序中 image 组件的使用方法和不同显示模式的实现效果。通过本案例的学习,我们可以掌握 image 组件的基础用法、14种显示模式的区别,以及如何通过…

2026/9/24 7:06:50 阅读更多 →
一键部署 acg-faka 发卡系统

一键部署 acg-faka 发卡系统

一条命令,在一台干净的 Linux 服务器上把 acg-faka(异次元店铺系统) 跑起来。脚本会自动装 Docker、拉上游源码、构建应用镜像(nginx PHP-FPM)、拉起 MySQL 与 Redis、顺手修掉一个会让安装向导失败的权限坑&#xff…

2026/9/24 7:06:50 阅读更多 →
OpenLayers 10.2.1 补丁版解析:移除重投影瓦片缓存,修复缺失瓦片问题

OpenLayers 10.2.1 补丁版解析:移除重投影瓦片缓存,修复缺失瓦片问题

前端GIS数据可视化 【免费下载链接】openlayers OpenLayers 项目地址: https://gitcode.com/gh_mirrors/op/openlayers 点击查看 免费下载 OpenLayers 10.2.1 是一个聚焦于修复的补丁版本,核心变更是通过 PR #16221「Get rid of reprojection tile cach…

2026/9/24 7:06:50 阅读更多 →
Manim 渲染故障排查实战指南:video-use manim-video 技能的 Troubleshooting 全解

Manim 渲染故障排查实战指南:video-use manim-video 技能的 Troubleshooting 全解

AI 技能/插件音视频视频处理人工智能 【免费下载链接】video-use Edit videos with coding agents 项目地址: https://gitcode.com/GitHub_Trending/vid/video-use 点击查看 免费下载 导读 本指南以 video-use 仓库中 manim-video 技能的 troubleshooting.md 为骨…

2026/9/24 7:06:50 阅读更多 →
PostGraphile wrapPlans 解析器仿真警告(wpr)深度解析:成因、风险与三种解决方案

PostGraphile wrapPlans 解析器仿真警告(wpr)深度解析:成因、风险与三种解决方案

后端API网关 【免费下载链接】crystal 🔮 Graphiles Crystal Monorepo; home to Grafast, PostGraphile, pg-introspection, pg-sql2 and much more! 项目地址: https://gitcode.com/gh_mirrors/cry/crystal 点击查看 免费下载 本篇文章围绕 PostGraphi…

2026/9/24 7:05:49 阅读更多 →

日新闻

基于YOLOv8的渔船作业监控系统:从环境搭建到边缘部署全流程

基于YOLOv8的渔船作业监控系统:从环境搭建到边缘部署全流程

简介:这是一套面向计算机、人工智能、自动化等专业学生与教师的毕业设计级项目资源,围绕YOLOv8实现渔船作业监控系统,可用于毕设、课程设计、大作业或项目立项演示。压缩包共97个文件,约24.21MB,以70个Python源码文件为…

2026/9/24 0:00:19 阅读更多 →
单细胞注释实战:基于Scanpy的标记基因与参考映射流程解析

单细胞注释实战:基于Scanpy的标记基因与参考映射流程解析

简介:一份基于单细胞RNA测序数据的细胞类型注释算法研究Python毕业设计源码,针对计算机相关专业正在做毕设或需要项目实战的学习者,可用于课程设计与期末大作业。项目代码完整、经导师指导评审通过,可直接运行,覆盖数据…

2026/9/24 0:00:19 阅读更多 →
C#源生成器实战:用增量生成器替代反射,告别AOT崩溃

C#源生成器实战:用增量生成器替代反射,告别AOT崩溃

第一次在项目里被反射卡住,是在一个老旧的WinForms模块里:几十个类依赖PropertyChanged通知,运行时反射读属性、发通知,每次启动慢半拍不说,一上.NET Native/AOT裁剪模式几乎全面崩盘。后来我把这段逻辑全部改成C#源生…

2026/9/24 0:00:19 阅读更多 →

周新闻

Flutter for OpenHarmony游戏卡片渐变背景实战:从原理到性能优化

Flutter for OpenHarmony游戏卡片渐变背景实战:从原理到性能优化

直接铺开项目本身吧。这几个月我一直在折腾一件事:用Flutter给OpenHarmony做一款游戏集合类的App,说白了就是把若干小游戏塞进一个壳里,用统一入口分发。这个方向本身不算新鲜,真正让我花了不少心思的,是首页那堆游戏卡…

2026/9/23 4:55:02 阅读更多 →
Word表格编号全攻略:从列表编号到题注交叉引用

Word表格编号全攻略:从列表编号到题注交叉引用

写Word文档,最让人头疼的往往是那些“看起来不起眼”的小问题。比如表格编号这事:今天在表后面多加了两个空白行,明天给客户交稿前发现整个章节的编号全部错位,光是挨个改序号就能耗掉大半个下午。我前阵子帮人整理一份上百页的技…

2026/9/23 4:49:06 阅读更多 →
从第一个站到第二个站:独立开发者的静态网站选型与落地实践

从第一个站到第二个站:独立开发者的静态网站选型与落地实践

1. 项目概述1.1 核心需求解析做独立开发者这几年,说实话,第一个网站上线的那天晚上我兴奋得没睡着。但等它跑了半年,流量惨淡、功能臃肿、代码自己都懒得看第二遍之后,我才慢慢琢磨明白一个道理:第一个网站是练手&…

2026/9/23 9:53:41 阅读更多 →

月新闻

持续集成 流水线自动化与 声明式交付 实践:原型怎样变成可用功能

持续集成 流水线自动化与 声明式交付 实践:原型怎样变成可用功能

持续集成 流水线自动化与 声明式交付 实践:原型怎样变成可用功能分类:[AI/大模型]细分主题:AI 增强型 CI/CD 流水线自动化与 GitOps 实践:Agent 工作流、工具调用与任务拆解:从原型到生产的验收清单很多团队在尝试用大…

2026/9/23 9:53:40 阅读更多 →
容器编排 生产环境运维与排障实战:复盘记录怎样真正派上用场

容器编排 生产环境运维与排障实战:复盘记录怎样真正派上用场

容器编排 生产环境运维与排障实战:复盘记录怎样真正派上用场分类:[工程技术]细分主题:Kubernetes 生产环境运维与排障实战:可复制的项目复盘模板与决策记录大部分团队的事故复盘报告,最后都变成了躺在 Confluence 或钉…

2026/9/23 9:53:40 阅读更多 →
容器 容器化技术与镜像安全管理:核心链路应该先拆哪一步

容器 容器化技术与镜像安全管理:核心链路应该先拆哪一步

容器 容器化技术与镜像安全管理:核心链路应该先拆哪一步分类:[工程技术]细分主题:Docker 容器化技术与镜像安全管理:核心链路的逐步实现与关键代码取舍面对一个积累了五六年历史包袱的单体架构应用(包含 Web 接口、后台…

2026/9/23 9:53:40 阅读更多 →