perf(runtime-dom): avoid event handler array allocations

Author: wyf027

packages/runtime-dom/__benchmarks__/events.bench.ts

@@ -0,0 +1,23 @@
+import { bench, describe } from 'vitest'
+import { patchProp } from '../src/patchProp'
+
+describe('runtime-dom events', () => {
+  bench('dispatch click with single handler', () => {
+    const el = document.createElement('button')
+    let count = 0
+    patchProp(el, 'onClick', null, () => count++)
+    el.dispatchEvent(new Event('click'))
+  })
+
+  bench('dispatch click with multiple handlers', () => {
+    const el = document.createElement('button')
+    let count = 0
+    patchProp(el, 'onClick', null, [
+      () => count++,
+      () => count++,
+      () => count++,
+      () => count++,
+    ])
+    el.dispatchEvent(new Event('click'))
+  })
+})

packages/runtime-dom/__tests__/patchProps.spec.ts

@@ -19,6 +19,33 @@ describe('runtime-dom: props patching', () => {
     expect(el.getAttribute('id')).toBe(null)
   })
 
+  test('invokes multiple event handlers without array map indirection', () => {
+    const el = document.createElement('div')
+    const fn1 = vi.fn()
+    const fn2 = vi.fn()
+    const handlers = [fn1, fn2]
+    const mapSpy = vi.spyOn(handlers, 'map')
+
+    patchProp(el, 'onClick', null, handlers)
+    el.dispatchEvent(new Event('click'))
+
+    expect(fn1).toHaveBeenCalledTimes(1)
+    expect(fn2).toHaveBeenCalledTimes(1)
+    expect(mapSpy).not.toHaveBeenCalled()
+  })
+
+  test('stops invoking later event handlers after stopImmediatePropagation', () => {
+    const el = document.createElement('div')
+    const fn1 = vi.fn((e: Event) => e.stopImmediatePropagation())
+    const fn2 = vi.fn()
+
+    patchProp(el, 'onClick', null, [fn1, fn2])
+    el.dispatchEvent(new Event('click'))
+
+    expect(fn1).toHaveBeenCalledTimes(1)
+    expect(fn2).not.toHaveBeenCalled()
+  })
+
   test('value', () => {
     const el = document.createElement('input')
     patchProp(el, 'value', null, 'foo')

packages/runtime-dom/src/modules/events.ts

@@ -112,12 +112,35 @@ function createInvoker(
     } else if (e._vts <= invoker.attached) {
       return
     }
-    callWithAsyncErrorHandling(
-      patchStopImmediatePropagation(e, invoker.value),
-      instance,
-      ErrorCodes.NATIVE_EVENT_HANDLER,
-      [e],
-    )
+    const value = invoker.value
+    if (isArray(value)) {
+      const originalStop = e.stopImmediatePropagation
+      e.stopImmediatePropagation = () => {
+        originalStop.call(e)
+        ;(e as any)._stopped = true
+      }
+      for (let i = 0; i < value.length; i++) {
+        if ((e as any)._stopped) {
+          break
+        }
+        const handler = value[i]
+        if (handler) {
+          callWithAsyncErrorHandling(
+            handler,
+            instance,
+            ErrorCodes.NATIVE_EVENT_HANDLER,
+            [e],
+          )
+        }
+      }
+    } else {
+      callWithAsyncErrorHandling(
+        value,
+        instance,
+        ErrorCodes.NATIVE_EVENT_HANDLER,
+        [e],
+      )
+    }
   }
   invoker.value = initialValue
   invoker.attached = getNow()
@@ -134,21 +157,3 @@ function sanitizeEventValue(value: unknown, propName: string): EventValue {
   )
   return NOOP
 }
-
-function patchStopImmediatePropagation(
-  e: Event,
-  value: EventValue,
-): EventValue {
-  if (isArray(value)) {
-    const originalStop = e.stopImmediatePropagation
-    e.stopImmediatePropagation = () => {
-      originalStop.call(e)
-      ;(e as any)._stopped = true
-    }
-    return (value as Function[]).map(
-      fn => (e: Event) => !(e as any)._stopped && fn && fn(e),
-    )
-  } else {
-    return value
-  }
-}