snabbdom/test/benchmark/core.ts

import 'core-js/stable/array/fill.js'
import faker from 'faker'
import { VNode } from '../../package/vnode'
import { h } from '../../package/h'
import { init as curInit } from '../../package/init'
import { init as refInit } from 'latest-snabbdom-release/init'
import { assert } from 'chai'
import pReduce from 'p-reduce'
import pMapSeries from 'p-map-series'
import { std, mean } from 'mathjs'

const RUNS = 5
const PATCHES_PER_RUN = 100
const WARM_UP_RUNS = 1
const REQUEST_ANIMATION_FRAME_EVERY_N_PATCHES = 1
const BENCHMARK_TIMEOUT_MINUTES = 10
const REQUIRED_PRECISION = 0.02

/* eslint-disable @typescript-eslint/no-unused-vars */
declare global {
  // eslint-disable-next-line @typescript-eslint/naming-convention
  const __karma__: {
    info(info: unknown): void
  }
}
/* eslint-enable @typescript-eslint/no-unused-vars */

const ALLOWED_REGRESSION = 0.03
describe('core benchmark', () => {
  it('does not regress', async function Benchmark () {
    this.timeout(BENCHMARK_TIMEOUT_MINUTES * 1000 * 60)

    faker.seed(0)
    const inputs = Array(PATCHES_PER_RUN).fill(null).map(() => {
      return new Array(faker.random.number(20))
        .fill(null)
        .map(() => ({
          name: faker.company.companyName(),
          catchPhrase: faker.company.catchPhrase(),
          suffix: faker.company.companySuffix(),
          products: Array(faker.random.number(3))
            .fill(null)
            .map(() => ({
              name: faker.commerce.productName(),
              color: faker.commerce.color(),
              price: faker.commerce.price() + faker.finance.currencySymbol(),
            })),
          founded: faker.date.past()
        }))
    })

    type Input = (typeof inputs)[0]

    const view = (companies: Input): VNode => h('table', [
      h('caption', ['Companies']),
      h('thead', [
        h('tr', [
          'Details',
          'Products',
        ].map((th) => h('th', [th])))
      ]),
      h('tbody', companies.map(function companyView (company) {
        return h('tr', [
          h('td', [
            h('div', [
              h('b', [company.name]),
              company.suffix && `\xa0${company.suffix}`
            ]),
            h('div', h('i', [company.catchPhrase])),
            h('td', [
              h('dt', ['Founded']),
              h('dd', [company.founded.toLocaleDateString()])
            ])
          ]),
          h('td', [h('ul', company.products.map(function productView (product) {
            return h('li', [h('dl', [
              h('dt', ['Name']),
              h('dd', [product.name]),
              h('dt', ['Color']),
              h('dd', [product.color]),
              h('dt', ['Price']),
              h('dd', [product.price]),
            ])])
          }))])
        ])
      }))
    ])

    type Patcher = ReturnType<typeof refInit | typeof curInit>

    interface SingleRunResult {
      i: number
      cur: number
      ref: number
    }

    const subjectToResult = async (subject: Patcher, subjectId: string): Promise<number> => {
      await new Promise((resolve) => {
        requestAnimationFrame(resolve)
      })
      const markName = `mark:${subjectId}`
      const measureName = `measure:${subjectId}`
      performance.mark(markName)
      const lastVnode = await pReduce(
        inputs,
        async function subjectToResultReducer (acc: HTMLElement | VNode, input, i) {
          const vnode = view(input)
          subject(acc, vnode)
          if (i % REQUEST_ANIMATION_FRAME_EVERY_N_PATCHES === 0) {
            await new Promise((resolve) => {
              requestAnimationFrame(resolve)
            })
          }
          return vnode
        },
        document.body.appendChild(document.createElement('section')),
      )
      performance.measure(measureName, markName)
      if (!('elm' in lastVnode)) throw new Error()
      if (!lastVnode.elm) throw new Error()
      document.body.removeChild(lastVnode.elm)
      const measure = performance.getEntriesByName(measureName)[0]
      performance.clearMarks(markName)
      performance.clearMeasures(measureName)
      return measure.duration
    }

    const singleRun = async (_: null, runI: number): Promise<SingleRunResult> => {
      const cur = await subjectToResult(curInit([]), `cur:${runI}`)
      const ref = await subjectToResult(refInit([]), `ref:${runI}`)

      return { i: runI, cur, ref }
    }

    const runResults = (await pMapSeries(Array(RUNS + WARM_UP_RUNS).fill(null), singleRun))
      .slice(WARM_UP_RUNS)

    __karma__.info({ benchmark: runResults })

    const results = {
      ref: runResults.map((result) => result.ref),
      cur: runResults.map((result) => result.cur),
    }
    const means = {
      ref: mean(results.ref),
      cur: mean(results.cur),
    }
    const stds = {
      ref: std(results.ref, 'uncorrected'),
      cur: std(results.cur, 'uncorrected'),
    }

    ;(['ref', 'cur'] as const).forEach((subject) => {
      const stdRatio = stds[subject] / means[subject]
      assert.isAtMost(stdRatio, REQUIRED_PRECISION, `${subject} not precise enough`)
    })

    assert.isAtMost(means.cur, means.ref * (1 + ALLOWED_REGRESSION))
  })
})