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），仅供参考