wip: benchmark manual read

Author: yyx990803

packages/reactivity/__benchmarks__/reactiveArray.bench.ts

@@ -1,12 +1,5 @@
 import { bench } from 'vitest'
-import {
-  computed,
-  effect,
-  reactive,
-  readonly,
-  shallowRef,
-  triggerRef,
-} from '../src'
+import { effect, reactive, reactiveReadArray, shallowReadArray } from '../src'
 
 for (let amount = 1e1; amount < 1e4; amount *= 10) {
   {
@@ -16,7 +9,7 @@ for (let amount = 1e1; amount < 1e4; amount *= 10) {
     }
     const arr = reactive(rawArray)
 
-    bench(`track for loop on reactive array, ${amount} elements`, () => {
+    bench(`track for loop, ${amount} elements`, () => {
       let sum = 0
       effect(() => {
         for (let i = 0; i < arr.length; i++) {
@@ -33,11 +26,12 @@ for (let amount = 1e1; amount < 1e4; amount *= 10) {
     }
     const arr = reactive(rawArray)
 
-    bench(`track iteration on reactive array, ${amount} elements`, () => {
+    bench(`track manual reactiveReadArray, ${amount} elements`, () => {
       let sum = 0
       effect(() => {
-        for (let x of arr) {
-          sum += x
+        const raw = shallowReadArray(arr)
+        for (let i = 0; i < raw.length; i++) {
+          sum += raw[i]
         }
       })
     })
@@ -50,54 +44,7 @@ for (let amount = 1e1; amount < 1e4; amount *= 10) {
     }
     const arr = reactive(rawArray)
 
-    bench(`track forEach on reactive array, ${amount} elements`, () => {
-      let sum = 0
-      effect(() => {
-        arr.forEach(x => (sum += x))
-      })
-    })
-  }
-
-  {
-    const rawArray: number[] = []
-    for (let i = 0, n = amount; i < n; i++) {
-      rawArray.push(i)
-    }
-    const arr = reactive(rawArray)
-
-    bench(`track reduce on reactive array, ${amount} elements`, () => {
-      let sum = 0
-      effect(() => {
-        sum = arr.reduce((v, a) => a + v, 0)
-      })
-    })
-  }
-
-  {
-    const rawArray: number[] = []
-    for (let i = 0, n = amount; i < n; i++) {
-      rawArray.push(i)
-    }
-    const arr = readonly(rawArray)
-
-    bench(`track for loop on readonly array, ${amount} elements`, () => {
-      let sum = 0
-      effect(() => {
-        for (let i = 0; i < arr.length; i++) {
-          sum += arr[i]
-        }
-      })
-    })
-  }
-
-  {
-    const rawArray: number[] = []
-    for (let i = 0, n = amount; i < n; i++) {
-      rawArray.push(i)
-    }
-    const arr = readonly(rawArray)
-
-    bench(`track iteration on readonly array, ${amount} elements`, () => {
+    bench(`track iteration, ${amount} elements`, () => {
       let sum = 0
       effect(() => {
         for (let x of arr) {
@@ -112,9 +59,9 @@ for (let amount = 1e1; amount < 1e4; amount *= 10) {
     for (let i = 0, n = amount; i < n; i++) {
       rawArray.push(i)
     }
-    const arr = readonly(rawArray)
+    const arr = reactive(rawArray)
 
-    bench(`track forEach on readonly array, ${amount} elements`, () => {
+    bench(`track forEach, ${amount} elements`, () => {
       let sum = 0
       effect(() => {
         arr.forEach(x => (sum += x))
@@ -127,9 +74,9 @@ for (let amount = 1e1; amount < 1e4; amount *= 10) {
     for (let i = 0, n = amount; i < n; i++) {
       rawArray.push(i)
     }
-    const arr = readonly(rawArray)
+    const arr = reactive(rawArray)
 
-    bench(`track reduce on readonly array, ${amount} elements`, () => {
+    bench(`track reduce, ${amount} elements`, () => {
       let sum = 0
       effect(() => {
         sum = arr.reduce((v, a) => a + v, 0)
@@ -146,7 +93,7 @@ for (let amount = 1e1; amount < 1e4; amount *= 10) {
     effect(() => r.reduce((v, a) => a + v, 0))
 
     bench(
-      `trigger index mutation (1st only) on *reactive* array (tracked with reduce), ${amount} elements`,
+      `trigger index mutation (1st only), tracked with reduce, ${amount} elements`,
       () => {
         r[0]++
       },
@@ -162,7 +109,7 @@ for (let amount = 1e1; amount < 1e4; amount *= 10) {
     effect(() => r.reduce((v, a) => a + v, 0))
 
     bench(
-      `trigger index mutation (all) on *reactive* array (tracked with reduce), ${amount} elements`,
+      `trigger index mutation (all), tracked with reduce, ${amount} elements`,
       () => {
         for (let i = 0, n = r.length; i < n; i++) {
           r[i]++
@@ -184,12 +131,9 @@ for (let amount = 1e1; amount < 1e4; amount *= 10) {
       }
     })
 
-    bench(
-      `push() trigger on reactive array tracked via iteration, ${amount} elements`,
-      () => {
-        arr.push(1)
-      },
-    )
+    bench(`push() trigger, tracked via iteration, ${amount} elements`, () => {
+      arr.push(1)
+    })
   }
 
   {
@@ -203,11 +147,8 @@ for (let amount = 1e1; amount < 1e4; amount *= 10) {
       arr.forEach(x => (sum += x))
     })
 
-    bench(
-      `push() trigger on reactive array tracked via forEach, ${amount} elements`,
-      () => {
-        arr.push(1)
-      },
-    )
+    bench(`push() trigger, tracked via forEach, ${amount} elements`, () => {
+      arr.push(1)
+    })
   }
 }

packages/reactivity/src/arrayInstrumentations.ts

@@ -3,14 +3,22 @@ import { endBatch, pauseTracking, resetTracking, startBatch } from './effect'
 import { isProxy, isShallow, toRaw, toReactive } from './reactive'
 import { ARRAY_ITERATE_KEY, track } from './dep'
 
+/**
+ * Track array iteration and return:
+ * - if input is reactive: a cloned raw array with reactive values
+ * - if input is non-reactive or shallowReactive: the original raw array
+ */
 export function reactiveReadArray<T>(array: T[]): T[] {
   const raw = toRaw(array)
   if (raw === array) return raw
   track(raw, TrackOpTypes.ITERATE, ARRAY_ITERATE_KEY)
   return isShallow(array) ? raw : raw.map(toReactive)
 }
 
-function shallowReadArray<T>(arr: T[]): T[] {
+/**
+ * Track array iteration and return raw array
+ */
+export function shallowReadArray<T>(arr: T[]): T[] {
   track((arr = toRaw(arr)), TrackOpTypes.ITERATE, ARRAY_ITERATE_KEY)
   return arr
 }

packages/reactivity/src/index.ts

@@ -73,5 +73,5 @@ export {
   getCurrentScope,
   onScopeDispose,
 } from './effectScope'
-export { reactiveReadArray } from './arrayInstrumentations'
+export { reactiveReadArray, shallowReadArray } from './arrayInstrumentations'
 export { TrackOpTypes, TriggerOpTypes, ReactiveFlags } from './constants'