-
-
Notifications
You must be signed in to change notification settings - Fork 3.5k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
f179cfd
commit 74a6e83
Showing
7 changed files
with
196 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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', '. ') | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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', '. ') | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 | ||
} |