前端UI组件【免费下载链接】fastThe adaptive interface system for modern web experiences.项目地址https://gitcode.com/gh_mirrors/fa/fast点击查看免费下载本篇指南讲解 FAST 项目内置基准测试包sites/benchmarks的完整用法与底层原理它如何通过 Vite 构建场景、用 Playwright 驱动 Chrome、采集 CDP 追踪数据最终生成可交互的 HTML 性能报告。读完你将掌握运行/定制基准测试、理解 Scripting/Layout/Paint 等指标口径、扩展现有场景的全部实操方法。基准测试包定位测什么、为什么值得读源码microsoft/fast-bench是 FAST 仓库中的性能评测工作台目标是量化FAST Element 与 FAST HTML 模板渲染路径CSR 客户端渲染与 SSR 水合两条变体在各典型绑定场景下的开销。它不依赖人工肉眼观察而是用Vite把每个场景构建成静态页面产物落在server/dist用Playwright自动化启动 Chrome逐次加载页面通过CDPChrome DevTools Protocol的Tracing.start采集渲染管线事件解析出脚本执行、布局、样式重算、绘制等分段耗时并计算统计量组装一份自包含、可交互的 HTML 报告results/latest.html。整套流程的编排入口在 sites/benchmarks/src/bench.ts包脚本定义在 sites/benchmarks/package.json你可以在阅读本文的同时对照源码验证每个环节。环境准备与安装运行基准测试前需满足以下前提以当前仓库为准Node.js22.12.0npm10从仓库根目录安装全部依赖依赖采用 npm workspaces 管理npm install包本身的运行依赖集中在 sites/benchmarks/package.jsondependencies: { microsoft/fast-build: ^0.10.0, microsoft/fast-element: ^3.0.3 }其中microsoft/fast-build提供构建期 SSR 渲染用的 WASM 模块microsoft/fast-element是基准场景被测的渲染运行时本体。运行完整基准测试在sites/benchmarks目录下执行npm run benchbench脚本等价于vite build node src/bench.ts见 sites/benchmarks/package.json它会依次完成构建场景Vite 将全部场景编译到server/dist启动静态服务器监听http://localhost:5174见 sites/benchmarks/server/server.mjs端口可用PORT环境变量覆盖运行所有发现到的场景Playwright 驱动 Chrome 逐场景跑完迭代控制台打印统计表每个指标输出 Min/Median/Mean/GeoMean/P95/Max生成交互式 HTML 报告写入results/latest.html。控制迭代次数默认每个基准执行50 次迭代可用环境变量BENCH_ITERATIONS覆盖源码中由 bench.ts 的process.env.BENCH_ITERATIONS ?? 50解析BENCH_ITERATIONS100 npm run bench迭代次数越多统计量尤其是 P95、GeoMean越稳健但总耗时线性增加日常快速验证用默认 50 即可。只跑指定场景把场景名作为参数传给bench脚本参数按子串匹配过滤npm run bench -- basic attr-reflect每个参数只要命中基准名格式为场景/变体如basic/csr即被选中。因此basic会同时匹配basic/csr与basic/hydration也可精确指定单个变体npm run bench -- basic/csr过滤逻辑在 bench.tsprocess.argv.slice(2)中的每个参数与基准名做includes匹配如果没有任何基准被选中进程会打印No benchmarks matched: ...并以非零码退出。从仓库根目录运行若不想切换目录可借助 npm workspace 语法npm run bench -w microsoft/fast-bench一次基准运行内部发生了什么理解npm run bench的完整链路能帮你判断指标是否可信、如何排查异常。对照 bench.ts 源码1. 发现与过滤基准discoverBenchmarks()扫描src/scenarios下每个含子目录的场景目录产出场景/变体形式的路径列表如basic/csr、basic/hydration。2. 启动静态服务器若未运行startServer()以npm start派生子进程waitForServer轮询探测http://localhost:517430 秒内未就绪则抛错。3. 启动浏览器并禁用节流Chrome 以 headless 模式启动并显式传入以下参数bench.ts防止后台节流干扰绘制时序--disable-backgrounding-occluded-windows --disable-renderer-backgrounding --disable-background-timer-throttling --disable-featuresBackForwardCache4. 预热一次每个基准在正式计测前先裸跑一次不开追踪让浏览器完成脚本编译、JIT 热路径、网络资源解析。完成信号是window.__benchmarkDone true。5. 逐迭代计测每次迭代新建独立页面context.newPage()让 Chrome 把每次导航当作全新页面加载从而可靠发出 FCP/LCP 时序事件建立 CDP 会话先Page.enable并提前挂起 FCP 等待逻辑——优先等待Page.lifecycleEvent中的firstContentfulPaint或退而等待 Performance API 的first-contentful-paint条目两者竞争取先到者调用Tracing.start传入类别devtools.timeline,v8.execute,blink.user_timing,loading定义于 trace.ts与sampling-frequency10000page.goto加载场景 URL等待__benchmarkDone等待 FCP 落定后Tracing.end通过Tracing.dataCollected累积原始 trace 事件关闭 CDP 会话与页面进入下一迭代。6. 统计与产出迭代序列交给computeStats与toMetricSeries汇总结果写入时间戳命名的 HTML 文件并将latest.html符号链接指向本次运行bench.ts。每迭代有 30 秒超时保护PER_ITERATION_TIMEOUT页面迟迟未置__benchmarkDone时进程会报错退出避免卡死。项目结构与场景组织源码布局与 README 项目结构一致sites/benchmarks/src/ bench.ts Runner orchestratorPlaywright CDP chart.ts SVG 图表渲染 report.ts HTML 报告组装 trace.ts CDP trace 事件解析与统计 scenarios/ harness.ts 共享基准运行运行时 tree.ts 树形数据生成器 report.css 报告样式内联进输出 report.js 报告交互逻辑内联进输出 index.html 开发服务器落地页 basic/ 场景目录… attr-reflect/ bind-event/ dot-syntax/ ref-slotted/ repeat/ when/每个场景的统一结构仓库中每个场景目录都遵循一致的骨架以 basic 为例scenario/ element.ts 共享元素类定义CSR 与 hydration 共用 template.html f-template 声明式模板hydration 变体使用 csr/ index.html 客户端渲染入口 main.ts CSR 变体脚本 hydration/ index.html SSR 水合入口含 !-- bench-ssr-render -- 占位符 entry.html 水合时被逐节点渲染的 HTML 片段 main.ts 水合变体脚本 state.json 构建期 SSR 渲染使用的初始状态说明从源码结构看README 中所指的 render.ts SSR HTML 生成器 角色实际由 vite.config.ts 的html-transform插件在 Vite 构建期承担——它读取template.html/entry.html/state.json调用microsoft/fast-build的 WASM 模块parse_f_templates、render_entry_with_templates生成 SSR HTML并替换!-- bench-ssr-render --占位符该占位符还支持可选数字参数以覆盖树节点规模如!-- bench-ssr-render 500 --。两个变体csr 与 hydrationCSR 变体index.html只有空的div idcontainermain.ts用命令式模板html标签模板 FASTElement.define在浏览器端挂载元素树然后调用runBenchmark。例如 basic/csr/main.ts 每个树节点document.createElement(basic-bench-element)并注入hello文本。Hydration 变体index.html在容器内放置!-- bench-ssr-render --构建期被插件替换为预渲染的深层嵌套 DOMmain.ts用declarativeTemplate()注册元素、enableHydration()启动水合并在hydration.whenHydrated()完成后打bench-end标记见 basic/hydration/main.ts。被测页面预置的needs-hydration属性见 basic/hydration/entry.html驱动元素进入水合路径。场景详解每个基准在测什么七个场景分别聚焦 FAST 模板系统的一条核心路径CSR 侧使用命令式html模板 APIhydration 侧使用f-template声明式模板语法经microsoft/fast-build的parse_f_templates解析。逐一说明场景被测能力CSR 实现要点源码声明式模板要点template.htmlbasic最小元素挂载FASTElement 空slotbasic/element.tsf-template namebasic-bench-elementattr-reflect属性定义与反射attr、nullableNumberConverter、boolean 模式attr-reflect/element.ts 每节点设置label/count/active{{label}} ({{count}})插值bind-event事件绑定 文本绑定click与count插值bind-event/element.tsclick{handleClick()}、{{count}}dot-syntax深层属性路径绑定user.address.geo.lat等嵌套对象依赖observerMap()扩展dot-syntax/element.ts、dot-syntax/csr/main.ts{{user.name}}、{{user.address.city}}、{{user.address.geo.lat}}ref-slottedref引用绑定与slotted插槽内容观测ref-slotted/element.tsf-ref{heading}、f-slotted{slottedItems}repeat列表重复渲染repeat指令20 个li项目repeat/element.tsf-repeat value{{item in items}}when条件渲染when指令 observable showwhen/element.tsf-when value{{show}}与value{{!show}}此外还有一个all场景sites/benchmarks/src/scenarios/all/element.ts把所有上述元素组合进一个模板中嵌套渲染衡量“全家桶”叠加成本vite.config.ts的scenarioRenders表把七个场景逐一映射到构建期 WASM 渲染函数attr-reflect因状态逐节点变化而使用render_entry_with_templates实时渲染其余场景缓存单条渲染结果。场景共享的测试负荷确定性随机树所有基准都挂在同一棵确定性随机 DOM 树上计测相关代码在 sites/benchmarks/src/scenarios/tree.ts用线性同余生成器LCGNumerical Recipes 常数种子默认4212021生成可复现的随机树保证不同机器/不同版本间结果可比默认配置BENCH_TREE_CONFIG SIZE_PRESETS.m目标节点1000个广度 4–20、深度 4–20其余预设xs/s/l/xl对应 250/500/2000/4000 节点每个树节点包一层div classtree-node depth-N index-N作为真实 DOM 深度/广度上下文对齐tensile-perf的 mount 测试思路挂载运行时runBenchmark(itemRenderer, targetSize)见 sites/benchmarks/src/scenarios/harness.ts在每个节点调用itemRenderer()产出一个被测元素并在performance.mark(bench-start)与mark(bench-end)之间完成整树插入完成信号signalDone()使用performance.measure(bench, bench-start, bench-end)落用户计时并通过requestAnimationFrameMessageChannel的组合确保layout/paint 完成后才置位__benchmarkDone等价于afterframe库的语义这是 trace 能采到异步渲染工作的关键。指标定义与统计口径每次迭代输出以下指标定义见 trace.ts 的TraceMetrics与 README 的指标表指标含义追踪事件来源ScriptingJS 执行EvaluateScript、FunctionCall 等SCRIPTING_EVENTS集合含EvaluateScript、FunctionCall、v8.compile、EventDispatch、TimerFire、FireAnimationFrame等Layout布局计算LayoutStyle Recalc样式重算UpdateLayoutTree、RecalculateStylesPaint绘制、合成、分层Paint、PrePaint、PaintImage、Layerize、CompositeLayersTotal (trace)上述四项之和—User Measurebenchperformance.measure 的时长blink.user_timing类别中的bench异步事件b/e 对或 X 完整事件FCP首次内容绘制相对导航开始firstContentfulPaintdevtools.timelineLCP最大内容绘制相对导航开始largestContentfulPaint::Candidate取最后一个候选DCLDOMContentLoaded相对导航开始MarkDOMContent关键实现细节理解后能准确解读数字时间窗裁剪findBenchmarkRange先寻找bench-start/bench-end用户计时标记回退到benchmeasure把 trace 事件裁剪到该区间layout/style/paint 的结束边界再向后放宽50ms以捕获bench-end之后浏览器异步完成的渲染工作trace.ts。重叠钳制sumCategory只统计与时间窗重叠的完整X相位事件并对重叠部分钳制边界避免把窗外工作计入。导航相对指标extractNavMetrics取bench-start前最后一次navigationStart把 FCP/LCP/DCL 事件时间差转换为毫秒未发出的指标返回-1。毫秒单位trace 事件时间戳以微秒计解析时统一/1000转毫秒。每次迭代产生上述 9 项后汇总统计量为Min、Median、Mean、Geometric Mean、P95、MaxcomputeStats实现于 trace.ts注意 GeoMean 对极小值有1e-9下限保护全部以毫秒计。结果报告解读与交互运行结束后报告输出到results/latest.html符号链接指向最近一次时间戳命名的运行包含叠加折线图每个场景一张所有变体csr、hydration共享坐标轴每个指标一个面板small-multiples 布局chart.ts 实现悬停强调鼠标悬停某变体折线其余变体淡化opacity 0.12配合 12px 宽的隐形热区便于命中chart.ts点击选择点击图例或变体胶囊pill可单选某变体查看其完整统计赢家表Winner table默认视图下每个指标/统计单元格显示数值最低的变体结果并以该变体颜色着色一眼看出谁更快变体钻取通过 report.js 交互控制器点击胶囊后表格切换为该变体全量数据再点一次还原赢家视图。报告是完全自包含的CSS 与 JS 在构建时被内联report.ts 用readFileSync读取report.css/report.js后嵌入嵌入的 JSON 数据块report-config与每节的variant-data驱动前端交互离线也能直接打开分析。报告元信息行会展示基准数、场景数、迭代数与生成时间。开发服务器快速迭代场景如果只想调试场景本身而不跑完整基准使用npm run serve它在http://localhost:5173启动 Vite 开发服务器关闭 HMR 以保持确定性见 vite.config.ts支持热重载落地页 scenarios/index.html 会列出全部场景入口index.html内的!--TOC--占位符在构建/开发时被插件自动替换为场景链接列表。两个脚本都定义在 sites/benchmarks/package.jsonserve: vite --clearScreen false, bench: vite build node src/bench.ts扩展一个新场景的推荐步骤参照现有场景如basic或repeat即可新增评测项在src/scenarios/name/下创建element.ts元素类 命令式模板与template.html同名f-template声明式模板供 hydration 变体使用创建csr/index.htmlmain.tsmain.ts内FASTElement.define后调用runBenchmark(itemRenderer)与hydration/index.html含!-- bench-ssr-render --与!-- f-template --占位符、entry.html、main.ts用declarativeTemplate()enableHydration()、state.json提供初始状态若需要构建期按节点变化状态类似attr-reflect在 vite.config.ts 的scenarioRenders表中登记对应渲染函数运行npm run bench -- name验证再用npm run serve在开发服务器中迭代。由于树生成器、计时标记、trace 解析全部由共享的harness.ts/tree.ts/trace.ts承担新增场景几乎只需写元素定义与两个变体入口即可自动获得全部 9 项指标与交互式报告。赞分享前端UI组件【免费下载链接】fastThe adaptive interface system for modern web experiences.项目地址https://gitcode.com/gh_mirrors/fa/fast点击查看免费下载相关推荐Godot 2D角色动画五步跑通骨骼角色Godot 2D角色动画五步跑通骨骼角色 角色在天上播跑步动作落地后又踉跄两步才停住——如果你见过这种画面说明动画和物理之间断了链。这篇文章围绕 Godo示例工程gsplat 推理渲染基准实战QSO 打包场景、状态化渲染器与 GPU 时延评测gsplat 推理渲染基准实战QSO 打包场景、状态化渲染器与 GPU 时延评测 本文围绕 gsplat 仓库中 推理渲染基准脚本 https://link.人工智能计算机视觉3D渲染图形学高性能计算深度解析Fusion Pixel Font开源多语言像素字体完整解决方案深度解析Fusion Pixel Font开源多语言像素字体完整解决方案 在数字界面设计领域像素字体因其独特的视觉表现力和技术特性在复古游戏开发、嵌入式系开发工具上一篇iTop ITSM平台实战指南从部署到运维的完整解决方案下一篇如何揪出AI幻觉引用Academic Research Skills 四大文献索引交叉验证与引用存在性门控完全指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考