性能ref追踪

Author: cwyyue

packages/core/@types/index.d.ts

@@ -275,10 +275,65 @@ export interface WebviewConfig {
   apiImplementations?: object
 }
 
+export interface RnRenderProfileMeta {
+  type: 'page' | 'component'
+  moduleId: string
+  componentPath: string
+  resource: string
+}
+
+export interface RnRenderCause {
+  kind: 'mount' | 'reactive' | 'force-update' | 'unknown'
+  source?: 'props' | 'data' | 'setup' | 'store' | 'inject' | 'unknown'
+  operation?: 'set' | 'add' | 'delete' | 'array-mutation' | 'trigger-ref'
+  key?: string
+  method?: string
+  /** 同一批渲染中相同原因被触发的次数。 */
+  count: number
+}
+
+export interface RnRenderProfileEvent extends RnRenderProfileMeta {
+  instanceId: string
+  pageId: string
+  phase: 'mount' | 'update' | 'nested-update'
+  /** 已提交 render 在 React 中花费的 CPU 时间，包含该组件的已渲染子树。 */
+  actualDuration: number
+  baseDuration: number
+  startTime: number
+  commitTime: number
+  /** Mpx 组件包装层开始本次 render 的单调时钟时间。 */
+  renderStartedAt: number
+  /** Mpx 组件包装层本次 render 的同步执行时间。 */
+  wrapperDuration: number
+  /** 本次 render 中执行 Mpx 模板函数所花费的同步时间。 */
+  templateDuration: number
+  templateExecuted: boolean
+  updateScheduledAt: number | null
+  /** 首次响应式调度到 React commit 回调的耗时，使用框架单调时钟计算。 */
+  updateToCommitDuration: number | null
+  coalescedUpdateCount: number
+  /** 本次实际执行并提交的 Mpx 模板渲染原因。 */
+  causes: Array<RnRenderCause>
+  changedPropKeys: Array<string>
+}
+
+export interface RnRenderProfilerConfig {
+  enabled?: boolean
+  shouldProfile?: (meta: RnRenderProfileMeta) => boolean
+  onRender?: (event: RnRenderProfileEvent) => void
+}
+
 /**
  * 输出为 ReactNative 时使用的特殊配置，用于与容器进行功能桥接
  */
 export interface RnConfig {
+  /**
+   * RN React 渲染性能采集，仅建议在调试包中开启。
+   * 需要在对应页面或组件执行注册前完成配置，运行时切换不会影响已注册组件。
+   * actualDuration 表示 React render/reconciliation CPU 时间，不包含原生布局、绘制及上屏时间。
+   */
+  renderProfiler?: RnRenderProfilerConfig
+
   /**
    * 当导航状态发生变化时触发，例如页面跳转、返回等。
    *

packages/core/__tests__/observer/reactiveTrigger.spec.js

@@ -0,0 +1,131 @@
+import { ReactiveEffect } from '../../src/observer/effect'
+import { reactive, set, del } from '../../src/observer/reactive'
+
+const createTrackedEffect = (fn) => {
+  const scheduler = jest.fn()
+  const onTrigger = jest.fn()
+  const effect = new ReactiveEffect(fn, scheduler)
+  effect.onTrigger = onTrigger
+  effect.run()
+  return { effect, scheduler, onTrigger }
+}
+
+describe('reactive trigger metadata', () => {
+  it('reports set, add and delete operations with only their key', () => {
+    const state = reactive({
+      value: 1,
+      nested: {}
+    })
+    const { scheduler, onTrigger } = createTrackedEffect(() => {
+      return [state.value, state.nested]
+    })
+
+    state.value = 2
+    set(state.nested, 'added', true)
+    del(state.nested, 'added')
+
+    expect(onTrigger.mock.calls).toEqual([
+      [{ type: 'set', key: 'value' }],
+      [{ type: 'add', key: 'added' }],
+      [{ type: 'delete', key: 'added' }]
+    ])
+    expect(scheduler).toHaveBeenCalledTimes(3)
+  })
+
+  it.each([
+    ['push', [1]],
+    ['pop', []],
+    ['shift', []],
+    ['unshift', [0]],
+    ['splice', [0, 1, 2]],
+    ['sort', []],
+    ['reverse', []]
+  ])('reports the %s array mutation without retaining arguments', (method, args) => {
+    const state = reactive({ list: [1] })
+    const { scheduler, onTrigger } = createTrackedEffect(() => state.list)
+
+    state.list[method](...args)
+
+    expect(onTrigger).toHaveBeenCalledWith({
+      type: 'array-mutation',
+      method
+    })
+    expect(onTrigger.mock.calls[0][0]).not.toHaveProperty('args')
+    expect(scheduler).toHaveBeenCalledTimes(1)
+  })
+
+  it('does not report unchanged assignments', () => {
+    const state = reactive({ value: 1 })
+    const { scheduler, onTrigger } = createTrackedEffect(() => state.value)
+
+    state.value = 1
+
+    expect(onTrigger).not.toHaveBeenCalled()
+    expect(scheduler).not.toHaveBeenCalled()
+  })
+
+  it('adds an explicit source without retaining the reactive target', () => {
+    const state = reactive({
+      value: 1,
+      nested: { visible: false },
+      list: []
+    }, 'data')
+    const { onTrigger } = createTrackedEffect(() => {
+      return [state.value, state.nested.visible, state.list]
+    })
+
+    state.value = 2
+    state.nested.visible = true
+    state.list.push({ id: 1 })
+
+    expect(onTrigger.mock.calls).toEqual([
+      [{ source: 'data', type: 'set', key: 'value' }],
+      [{ source: 'data', type: 'set', key: 'visible' }],
+      [{ source: 'data', type: 'array-mutation', method: 'push' }]
+    ])
+    onTrigger.mock.calls.forEach(([info]) => {
+      expect(info).not.toHaveProperty('target')
+      expect(info).not.toHaveProperty('newValue')
+      expect(info).not.toHaveProperty('oldValue')
+    })
+  })
+
+  it('does not traverse non-reactive objects while initializing a source', () => {
+    const readNested = jest.fn()
+    const external = Object.defineProperty(new Date(), 'nested', {
+      enumerable: true,
+      get: readNested
+    })
+    reactive({ external }, 'data')
+
+    expect(readNested).not.toHaveBeenCalled()
+  })
+
+  it('only calls onTrigger when the effect is actually scheduled', () => {
+    const state = reactive({ value: 0 })
+    const scheduler = jest.fn()
+    const onTrigger = jest.fn()
+    let shouldMutate = true
+    const effect = new ReactiveEffect(() => {
+      if (shouldMutate) {
+        shouldMutate = false
+        state.value++
+      }
+      return state.value
+    }, scheduler)
+    effect.onTrigger = onTrigger
+
+    effect.run()
+    expect(onTrigger).not.toHaveBeenCalled()
+    expect(scheduler).not.toHaveBeenCalled()
+
+    effect.pause()
+    state.value++
+    expect(onTrigger).not.toHaveBeenCalled()
+    expect(scheduler).not.toHaveBeenCalled()
+
+    effect.resume()
+    expect(onTrigger).not.toHaveBeenCalled()
+    expect(scheduler).toHaveBeenCalledTimes(1)
+  })
+})