-
-
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
1879673
commit 13f5531
Showing
9 changed files
with
433 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,305 @@ | ||
<template> | ||
<div class="column"> | ||
<q-card class="self-center" style="max-width:625px"> | ||
<q-toolbar> | ||
<q-toolbar-title> | ||
Component Performance Tests | ||
</q-toolbar-title> | ||
</q-toolbar> | ||
<q-card-main> | ||
<small> | ||
<p>For the synthetic tests, the update buttons change reactive variables: External is here: {{ triggerExternal }}, Render updates a displayed prop (rR:{{ displayString }}) forcing a re-render, Compute updates a prop (cC:{{ computeString }}) within a computed property forcing a re-compute. For actual component tests, the render prop is adjusted for each component and there is no compute prop</p> | ||
<p>Open the console to see the log of performance times</p> | ||
</small> | ||
<q-field :label-width="3" icon="extension" label="Component"> | ||
<q-select v-model="componentName" :disable="created" float-label="Choose the Component" :options="componentNameOptions"/> | ||
</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> | ||
<template v-if="displayExtra"> | ||
<q-field :label-width="3" icon="build" 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="settings_applications" label="Component Work"> | ||
<div class="row no-wrap justify-between"> | ||
<q-input v-model="renderWork" :disable="created" type="number" float-label="Function work" /> | ||
<q-input v-model="computeWork" :disable="created" type="number" float-label="Compute work" /> | ||
</div> | ||
</q-field> | ||
</template> | ||
<q-field :label-width="3" icon="settings_applications" label="Parent Component" class="q-field-floating"> | ||
<q-btn-toggle-group | ||
:disable="created" | ||
toggle-color="primary" | ||
v-model="parentComponent" | ||
:options="[ | ||
{label: 'Regular', value: 'generator-pr'}, | ||
{label: 'Functional', value: 'generator-pf'} | ||
]" | ||
/> | ||
</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-card-actions align="around"> | ||
<div class="column justify-center"> | ||
<div class="row justify-center"> | ||
<b>Generate</b> | ||
</div> | ||
<div class="row justify-center"> | ||
<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"/> | ||
</div> | ||
</div> | ||
<div class="column justify-center"> | ||
<div class="row justify-center"> | ||
<b>Update</b> | ||
</div> | ||
<div class="row justify-center"> | ||
<q-btn @click="updateExternalClick" :disable="!created" icon="sync" label="External" color="secondary"/> | ||
<q-btn @click="updateRenderClick" :disable="!created" icon="sync" label="Render" color="secondary"/> | ||
<q-btn v-if="displayExtra" @click="updateComputeClick" :disable="!created" icon="sync" label="Compute" color="secondary"/> | ||
</div> | ||
</div> | ||
</q-card-actions> | ||
</q-card> | ||
<q-list> | ||
<component :is="parentComponentApplied" | ||
:name="testComponent" | ||
:props="componentProps()" | ||
:repeat="repeatCountApplied" | ||
/> | ||
<!-- <slot name='testComponents'></slot> --> | ||
</q-list> | ||
</div> | ||
</template> | ||
|
||
<script> | ||
import GeneratorMixin from './performance/generator-mixin' | ||
import GeneratorPf from './performance/GeneratorPf' | ||
import GeneratorPr from './performance/GeneratorPr' | ||
export default { | ||
mixins: [GeneratorMixin], | ||
components: { | ||
GeneratorPf, | ||
GeneratorPr | ||
}, | ||
data () { | ||
return { | ||
toggle: true, | ||
componentName: 'perf-test', | ||
componentNameApplied: '', | ||
componentNameOptions: [ | ||
{ | ||
label: 'Button', | ||
value: 'q-btn' | ||
}, | ||
{ | ||
label: 'Datetime', | ||
value: 'q-datetime' | ||
}, | ||
{ | ||
label: 'Icon', | ||
value: 'q-icon' | ||
}, | ||
{ | ||
label: 'Select', | ||
value: 'q-select' | ||
}, | ||
{ | ||
label: 'Spinner', | ||
value: 'q-spinner' | ||
}, | ||
{ | ||
label: 'Synthetic Test', | ||
value: 'perf-test' | ||
} | ||
], | ||
componentType: 'pf', | ||
componentTypeApplied: '', | ||
componentTypeOptions: [ | ||
{ | ||
label: 'Programming - Functional', | ||
value: 'pf' | ||
}, | ||
{ | ||
label: 'Programming - Regular', | ||
value: 'pr' | ||
}, | ||
{ | ||
label: 'Template - Functional', | ||
value: 'tf' | ||
}, | ||
{ | ||
label: 'Template - Regular', | ||
value: 'tr' | ||
} | ||
], | ||
repeatCount: 1000, | ||
repeatCountApplied: 0, | ||
innerWorkDisable: false, | ||
renderWork: 0, | ||
renderWorkApplied: 0, | ||
computeWork: 1000, | ||
computeWorkApplied: 0, | ||
workFunctionApplied: '', | ||
testComponent: '', | ||
lastAction: '', | ||
startTime: Date(), | ||
endTime: Date(), | ||
elapsedDisplay: '', | ||
triggerExternal: 0, | ||
created: false, | ||
displayString: String, | ||
computeString: String, | ||
parentComponent: 'generator-pr', | ||
parentComponentApplied: '', | ||
iconName: 'face' | ||
} | ||
}, | ||
computed: { | ||
displayExtra: function () { | ||
if (this.componentName === 'perf-test') return true | ||
} | ||
}, | ||
methods: { | ||
deleteClick () { | ||
this.lastAction = 'Delete' | ||
this.startTime = new Date() | ||
this.repeatCountApplied = 0 | ||
this.created = false | ||
}, | ||
createClick () { | ||
this.lastAction = 'Create' | ||
this.startTime = new Date() | ||
this.componentApplied = this.componentName | ||
this.componentTypeApplied = this.componentType | ||
this.repeatCountApplied = this.repeatCount | ||
this.renderWorkApplied = this.renderWork | ||
this.computeWorkApplied = this.computeWork | ||
this.componentNameApplied = this.componentName | ||
if (this.componentName === 'perf-test') { | ||
this.testComponent = this.componentApplied + '-' + this.componentTypeApplied | ||
} | ||
else { | ||
this.testComponent = this.componentApplied | ||
} | ||
this.displayString = 'r' | ||
this.computeString = 'c' | ||
this.parentComponentApplied = this.parentComponent | ||
// this.$slots['testComponents'] = this.generateTestComponents() | ||
this.created = true | ||
}, | ||
updateExternalClick (e, done) { | ||
this.toggle = !this.toggle | ||
this.lastAction = 'Update External' | ||
this.triggerExternal += 1 | ||
this.startTime = new Date() | ||
}, | ||
updateRenderClick (e, done) { | ||
this.toggle = !this.toggle | ||
this.lastAction = 'Update Render' | ||
this.displayString = (this.displayString === 'r') ? 'R' : 'r' | ||
this.iconName = (this.iconName === 'face') ? 'done' : 'face' | ||
this.startTime = new Date() | ||
}, | ||
updateComputeClick (e, done) { | ||
this.toggle = !this.toggle | ||
this.lastAction = 'Update Compute' | ||
this.computeString = (this.computeString === 'c') ? 'C' : 'c' | ||
this.startTime = new Date() | ||
}, | ||
workFunction (work) { | ||
// Pass work function as a prop since functional components do not have methods | ||
for (let n = 0; n < work; n++) { | ||
if (n === Math.random() - 10) { | ||
// Never | ||
break | ||
} | ||
} | ||
return '' | ||
}, | ||
computeStringOutput: function () { | ||
// Pass work function as a prop since functional components do not have methods | ||
this.workFunction(this.computeWork) | ||
return this.computeString | ||
}, | ||
componentProps: function () { | ||
let props = {} | ||
switch (this.componentNameApplied) { | ||
case 'perf-test': | ||
props = { renderWork: this.renderWorkApplied, | ||
displayString: this.displayString, | ||
computeWork: this.computeWorkApplied, | ||
computeString: this.computeString, | ||
workFunction: this.workFunction, | ||
computeStringOutput: this.computeStringOutput | ||
} | ||
break | ||
case 'q-btn': | ||
props = { label: this.displayString, noCaps: true } | ||
break | ||
case 'q-datetime': | ||
props = { value: '', floatLabel: this.displayString } | ||
break | ||
case 'q-icon': | ||
props = { name: this.iconName } | ||
break | ||
case 'q-select': | ||
props = { | ||
value: this.displayString, | ||
options: [ | ||
{ | ||
label: 'Render', | ||
value: 'R' | ||
}, | ||
{ | ||
label: 'render', | ||
value: 'r' | ||
} | ||
] | ||
} | ||
break | ||
case 'q-spinner': | ||
break | ||
} | ||
return props | ||
} | ||
/* This works also and insert into slot, but does not get recomputed at re-render | ||
generateTestComponents: function () { | ||
let props = this.componentProps() | ||
let vnodes = [] | ||
for (let i = 0; i < this.repeatCountApplied; i++) { | ||
props.key = i | ||
vnodes.push( | ||
this.$createElement(this.testComponent, { | ||
props: props | ||
}) | ||
) | ||
} | ||
return vnodes | ||
} | ||
*/ | ||
}, | ||
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) | ||
let name = this.componentNameOptions.find(options => options.value === this.componentNameApplied) | ||
let text = '' | ||
if (this.displayExtra) { | ||
text = 'Synthetic, ' + type.label + ', ' + this.repeatCount + ', ' + this.renderWorkApplied + ', ' + this.computeWorkApplied | ||
} | ||
else { | ||
text = name.label + ', ' + this.repeatCount | ||
} | ||
console.log(text + ', ' + 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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,24 @@ | ||
// Dynamic Component Generator | ||
// In separate functional component because I did not find a way to inject vnodes directly. | ||
// import GeneratorMixin from './generator-mixin' | ||
export default { | ||
name: 'generator-pf', | ||
// mixins: [GeneratorMixin], | ||
functional: true, | ||
|
||
render (h, ctx) { | ||
// ctx.props | ||
let props = ctx.props.props | ||
let vnodes = [] | ||
for (let i = 0; i < ctx.props.repeat; i++) { | ||
props.key = i | ||
vnodes.push( | ||
h(ctx.props.name, { | ||
props: props | ||
}) | ||
) | ||
} | ||
vnodes = h('div', {}, vnodes) | ||
return vnodes | ||
} | ||
} |
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,27 @@ | ||
// Dynamic Component Generator | ||
// In separate functional component because I did not find a way to inject vnodes directly. | ||
import GeneratorMixin from './generator-mixin' | ||
export default { | ||
name: 'generator-pr', | ||
mixins: [GeneratorMixin], | ||
props: { | ||
name: String, | ||
repeat: Number, | ||
props: Object | ||
}, | ||
|
||
render (h) { | ||
let props = this.props | ||
let vnodes = [] | ||
for (let i = 0; i < this.repeat; i++) { | ||
props.key = i | ||
vnodes.push( | ||
h(this.name, { | ||
props: this.props | ||
}) | ||
) | ||
} | ||
vnodes = h('div', {}, vnodes) | ||
return vnodes | ||
} | ||
} |
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,13 @@ | ||
// Component Type: Programming, Functional | ||
import PerfMixin from './perf-mixin' | ||
export default { | ||
name: 'perf-test-pf', | ||
functional: true, | ||
mixins: [PerfMixin], | ||
|
||
render (h, ctx) { | ||
// console.log('q-perf-test-pf render') | ||
let props = ctx.props | ||
return h('span', '.' + props.displayString + props.computeStringOutput() + props.workFunction(props.renderWork) + ' ') | ||
} | ||
} |
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 @@ | ||
// Component Type: Programming, Regular | ||
import PerfMixin from './perf-mixin' | ||
export default { | ||
name: 'perf-test-pr', | ||
mixins: [PerfMixin], | ||
|
||
render (h) { | ||
// console.log('q-perf-test-pr render') | ||
return h('span', '.' + this.displayString + this.computeStringOutput() + this.workFunction(this.renderWork) + ' ') | ||
} | ||
} |
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> | ||
<span>.{{ props.displayString }}{{ props.computeStringOutput() }}{{ props.workFunction(props.renderWork) }} </span> | ||
</template> | ||
|
||
<script> | ||
import PerfMixin from './perf-mixin' | ||
export default { | ||
name: 'perf-test-tf', | ||
mixins: [PerfMixin] | ||
} | ||
</script> |
Oops, something went wrong.