Skip to content

Commit 73a6741

Browse files
sreenathssreenaths
committed
Perfomance evaluation test between function and class composition
1 parent cb59f19 commit 73a6741

File tree

3 files changed

+240
-7
lines changed

3 files changed

+240
-7
lines changed

‎src/App.vue

Lines changed: 110 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,109 @@
11
<template>
2+
<h1>Working Demo:</h1>
23
<Counter :value="3" />
4+
<br />
5+
<hr />
6+
<div>
7+
<h1>Perfomance Evaluation:</h1>
8+
<div class="vertical-panel">
9+
<h2>Function Style:</h2>
10+
<button type="button" @click="onEvaluateFunctionStyle">Start</button>
11+
<div>
12+
Time taken : {{ functionStyleEndTime - functionStyleStartTime }} ms |
13+
Memory Used : {{ functionStyleEndMem - functionStyleStartMem }}
14+
</div>
15+
<div class="test-panel">
16+
<CounterFunctionStyle
17+
v-for="index in functionStyleCount"
18+
:key="index"
19+
:value="index"
20+
:hide-buttons="true"
21+
@all-mounted="allFunctionStyleComponentsUpdated"
22+
/>
23+
</div>
24+
</div>
25+
<div class="vertical-panel">
26+
<h2>Class Style:</h2>
27+
<button type="button" @click="onEvaluateClassStyle">Start</button>
28+
<div>
29+
Time taken : {{ classStyleEndTime - classStyleStartTime }} ms |
30+
Memory Used : {{ classStyleEndMem - classStyleStartMem }}
31+
</div>
32+
<div class="test-panel">
33+
<Counter
34+
v-for="index in classStyleCount"
35+
:key="index"
36+
:value="index"
37+
:hide-buttons="true"
38+
@all-mounted="allClassStyleComponentsUpdated"
39+
/>
40+
</div>
41+
</div>
42+
</div>
343
</template>
444

545
<script lang="ts">
646
import { defineComponent } from "vue";
747
import Counter from "./components/Counter.vue";
48+
import CounterFunctionStyle from "./components/CounterFunctionStyle.vue";
49+
50+
export const TEST_COUNT = 10000;
851
952
export default defineComponent({
1053
name: "App",
1154
components: {
12-
Counter
55+
Counter,
56+
CounterFunctionStyle
57+
},
58+
setup() {
59+
return {
60+
functionStyleStartTime: 0,
61+
functionStyleStartMem: 0,
62+
63+
classStyleStartTime: 0,
64+
classStyleStartMem: 0
65+
};
66+
},
67+
data() {
68+
return {
69+
functionStyleCount: 0,
70+
functionStyleEndTime: 0,
71+
functionStyleEndMem: 0,
72+
73+
classStyleCount: 0,
74+
classStyleEndTime: 0,
75+
classStyleEndMem: 0
76+
};
77+
},
78+
methods: {
79+
onEvaluateFunctionStyle(): void {
80+
this.functionStyleStartTime = Date.now();
81+
this.functionStyleStartMem = (performance as any).memory.usedJSHeapSize;
82+
83+
this.functionStyleCount = TEST_COUNT;
84+
},
85+
onEvaluateClassStyle(): void {
86+
this.classStyleStartTime = Date.now();
87+
this.classStyleStartMem = (performance as any).memory.usedJSHeapSize;
88+
89+
this.classStyleCount = TEST_COUNT;
90+
},
91+
allFunctionStyleComponentsUpdated(): void {
92+
this.functionStyleEndTime = Date.now();
93+
setTimeout(
94+
() =>
95+
(this.functionStyleEndMem = (performance as any).memory.usedJSHeapSize),
96+
1000
97+
);
98+
},
99+
allClassStyleComponentsUpdated(): void {
100+
this.classStyleEndTime = Date.now();
101+
setTimeout(
102+
() =>
103+
(this.classStyleEndMem = (performance as any).memory.usedJSHeapSize),
104+
1000
105+
);
106+
}
13107
}
14108
});
15109
</script>
@@ -23,4 +117,19 @@ export default defineComponent({
23117
color: #2c3e50;
24118
margin-top: 60px;
25119
}
120+
121+
.vertical-panel {
122+
width: 40%;
123+
display: inline-block;
124+
125+
vertical-align: top;
126+
127+
.test-panel {
128+
border: 1px solid silver;
129+
margin: 10px 30px;
130+
padding: 5px;
131+
132+
font-size: 0.5em;
133+
}
134+
}
26135
</style>

‎src/components/Counter.vue

Lines changed: 46 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,19 @@ This is how a component could look.
22

33
<template>
44
<div class="counter">
5-
Counter: {{ valueInternal }}<br />
6-
<button type="button" @click="onAdd">Add</button>&nbsp;
7-
<button type="button" @click="onSubtract">Sub</button>
5+
[class] Count: {{ valueInternal }}<br />
6+
<template v-if="!hideButtons">
7+
<button type="button" @click="onAdd">Add</button>&nbsp;
8+
<button type="button" @click="onSubtract">
9+
Sub
10+
</button>
11+
</template>
812
</div>
913
</template>
1014

1115
<script lang="ts">
1216
import { defineComponent, ref } from "vue";
17+
import { TEST_COUNT } from "../App.vue";
1318
1419
class Counter {
1520
valueInternal: any;
@@ -33,14 +38,49 @@ class Counter {
3338
this.valueInternal--;
3439
}
3540
36-
someOtherMethod() {
37-
// Statements
41+
// Some dummy functions for testing
42+
someOtherMethod1() {
43+
console.log(this.valueInternal * 1);
44+
}
45+
someOtherMethod2() {
46+
console.log(this.valueInternal * 2);
47+
}
48+
someOtherMethod3() {
49+
console.log(this.valueInternal * 3);
50+
}
51+
someOtherMethod4() {
52+
console.log(this.valueInternal * 4);
53+
}
54+
someOtherMethod5() {
55+
console.log(this.valueInternal * 5);
56+
}
57+
someOtherMethod6() {
58+
console.log(this.valueInternal * 6);
59+
}
60+
someOtherMethod7() {
61+
console.log(this.valueInternal * 7);
62+
}
63+
someOtherMethod8() {
64+
console.log(this.valueInternal * 8);
65+
}
66+
someOtherMethod9() {
67+
console.log(this.valueInternal * 9);
68+
}
69+
someOtherMethod10() {
70+
console.log(this.valueInternal * 10);
3871
}
3972
}
4073
4174
export default defineComponent({
4275
props: {
43-
value: Number
76+
value: Number,
77+
hideButtons: Boolean
78+
},
79+
emits: ["all-mounted"],
80+
mounted() {
81+
if (this.value === TEST_COUNT) {
82+
this.$emit("all-mounted");
83+
}
4484
},
4585
setup: props => new Counter(props.value || 0)
4686
});

‎src/components/CounterFunctionStyle.vue

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
This is how a component could look.
2+
3+
<template>
4+
<div class="counter">
5+
[function] Count: {{ valueInternal }}<br />
6+
<template v-if="!hideButtons">
7+
<button type="button" @click="onAdd">Add</button>&nbsp;
8+
<button type="button" @click="onSubtract">
9+
Sub
10+
</button>
11+
</template>
12+
</div>
13+
</template>
14+
15+
<script lang="ts">
16+
import { defineComponent, ref } from "vue";
17+
import { TEST_COUNT } from "../App.vue";
18+
19+
export default defineComponent({
20+
props: {
21+
value: Number,
22+
hideButtons: Boolean
23+
},
24+
emits: ["all-mounted"],
25+
mounted() {
26+
if (this.value === TEST_COUNT) {
27+
this.$emit("all-mounted");
28+
}
29+
},
30+
setup: props => {
31+
const valueInternal = ref<number>(props.value || 0);
32+
33+
return {
34+
valueInternal,
35+
36+
onAdd() {
37+
valueInternal.value++;
38+
},
39+
onSubtract() {
40+
valueInternal.value--;
41+
},
42+
43+
// Some dummy functions for testing
44+
someOtherMethod1() {
45+
console.log(valueInternal.value * 1);
46+
},
47+
someOtherMethod2() {
48+
console.log(valueInternal.value * 2);
49+
},
50+
someOtherMethod3() {
51+
console.log(valueInternal.value * 3);
52+
},
53+
someOtherMethod4() {
54+
console.log(valueInternal.value * 4);
55+
},
56+
someOtherMethod5() {
57+
console.log(valueInternal.value * 5);
58+
},
59+
someOtherMethod6() {
60+
console.log(valueInternal.value * 6);
61+
},
62+
someOtherMethod7() {
63+
console.log(valueInternal.value * 7);
64+
},
65+
someOtherMethod8() {
66+
console.log(valueInternal.value * 8);
67+
},
68+
someOtherMethod9() {
69+
console.log(valueInternal.value * 9);
70+
},
71+
someOtherMethod10() {
72+
console.log(valueInternal.value * 10);
73+
}
74+
};
75+
}
76+
});
77+
</script>
78+
79+
<style scoped>
80+
.counter {
81+
font-size: 2em;
82+
font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
83+
}
84+
</style>

0 commit comments

Comments
 (0)