SuperAPI AI 工具集

arc-webgl-performance

前端与建站

查看项目

更新于 10-16 08:26

技能介绍

用途

arc-webgl-performance 用于对浏览器中持续渲染的 3D 场景进行性能分析与优化,目标是把渲染性能变成可验收的标准。它适用于使用 Three.js、WebGL、Canvas 或其他持续渲染 3D 场景的应用,在添加或调试相关功能时使用。核心原则是:在保持视觉行为不变的前提下,减少主线程工作、GPU 驱动停顿、着色器拓扑变化、纹理上传以及不必要的稳态渲染。

主要能力

该技能提供了一套系统化的性能优化方法,包括:

  • 在修改代码前检查渲染器、场景图、失效路径、worker 边界和基准测试工具。
  • 定义可测量的交互与指标窗口,区分触发、首个有意义帧、长任务窗口以及稳态/暂停窗口。
  • 使用 performance.mark/performance.measure 对状态重建、场景构建、几何/材质/环/标签创建、worker 响应处理与纹理上传设置、着色器预热启动与就绪、首次渲染与后续最大渲染、首个有意义帧及 GPU/程序计数诊断等阶段进行归因。
  • 优先削减高置信度成本,例如从 compileAsync 中排除隐藏场景分支、仅预热活跃材质拓扑、延迟默认关闭资源、将确定性程序化光栅化移入模块 worker、复用不可变几何/材质资源、共享着色器拓扑。
  • 验证行为与资源归属,包括暂停和隐藏/离屏帧停止、无过期 worker 结果影响当前场景、切换可选层时几何/三角形数量符合预期且无资源泄漏、重命名和仅展示性编辑不重建烘焙贴图、着色器/程序计数与首渲染时间在预算内、控制台/页面错误为零。
  • 将可执行的性能限制存入项目的性能预算来源,包括交互、长任务、任务时间、帧率、暂停工作、包大小、错误以及稳定拓扑指标(如过渡新增着色器程序)的绝对限制。

使用方式

该技能要求遵循一套必需的工作流程:

  1. 定义被测量的交互:命名确切的过渡和指标窗口,记录触发、首个有意义帧、长任务窗口和稳态/暂停窗口。在编辑前,用重复运行采集同浏览器基线,保持机器、视口、设备缩放因子、CPU 节流、场景内容和浏览器启动模式不变,使用中位数但保留单个样本。
  2. 优化前先归因:用 performance.mark/performance.measure 对可疑路径进行插桩,比较长任务起始偏移与阶段测量。
  3. 削减最高置信度成本:优先选择不改变场景可见结果的改动,如排除隐藏场景分支、延迟默认关闭资源、将确定性程序化光栅化移入 worker、复用不可变资源。
  4. 验证行为与资源归属:运行项目的类型检查、lint、单元测试、构建、包大小检查及相关 Playwright/浏览器测试,并额外验证暂停/隐藏帧停止、无过期 worker 结果、可选层切换行为、重命名不重建贴图、着色器/程序计数与首渲染时间在预算内、控制台错误为零。
  5. 将护栏与功能一同保留:在项目性能预算来源中存储可执行限制,更新实现计划、进度日志、项目代理指南和性能结果。

迭代期间运行单样本冒烟基准,交接前运行三次中位数。在同一环境比较前后结果。当运行间差异大于表观改进时,视为未证实。

适用场景

适用于使用 Three.js、WebGL、Canvas 或其他持续渲染 3D 场景的浏览器应用,在添加或调试性能相关功能时使用。特别适合需要将渲染性能作为验收标准、需要系统化归因和优化主线程工作、GPU 驱动停顿、着色器拓扑、纹理上传及稳态渲染的场景。

限制

资料中未提供关于该技能的具体平台限制、收费模式、价格或效果保证等信息。该技能强调不隐藏工作、不削弱预算、不将工作移到页面启动来规避基准测试。如果选择空闲预热,需将其启动和空闲成本作为单独验收标准测量。对于托管 CI,仅当硬件无法满足开发者机器绝对限制时,才使用文档化的运行器配置,并保留同运行器相对比较与噪声下限。