refactor(defaults): improve component performance

[johnleider]

Motivation and Context

Improve framework performance

<template>
  <v-app>
    <v-container>
      <template v-for="i in length">
        <v-btn />
      </template>
    </v-container>
  </v-app>
</template>

<script setup>
  import { nextTick, onMounted, ref } from 'vue'

  const ITEMS = 1000
  const COUNT = 20
  const WARMUP_COUNT = 5
  const DELAY = 200

  const length = ref(0)

  function wait (ms) {
    return new Promise(resolve => setTimeout(resolve, ms))
  }

  onMounted(async () => {
    await wait(500)
    for (let i = 0; i < WARMUP_COUNT; i++) {
      length.value = ITEMS
      await nextTick()
      length.value = 0
      await nextTick()
    }
    requestIdleCallback(async () => {
      const result = []
      await wait(DELAY)
      for (let i = 0; i < COUNT; i++) {
        length.value = ITEMS
        const start = performance.now()
        await nextTick()
        result.push(performance.now() - start)
        await wait(DELAY)
        length.value = 0
        await nextTick()
        await wait(DELAY)
      }
      const avg = Math.round(result.reduce((a, b) => a + b, 0) / result.length)
      const sd = Math.round(Math.sqrt(result.reduce((a, b) => a + b * b, 0) / result.length - avg * avg))
      console.log(result.map(v => Math.round(v)).join('\n'))
      console.log('avg', `${avg}ms ±${sd}`)
    })
  })
</script>

[KaelWD]

yarn dev:prod

recommend incognito window or clean browser profile with no extensions installed

<template>
  <v-app>
    <v-container>
      <template v-for="i in length">
        <v-btn />
      </template>
    </v-container>
  </v-app>
</template>

<script setup>
  import { nextTick, onMounted, ref } from 'vue'

  const ITEMS = 1000
  const COUNT = 20
  const WARMUP_COUNT = 5
  const DELAY = 200

  const length = ref(0)

  function wait (ms) {
    return new Promise(resolve => setTimeout(resolve, ms))
  }

  onMounted(async () => {
    await wait(500)
    for (let i = 0; i < WARMUP_COUNT; i++) {
      length.value = ITEMS
      await nextTick()
      length.value = 0
      await nextTick()
    }
    requestIdleCallback(async () => {
      const result = []
      await wait(DELAY)
      for (let i = 0; i < COUNT; i++) {
        length.value = ITEMS
        const start = performance.now()
        await nextTick()
        result.push(performance.now() - start)
        await wait(DELAY)
        length.value = 0
        await nextTick()
        await wait(DELAY)
      }
      const avg = Math.round(result.reduce((a, b) => a + b, 0) / result.length)
      const sd = Math.round(Math.sqrt(result.reduce((a, b) => a + b * b, 0) / result.length - avg * avg))
      console.log(result.map(v => Math.round(v)).join('\n'))
      console.log('avg', `${avg}ms ±${sd}`)
    })
  })
</script>

issues addressed