示例工程前端移动开发跨平台【免费下载链接】uni-appA cross-platform framework using Vue.js项目地址https://gitcode.com/gh_mirrors/un/uni-app点击查看免费下载本指南以 docs/api/get-performance.md 为核心结合仓库内uni-getPerformanceUTS 插件的类型定义与 Android 平台实现源码展开。你将掌握uni.getPerformance()的完整调用方式、Performance/PerformanceObserver/PerformanceEntry三类对象的方法与字段语义理解render、navigation等性能指标的类型体系并能够在 uni-app含 uni-app x中落地一套监听性能事件 → 按类型查询 → 缓冲与上报的页面性能采集方案。一、概述什么是 uni.getPerformance()uni.getPerformance()是 uni-app 提供的性能数据采集入口调用后返回一个Performance对象实例。通过该实例开发者可以查询全局缓冲区中已采集的全部性能数据应用启动、页面首次布局、首次渲染、路由跳转等创建全局性能事件监听器PerformanceObserver在性能数据产生时实时回调按指标类型entryType或指标名称name过滤、筛选性能条目调整性能数据缓冲区大小默认缓冲 30 条。它对应 Web 标准中的PerformanceObserver与PerformanceEntry概念但指标类型与字段是面向 uni-app 应用启动与页面路由场景定制的。uni.getPerformance的类型声明可在仓库的 src/uni_modules/uni-getPerformance/utssdk/interface.uts 中查看export interface Uni { getPerformance: () Performance }二、兼容性getPerformance 兼容性| Web | 微信小程序 | Android | iOS | HarmonyOS(VDOM) | HarmonyOS(Vapor) | | :- | :- | :- | :- | :- | :- | | x | 4.41 | 3.91 | 4.25 | 4.61 | x |需要说明两点适用前提Web 端H5与 HarmonyOS(Vapor) 当前不支持uni.getPerformance()调用前建议做条件编译或能力判断。仓库内uni-getPerformance这个 uni_modules 插件仅提供 Android 平台实现源码位于utssdk/app-android/index.uts插件 readme 明确写着仅 Android 平台支持。即若项目为 uni-app x 且运行在 Android 上可直接import { uni-getPerformance }或依赖内置 APIiOS、微信小程序、HarmonyOS(VDOM) 端由各平台宿主环境提供原生能力方法签名与本指南一致如果你需要自定义扩展性能采集可参考该插件结构编写自己的 UTS 插件插件元数据见 package.json类型为type: uts。三、快速上手在 App 启动时创建性能监听仓库自带的演示工程 src/App.uvue 中保留了完整的接入示例位于onLaunch生命周期内默认被注释// 页面性能分析 const performance uni.getPerformance() const observer1: PerformanceObserver performance.createObserver( (entryList: PerformanceObserverEntryList) { console.log(observer1:entryList.getEntries() JSON.stringify(entryList.getEntries())) } ) observer1.observe({ entryTypes: [render, navigation], } as PerformanceObserverOptions)该示例展示了标准三步流程uni.getPerformance()获取Performance实例performance.createObserver(callback)创建全局性能事件监听器observer.observe({ entryTypes: [render, navigation] })开始监听此后每当产生render或navigation类型指标时回调都会收到一个PerformanceObserverEntryList列表对象。四、Performance 对象方法详解uni.getPerformance()返回的Performance实例提供 5 个方法| 方法 | 说明 | | :- | :- | |createObserver(callback): PerformanceObserver| 创建全局性能事件监听器 | |getEntries(): PerformanceEntry[]| 返回当前缓冲区中的所有性能数据 | |getEntriesByType(entryType: string): PerformanceEntry[]| 返回缓冲区中所有entryType为指定值的性能数据 | |getEntriesByName(name: string, entryType: string): PerformanceEntry[]| 返回缓冲区中名称与类型都匹配的性能数据 | |setBufferSize(size: number): void| 设置缓冲区大小默认缓冲 30 条性能数据 |4.1 createObserver(callback)创建全局性能事件监听器。参数| 名称 | 类型 | 必填 | | :- | :- | :- | | callback |(entries: PerformanceObserverEntryList) void| 是 |回调参数PerformanceObserverEntryList是当前批次性能数据的列表对象详见第六节而不是全量缓冲区。4.2 getEntries() / getEntriesByType() / getEntriesByName()这三个查询方法面向全局缓冲区getEntries()取全部数据getEntriesByType(render)只取渲染类指标getEntriesByName(firstRender, render)同时按名称与类型过滤例如精确获取首次渲染指标。从 Android 实现 index.uts 可以看到这三个方法直接透传给内部缓冲列表getEntries(): PerformanceEntry[] { return this._allEntryList.getEntries() } getEntriesByType(entryType: string): PerformanceEntry[] { return this._allEntryList.getEntriesByType(entryType) } getEntriesByName(name: string, entryType: string): PerformanceEntry[] { return this._allEntryList.getEntriesByName(name, entryType) }4.3 setBufferSize(size)设置缓冲区大小默认缓冲 30 条。缓冲区采用先进先出队列策略当缓冲条目数超过设定值时最旧的数据被丢弃。在源码 index.uts 中PerformanceEntryQueue的入队逻辑为enqueue(...do_not_transform_spread: T[]): Int { if (this.length this._queueSize - 1) { this.shift() } return super.push(...do_not_transform_spread) }即入队前若已满先移除队头最旧条目再追加。默认容量常量定义为const PERFORMANCE_BUFFER_SIZE 30若你的页面跳转非常频繁、或需要保留更长时间窗口的数据做分析应调大该值反之若内存敏感可调小。注意调整大小后超出新容量的旧数据会立即被裁剪。五、PerformanceObserver监听与停止监听createObserver返回的PerformanceObserver对象负责管理与性能事件源的连接| 方法 | 说明 | | :- | :- | |observe(options: PerformanceObserverOptions): void| 开始监听 | |disconnect(): void| 停止监听 |5.1 observe(options)optionsPerformanceObserverOptions属性| 名称 | 类型 | 必填 | 说明 | | :- | :- | :- | :- | | buffered | boolean | 否 | 是否先返回缓冲区中的历史数据 | | entryTypes | Arraystring | 否 | 要监听的指标类型列表如[render, navigation]| | type | string | 否 | 要监听的单个指标类型 |三个参数均为可选。在 Android 实现中index.utsobserve的核心行为是observe(options: PerformanceObserverOptions) { if (options?.entryTypes ! null) { this._entryTypes.length 0 this._entryTypes.push(...options.entryTypes!) } if (this._entryTypes.length 0) { this._owner.connect(this) } else { this.disconnect() } }即当指定了entryTypes且非空时把 observer 注册到性能分发中心否则自动断开。这说明监听哪些指标是由entryTypes驱动的——回调中收到的条目会按entryTypes.includes(entryData.entryType)过滤见 index.uts。5.2 disconnect()停止监听并清空该 observer 内部的条目列表之后该 observer 不再接收新的性能数据回调。实现上同时把自己从分发中心的观察者数组中移除disconnect() { this._entryList.clear() this._owner.disconnect(this) }六、PerformanceObserverEntryList回调中的批次列表监听回调收到的是一个PerformanceObserverEntryList对象它代表当前这一批产生的性能数据而非全局缓冲区。它同样提供三个查询方法| 方法 | 说明 | | :- | :- | |getEntries(): PerformanceEntry[]| 返回当前列表中的所有性能数据 | |getEntriesByType(entryType: string): PerformanceEntry[]| 返回当前列表中类型为[entryType]的数据 | |getEntriesByName(name: string, entryType: string): PerformanceEntry[]| 返回当前列表中名称为[name]且类型为[entryType]的数据 |注意与Performance.getEntries()系列的区别Performance上查询的是全量缓冲队列而PerformanceObserverEntryList查询的是本次回调的批次数据。从实现看每次分发回调前列表会被clear()后重新填充index.uts因此回调内获取到的数据不会与上一批混淆。七、PerformanceEntry性能数据条目字段全解无论是缓冲区查询还是监听回调拿到的都是PerformanceEntry[]数组。每个条目的字段如下类型定义见 interface.uts| 名称 | 类型 | 必备 | 描述 | | :- | :- | :- | :- | | entryType | string | 是 | 指标类型render/navigation | | name | string | 是 | 指标名称如firstLayout、firstRender、route、应用启动 | | duration | number | 是 | 耗时 ms。仅对于表示阶段的指标有效 | | startTime | number | 是 | 开始时间不同指标的具体含义会有差异 | | path | string | 否 | 页面路径。仅 render 和 navigation 类型指标有效 | | referrerPath | string | 否 | 页面跳转来源页面路径。仅 route 指标有效 | | pageId | number | 否 | path 对应页面实例 Id随机生成不保证递增。仅 render/navigation 指标有效 | | referrerPageId | number | 否 | referrerPath 对应页面实例 Id随机生成不保证递增。仅 route 指标有效 | | navigationStart | number | 否 | 路由真正响应开始时间。仅 navigation 类型指标有效 | | navigationType | string | 否 | 路由详细类型与路由方法对应。仅 navigation 类型指标有效 | | initDataRecvTime | number | 否 | 首次渲染参数在渲染层收到的时间。仅 firstRender 指标有效 | | viewLayerRenderEndTime | number | 否 | 渲染层执行渲染结束时间。仅 firstRender 指标有效 |7.1 entryType指标类型体系从 Android 实现源码index.uts可以确认当前存在两类entryTypeconst ENTRY_TYPE_RENDER render const ENTRY_TYPE_NAVIGATION navigationrender渲染类指标包含firstLayout页面首次布局对应PerformanceEntryStatusLayout耗时取自innerPage.getFirstPageLayoutDuration()firstRender页面首次渲染对应PerformanceEntryStatusRender耗时取自innerPage.getFirstPageRenderDuration()额外携带initDataRecvTime、viewLayerRenderEndTime两个时间点用于拆解首屏渲染链路。navigation导航类指标代表一次路由跳转的完整耗时对应PerformanceEntryStatusNavigation携带navigationStart、navigationType、path、referrerPath等字段。7.2 name指标名称渲染类firstLayout、firstRender源码中firstPaint已被注释当前未启用导航类应用启动对应APP_LAUNCH常量从dcloudio/uni-runtime导入其余路由跳转统一命名为route见_navigationToName实现。7.3 navigationType路由详细类型navigationType与路由方法一一对应源码中参与判定并创建导航状态机的类型包括APP_LAUNCH应用启动SWITCH_TAB切换 tab 页NAVIGATE_TO普通页面跳转REDIRECT_TO页面重定向NAVIGATE_BACK页面返回这些常量同样来自dcloudio/uni-runtime表明性能采集与路由生命周期深度绑定。八、源码原理性能数据是如何被采集与分发的仓库内uni-getPerformance插件的 Android 实现index.uts是一个值得研读的完整示例其整体架构可分为四层路由/页面钩子层PerformanceImpl构造时注册三个运行时钩子onBeforeRoute(type)→ 创建对应的导航/渲染状态机onBeforeonAfterRoute(type)→ 推进状态机且NAVIGATE_BACK时立即分发onPageReady(page)→ 页面就绪后统一分发。状态机层PerformanceEntryStatus及其子类每个待采集指标是一个状态机状态流转EMPTY → BEFORE → AFTER → READYSTATE_BEFORE记录referrerPath来源页面、startTimeSTATE_AFTER记录path、pageId渲染类在此打点startTimeSTATE_READY计算duration导航类为Date.now() - startTime其中应用启动还会叠加getAppStartDuration()渲染类分别读取getFirstPageLayoutDuration()/getFirstPageRenderDuration()。分配层PerformanceAllocate状态机推进到 READY 后把条目同时推入全局缓冲队列_allEntryList并筛选出符合每个 observerentryTypes的条目填充其批次列表、触发回调。缓冲队列层PerformanceEntryQueue默认容量 30 的 FIFO 队列满则淘汰最旧条目对应setBufferSize的语义。可以推断这套钩子 状态机 分配器 缓冲队列的设计保证了多 observer 共享一份全局缓冲、各自独立过滤与回调也解释了文档中pageId为什么随机生成、不保证递增——它直接取自原生页面实例page.$nativePage!.pageId。九、实战建议采集、查询与上报9.1 监听启动与首屏渲染耗时const performance uni.getPerformance() // 监听渲染与导航类指标 const observer performance.createObserver((entryList: PerformanceObserverEntryList) { const renderEntries entryList.getEntriesByType(render) const navigationEntries entryList.getEntriesByType(navigation) renderEntries.forEach((entry: PerformanceEntry) { console.log([render] ${entry.name} duration${entry.duration}ms path${entry.path}) }) navigationEntries.forEach((entry: PerformanceEntry) { console.log([navigation] name${entry.name} type${entry.navigationType} duration${entry.duration}ms from${entry.referrerPath} to${entry.path}) }) }) observer.observe({ entryTypes: [render, navigation], })9.2 主动查询历史缓冲数据const performance uni.getPerformance() // 首次渲染耗时 const firstRender performance.getEntriesByName(firstRender, render) // 全部导航耗时 const routes performance.getEntriesByType(navigation) // 设置缓冲区大小为 100 条 performance.setBufferSize(100)9.3 停止监听observer.disconnect() // 之后不再接收性能回调9.4 注意事项uni.getPerformance()在 Web 端与 HarmonyOS(Vapor) 端不可用Android 端 uni-app x 版本需 ≥ 3.91iOS ≥ 4.25微信小程序宿主 ≥ 4.41HarmonyOS(VDOM) ≥ 4.61接入前请做好平台与版本判定duration仅对表示阶段的指标如firstRender、导航耗时有意义纯时间点字段如startTime应按各自语义解读回调中的PerformanceObserverEntryList是批次数据适合实时处理需要聚合分析时用Performance.getEntries()系列读取全局缓冲缓冲默认 30 条页面较多的应用建议按需调大setBufferSize避免早期指标被淘汰丢失。十、延伸阅读API 官方说明docs/api/get-performance.md类型定义接口层src/uni_modules/uni-getPerformance/utssdk/interface.utsAndroid 平台实现状态机与缓冲队列src/uni_modules/uni-getPerformance/utssdk/app-android/index.uts插件说明与 UTS 插件结构src/uni_modules/uni-getPerformance/readme.md演示工程中的接入示例src/App.uvue插件元数据与平台声明src/uni_modules/uni-getPerformance/package.json如需参考微信小程序侧的PerformanceAPI 行为差异可在微信开发者文档中检索wx.getPerformance本文不展开外部链接字段语义以本仓库 interface.uts 与 Android 实现为准。赞分享示例工程前端移动开发跨平台【免费下载链接】uni-appA cross-platform framework using Vue.js项目地址https://gitcode.com/gh_mirrors/un/uni-app点击查看免费下载相关推荐uni-route 页面路由管理 UTS 插件uni-app x 跨端路由 API 的架构与源码解析uni route 页面路由管理 UTS 插件uni app x 跨端路由 API 的架构与源码解析 uni route 是 uni app 仓库中以 uni示例工程前端移动开发跨平台uni-app X 之 page-meta 页面元数据组件动态控制页面背景、滚动与导航栏uni app X 之 page meta 页面元数据组件动态控制页面背景、滚动与导航栏 本篇技术指南围绕 uni app X本仓库 src https:/示例工程前端移动开发跨平台历史状态与并行状态Godot-StateCharts高级状态管理策略历史状态与并行状态Godot StateCharts高级状态管理策略 在游戏开发中状态管理是构建复杂角色行为和交互逻辑的核心。Godot StateChar创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考