Performance Testing App

dev/components/web-tests/performance.vue

@@ -0,0 +1,126 @@
+<template>
+  <div class="column">
+    <q-card class="self-center" style="max-width:600px">
+      <q-toolbar>
+        <q-toolbar-title>
+          Component Types Performance Tests
+        </q-toolbar-title>
+      </q-toolbar>
+      <q-card-main>
+        <small>
+          <p>Functional components always get re-rendered on any reactive change in the DOM (even hidden), regular components only get re-rendered based on relevant reactivity.</p>
+          <p>This is a simple test for the 2 component types and their two definition methods.  The update button changes increments a reactive value hidden here. <span hidden>{{ triggerReactive }}</span></p>
+          <p>Open the console to see the log of performance times</p>
+          </small>
+        <q-field :label-width="3" icon="donut_small" label="Component Type">
+          <q-select v-model="componentType" :disable="created" float-label="Choose the Component Type" :options="componentTypeOptions"/>
+        </q-field>
+        <q-field :label-width="3" icon="content_copy" label="Copies">
+          <q-input v-model="repeatCount" :disable="created" type="number" float-label="Number of components to create" />
+        </q-field>
+        <q-field :label-width="3" icon="settings_applications" label="Component Work">
+          <q-input v-model="innerWork" :disable="created" type="number" float-label="Inner work of the component" />
+        </q-field>
+        <q-field :label-width="3" icon="timer" label="Processing Time">
+          <q-input v-model="elapsedDisplay" float-label="Processing time of the last action" readonly />
+        </q-field>
+      </q-card-main>
+      <q-toolbar inverted class="justify-around">
+        <q-btn @click="deleteClick" :disable="!created" icon="delete_forever" label="Delete" color="red"/>
+        <q-btn @click="createClick" :disable="created" icon="play_arrow" label="Create" color="primary"/>
+        <q-btn @click="updateClick" :disable="!created" icon="sync" label="Update" color="secondary"/>
+      </q-toolbar>
+    </q-card>
+    <q-list>
+      <template v-if="componentTypeApplied" v-for="n in repeatCountApplied">
+        <component :is="perfTestComponent" :workFunction="workFunction"/>
+      </template>
+    </q-list>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      componentType: 'pf',
+      componentTypeApplied: '',
+      componentTypeOptions: [
+        {
+          label: 'Programming - Functional',
+          value: 'pf'
+        },
+        {
+          label: 'Programming - Regular',
+          value: 'pr'
+        },
+        {
+          label: 'Template - Functional',
+          value: 'tf'
+        },
+        {
+          label: 'Template - Regular',
+          value: 'tr'
+        }
+      ],
+      clickPluses: '',
+      repeatCount: 1000,
+      repeatCountApplied: 0,
+      innerWork: 10000,
+      innerWorkApplied: 0,
+      perfTestComponent: '',
+      lastAction: '',
+      startTime: Date(),
+      endTime: Date(),
+      elapsedDisplay: '',
+      triggerReactive: 0,
+      created: false
+    }
+  },
+  methods: {
+    deleteClick () {
+      this.lastAction = 'Delete'
+      this.startTime = new Date()
+      this.repeatCountApplied = 0
+      this.created = false
+    },
+    createClick () {
+      this.lastAction = 'Create'
+      this.startTime = new Date()
+      this.componentTypeApplied = this.componentType
+      this.repeatCountApplied = this.repeatCount
+      this.innerWorkApplied = this.innerWork
+      this.perfTestComponent = 'q-perf-test-' + this.componentTypeApplied
+      this.created = true
+    },
+    updateClick (e, done) {
+      this.lastAction = 'Update'
+      this.triggerReactive += 1
+      this.startTime = new Date()
+      // this.clickPluses += '+'
+    },
+    workFunction () {
+      for (let n = 0; n < this.innerWork; n++) {
+        if (n === Math.random() - 10) {
+          // Never
+          break
+        }
+      }
+    }
+  },
+  computed: {
+    collapsibleLabel: function () {
+      return 'Collapsible with child components ' + this.clickPluses
+    }
+  },
+  updated () {
+    if (this.lastAction) {
+      this.endTime = new Date()
+      this.elapsedDisplay = (this.endTime - this.startTime) + ' ms'
+      let type = this.componentTypeOptions.find(options => options.value === this.componentTypeApplied)
+      console.log(type.label + ', ' + this.repeatCount + ', ' + this.innerWork + ', ' + this.lastAction + ', ' + this.elapsedDisplay)
+      this.lastAction = ''
+    }
+  }
+}
+</script>

src/components.js

@@ -6,6 +6,7 @@ export * from './components/alert'
 export * from './components/autocomplete'
 export * from './components/breadcrumbs'
 export * from './components/btn'
+export * from './components/performance-tests'
 export * from './components/card'
 export * from './components/carousel'
 export * from './components/chat'

src/components/performance-tests/PerfTestPF.js

@@ -0,0 +1,15 @@
+// Component Type: Programming, Functional
+export default {
+  name: 'q-perf-test-pf',
+  functional: true,
+  props: {
+    workFunction: Function
+  },
+
+  render (h, ctx) {
+    // console.log('q-perf-test-pf render')
+    ctx.props.workFunction()
+
+    return h('span', '. ')
+  }
+}

src/components/performance-tests/PerfTestPR.js

@@ -0,0 +1,15 @@
+// Component Type: Programming, Regular
+export default {
+  name: 'q-perf-test-pr',
+  props: {
+    workFunction: Function
+  },
+  created () {
+    // console.log('q-perf-test-pr created')
+    this.workFunction()
+  },
+  render (h) {
+    // console.log('q-perf-test-pr render')
+    return h('span', '. ')
+  }
+}

src/components/performance-tests/PerfTestTF.vue

@@ -0,0 +1,12 @@
+// Component Type: Template, Functional
+<template functional v-for="n in props.innerWork">
+  <span>. {{ props.workFunction() }}</span>
+</template>
+<script>
+export default {
+  name: 'q-perf-test-tf',
+  props: {
+    workFunction: Function
+  }
+}
+</script>

src/components/performance-tests/PerfTestTR.vue

@@ -0,0 +1,16 @@
+// Component Type: Programming, Regular
+<template>
+    <span>. </span>
+</template>
+<script>
+export default {
+  name: 'q-perf-test-tr',
+  props: {
+    workFunction: Function
+  },
+  created () {
+    // console.log('q-perf-test-tr created')
+    this.workFunction()
+  }
+}
+</script>

src/components/performance-tests/index.js

@@ -0,0 +1,11 @@
+import PerfTestPF from './PerfTestPF'
+import PerfTestPR from './PerfTestPR'
+import PerfTestTF from './PerfTestTF'
+import PerfTestTR from './PerfTestTR'
+
+export {
+  PerfTestPF,
+  PerfTestPR,
+  PerfTestTF,
+  PerfTestTR
+}