Skip to content

Commit 2d53849

Browse files
krausestkrausest
committed
Merge branch 'Vanillajs-3' of https://github.com/mksunny1/js-framework-benchmark into mksunny1-Vanillajs-3
2 parents 8de4854 + a010ec1 commit 2d53849

File tree

6 files changed

+257
-72
lines changed

6 files changed

+257
-72
lines changed

‎frameworks/keyed/vanillajs-3/index.html

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -73,8 +73,7 @@ <h1>Vanillajs-3-"keyed"</h1>
7373
</div>
7474
</div>
7575
<table class="table table-hover table-striped test-data">
76-
<tbody id="tbody">
77-
</tbody>
76+
<tbody id="tbody"></tbody>
7877
</table>
7978
<span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>
8079
</div>

‎frameworks/keyed/vanillajs-3/index_backup.html

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Benchmarks for Vanillajs-3</title>
5+
<link href="/css/currentStyle.css" rel="stylesheet" />
6+
</head>
7+
<body>
8+
<div id="main">
9+
<div class="container">
10+
<div class="jumbotron">
11+
<div class="row">
12+
<div class="col-md-6">
13+
<h1>Vanillajs-3-"keyed"</h1>
14+
</div>
15+
<div class="col-md-6">
16+
<div class="row">
17+
<div class="col-sm-6 smallpad">
18+
<button
19+
type="button"
20+
class="btn btn-primary btn-block"
21+
id="run"
22+
>
23+
Create 1,000 rows
24+
</button>
25+
</div>
26+
<div class="col-sm-6 smallpad">
27+
<button
28+
type="button"
29+
class="btn btn-primary btn-block"
30+
id="runlots"
31+
>
32+
Create 10,000 rows
33+
</button>
34+
</div>
35+
<div class="col-sm-6 smallpad">
36+
<button
37+
type="button"
38+
class="btn btn-primary btn-block"
39+
id="add"
40+
>
41+
Append 1,000 rows
42+
</button>
43+
</div>
44+
<div class="col-sm-6 smallpad">
45+
<button
46+
type="button"
47+
class="btn btn-primary btn-block"
48+
id="update"
49+
>
50+
Update every 10th row
51+
</button>
52+
</div>
53+
<div class="col-sm-6 smallpad">
54+
<button
55+
type="button"
56+
class="btn btn-primary btn-block"
57+
id="clear"
58+
>
59+
Clear
60+
</button>
61+
</div>
62+
<div class="col-sm-6 smallpad">
63+
<button
64+
type="button"
65+
class="btn btn-primary btn-block"
66+
id="swaprows"
67+
>
68+
Swap Rows
69+
</button>
70+
</div>
71+
</div>
72+
</div>
73+
</div>
74+
</div>
75+
<table class="table table-hover table-striped test-data">
76+
<tbody id="tbody"></tbody>
77+
</table>
78+
<span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>
79+
</div>
80+
</div>
81+
<table style="display: none;"><tbody id="itemTemplate"><tr><td class='col-md-1'>{id}</td><td class='col-md-4'><a class='lbl'>{lbl}</a></td><td class='col-md-1'><a class='remove'><span class='remove glyphicon glyphicon-remove' aria-hidden='true'></span></a></td><td class='col-md-6'></td></tr></tbody></table>
82+
<script src='src/Main.js'></script>
83+
</body>
84+
</html>

‎frameworks/keyed/vanillajs-3/src/Main.js

Lines changed: 74 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,79 @@
1-
const adjectives = ["pretty", "large", "big", "small", "tall", "short", "long", "handsome", "plain", "quaint", "clean", "elegant", "easy", "angry", "crazy", "helpful", "mushy", "odd", "unsightly", "adorable", "important", "inexpensive", "cheap", "expensive", "fancy"];
2-
const colours = ["red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black", "orange"];
3-
const nouns = ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger", "pizza", "mouse", "keyboard"];
4-
const [l1, l2, l3] = [adjectives.length, colours.length, nouns.length];
1+
"use strict";
52

6-
const nTemplates = (n) => Math.round(n / 100), tbody = document.getElementsByTagName('tbody')[0];
7-
let data = [], index = 1, i, lbl, selected;
3+
const gAdjectives = ["pretty", "large", "big", "small", "tall", "short", "long", "handsome", "plain", "quaint", "clean", "elegant", "easy", "angry", "crazy", "helpful", "mushy", "odd", "unsightly", "adorable", "important", "inexpensive", "cheap", "expensive", "fancy"];
4+
const gColours = ["red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black", "orange"];
5+
const gNouns = ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger", "pizza", "mouse", "keyboard"];
6+
const nts = {1000: 5, 10000: 125};
87

9-
function create(n = 1000) { if (tbody.children.length) clear(); append(n); }
10-
function append(n = 1000) {
11-
const nt = nTemplates(n); let j = 0, r1, r2, r3;
12-
const itemTemplate = document.getElementById('itemTemplate').content;
13-
while (nt >= itemTemplate.children.length * 2) itemTemplate.appendChild(itemTemplate.cloneNode(true));
14-
while (nt > itemTemplate.children.length) itemTemplate.appendChild(itemTemplate.firstElementChild.cloneNode(true));
15-
16-
const ids = Array.prototype.map.call(itemTemplate.querySelectorAll('td:first-child'), i => i.firstChild)
17-
const labels = Array.prototype.map.call(itemTemplate.querySelectorAll('a.lbl'), i => i.firstChild);
18-
19-
while ((n -= nt) >= 0) {
20-
for (i = 0; i < nt; i++, j++) {
21-
r1 = Math.round(Math.random() * 1000) % l1;
22-
r2 = Math.round(Math.random() * 1000) % l2;
23-
r3 = Math.round(Math.random() * 1000) % l3;
24-
(ids[i].nodeValue = index++) && data.push(labels[i].nodeValue = `${adjectives[r1]} ${colours[r2]} ${nouns[r3]}`)
25-
}
26-
tbody.appendChild(itemTemplate.cloneNode(true));
27-
}
28-
}
29-
function update() {
30-
const labels = tbody.querySelectorAll('a.lbl'), length = labels.length;
31-
for (i = 0; i < length; i += 10) labels[i].firstChild.nodeValue = data[i] += ' !!!'
32-
}
33-
function clear() { (data = []) && (tbody.textContent = '') }
8+
new class {
9+
index = 1; data = []; labels = null; invalidLabels = true;
10+
tbody = document.getElementsByTagName('tbody')[0];
11+
constructor() {
12+
this.tbody.onclick = this.onclick();
13+
for (let key of ['run', 'runlots', 'add', 'update', 'clear', 'swaprows']) {
14+
document.getElementById(key).onclick = (e) => { e.stopPropagation(); this[key](); }
15+
}
16+
};
17+
run(n = 1000) { if (this.data.length) this.clear(); this.add(n); };
18+
runlots() { this.run(10000) };
19+
add(n = 1000) {
20+
const adjectives = gAdjectives, colours = gColours, nouns = gNouns;
21+
const l1 = adjectives.length, l2 = colours.length, l3 = nouns.length;
22+
const nt = nts[n];
23+
let i, j = 0, r1, r2, r3;;
3424

35-
function swap() {
36-
if (tbody.children.length < 999) return; const first = tbody.firstElementChild;
37-
[data[1], data[998]] = [data[998], data[1]];
38-
tbody.insertBefore(tbody.insertBefore(first.nextElementSibling,
39-
tbody.children[998]).nextElementSibling, first.nextElementSibling);
40-
}
41-
tbody.onclick = (e) => {
42-
e.preventDefault; e.stopPropagation;
43-
if (e.target.matches('a.lbl')) {
44-
const element = e.target.parentNode.parentNode;
45-
if (element === selected) selected.className = selected.className ? "" : "danger";
46-
else {
47-
if (selected) selected.className = "";
48-
(element.className = "danger") && (selected = element)
25+
const itemTemplates = document.getElementById('itemTemplate').content.cloneNode(true);
26+
if (itemTemplates.children.length < nt) {
27+
const itemTemplate = itemTemplates.firstElementChild;
28+
while (nt >= itemTemplates.children.length * 2) itemTemplates.appendChild(itemTemplates.cloneNode(true));
29+
while (nt > itemTemplates.children.length) itemTemplates.appendChild(itemTemplate.cloneNode(true));;
30+
}
31+
const ids = Array.prototype.map.call(itemTemplates.querySelectorAll(`td:first-child`), i => i.firstChild)
32+
const labels = Array.prototype.map.call(itemTemplates.querySelectorAll(`a.lbl`), i => i.firstChild);
33+
34+
while ((n -= nt) >= 0) {
35+
for (i = 0; i < nt; i++, j++) {
36+
r1 = Math.round(Math.random() * 1000) % l1;
37+
r2 = Math.round(Math.random() * 1000) % l2;
38+
r3 = Math.round(Math.random() * 1000) % l3;
39+
ids[i].nodeValue = this.index++;
40+
this.data.push(labels[i].nodeValue = `${adjectives[r1]} ${colours[r2]} ${nouns[r3]}`);
41+
}
42+
this.tbody.appendChild(itemTemplates.cloneNode(true));
43+
} this.invalidLabels = true;
44+
};
45+
update() {
46+
if (this.invalidLabels) this.labels = this.tbody.querySelectorAll('a.lbl'); this.invalidLabels = false;
47+
const labels = this.labels, length = labels.length, data = this.data;
48+
let i; for (i = 0; i < length; i += 10) labels[i].firstChild.nodeValue = data[i] += ' !!!';
49+
};
50+
clear() { this.tbody.textContent = ''; this.data = []; this.invalidLabels = true; };
51+
swaprows() {
52+
const tbody = this.tbody, data = this.data;
53+
if (tbody.children.length < 999) return; this.invalidLabels = true;
54+
const first = tbody.firstElementChild;
55+
[data[1], data[998]] = [data[998], data[1]];
56+
tbody.insertBefore(tbody.insertBefore(first.nextElementSibling,
57+
tbody.children[998]).nextElementSibling, first.nextElementSibling);
58+
};
59+
onclick() {
60+
let selected;
61+
return (e) => {
62+
e.stopPropagation;
63+
if (e.target.matches('a.lbl')) {
64+
e.preventDefault;
65+
const element = e.target.parentNode.parentNode;
66+
if (element === selected) selected.className = selected.className ? "" : "danger";
67+
else {
68+
if (selected) selected.className = "";
69+
element.className = "danger"; selected = element;
70+
}
71+
} else if (e.target.matches('span.remove')) {
72+
const element = e.target.parentNode.parentNode.parentNode;
73+
const index = Array.prototype.indexOf.call(this.tbody.children, element);
74+
element.remove(); this.invalidLabels = true;
75+
this.data.splice(index, 1);
76+
}
4977
}
50-
} else if (e.target.matches('span.remove')) {
51-
const element = e.target.parentNode.parentNode.parentNode;
52-
data.splice(Array.prototype.indexOf.call(tbody.children, element)) && tbody.removeChild(element);
5378
}
54-
}
55-
for (let [key, fn] of Object.entries({
56-
run: create, runlots: () => create(10000),
57-
add: append, update, clear, swaprows: swap
58-
})) document.getElementById(key).onclick = (e) => { e.stopPropagation(), fn() }
79+
}();

‎frameworks/keyed/vanillajs-3/src/Main_backup.js

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
"use strict";
2+
3+
new class App {
4+
index = 1; data = []; labels = null; invalidLabels = true;
5+
tbody = document.getElementsByTagName('tbody')[0];
6+
constructor() {
7+
this.tbody.onclick = this.onclick();
8+
for (let key of ['run', 'runlots', 'add', 'update', 'clear', 'swaprows']) {
9+
document.getElementById(key).onclick = (e) => { e.stopPropagation(); this[key](); }
10+
}
11+
};
12+
run(n = 1000) { if (this.data.length) this.clear(); this.add(n); };
13+
runlots() { this.run(10000) };
14+
add(n = 1000) {
15+
const adjectives = ["pretty", "large", "big", "small", "tall", "short", "long", "handsome", "plain", "quaint", "clean", "elegant", "easy", "angry", "crazy", "helpful", "mushy", "odd", "unsightly", "adorable", "important", "inexpensive", "cheap", "expensive", "fancy"];
16+
const colours = ["red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black", "orange"];
17+
const nouns = ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger", "pizza", "mouse", "keyboard"];
18+
const l1 = adjectives.length, l2 = colours.length,l3 = nouns.length;
19+
20+
const nt = 5; // n / 25; // Math.round(n / 50);
21+
let i, j = 0, r1, r2, r3;;
22+
23+
const itemTemplateContainer = document.getElementById('itemTemplate'); // .content; // .cloneNode(true);
24+
const itemTemplates = document.createDocumentFragment();
25+
const itemTemplate = itemTemplateContainer.firstElementChild;
26+
if (itemTemplateContainer.children.length >= nt) {
27+
for (i = 0; i < nt; i++) itemTemplates.appendChild(itemTemplate.cloneNode(true))
28+
} else {
29+
for (i = itemTemplateContainer.children.length; i < nt; i++) itemTemplateContainer.appendChild(itemTemplate.cloneNode(true));
30+
itemTemplates.append(...itemTemplateContainer.cloneNode(true).children)
31+
}
32+
const ids = Array.prototype.map.call(itemTemplates.querySelectorAll(`td:first-child`), i => i.firstChild)
33+
const labels = Array.prototype.map.call(itemTemplates.querySelectorAll(`a.lbl`), i => i.firstChild);
34+
35+
while ((n -= nt) >= 0) {
36+
for (i = 0; i < nt; i++, j++) {
37+
r1 = Math.round(Math.random() * 1000) % l1;
38+
r2 = Math.round(Math.random() * 1000) % l2;
39+
r3 = Math.round(Math.random() * 1000) % l3;
40+
ids[i].nodeValue = this.index++;
41+
this.data.push(labels[i].nodeValue = `${adjectives[r1]} ${colours[r2]} ${nouns[r3]}`);
42+
}
43+
this.tbody.appendChild(itemTemplates.cloneNode(true));
44+
} this.invalidLabels = true;
45+
};
46+
update() {
47+
if (this.invalidLabels) this.labels = this.tbody.querySelectorAll('a.lbl'); this.invalidLabels = false;
48+
const labels = this.labels, length = labels.length, data = this.data;
49+
let i; for (i = 0; i < length; i += 10) labels[i].firstChild.nodeValue = data[i] += ' !!!';
50+
};
51+
clear() { this.tbody.textContent = ''; this.data = []; this.invalidLabels = true; };
52+
53+
swaprows() {
54+
const tbody = this.tbody, data = this.data;
55+
if (tbody.children.length < 999) return; this.invalidLabels = true;
56+
const first = tbody.firstElementChild;
57+
[data[1], data[998]] = [data[998], data[1]];
58+
tbody.insertBefore(tbody.insertBefore(first.nextElementSibling,
59+
tbody.children[998]).nextElementSibling, first.nextElementSibling);
60+
};
61+
onclick() {
62+
let selected;
63+
return (e) => {
64+
e.stopPropagation;
65+
if (e.target.matches('a.lbl')) {
66+
e.preventDefault;
67+
const element = e.target.parentNode.parentNode;
68+
if (element === selected) selected.className = selected.className ? "" : "danger";
69+
else {
70+
if (selected) selected.className = "";
71+
element.className = "danger"; selected = element;
72+
}
73+
} else if (e.target.matches('span.remove')) {
74+
const element = e.target.parentNode.parentNode.parentNode;
75+
const index = Array.prototype.indexOf.call(this.tbody.children, element);
76+
element.remove(); this.invalidLabels = true;
77+
this.data.splice(index, 1);
78+
}
79+
}
80+
}
81+
}();

‎frameworks/non-keyed/vanillajs-3/index.html

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -73,8 +73,7 @@ <h1>Vanillajs-3-"non-keyed"</h1>
7373
</div>
7474
</div>
7575
<table class="table table-hover table-striped test-data">
76-
<tbody id="tbody">
77-
</tbody>
76+
<tbody id="tbody"></tbody>
7877
</table>
7978
<span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>
8079
</div>

‎frameworks/non-keyed/vanillajs-3/src/Main.js

Lines changed: 16 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,9 @@
1+
"use strict";
2+
13
const adjectives = ["pretty", "large", "big", "small", "tall", "short", "long", "handsome", "plain", "quaint", "clean", "elegant", "easy", "angry", "crazy", "helpful", "mushy", "odd", "unsightly", "adorable", "important", "inexpensive", "cheap", "expensive", "fancy"];
24
const colours = ["red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black", "orange"];
35
const nouns = ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger", "pizza", "mouse", "keyboard"];
4-
const lengths = [adjectives.length, colours.length, nouns.length];
5-
function* _random(n) {
6-
for (let max of lengths) {
7-
const arr = new Array(n);
8-
for (i = 0; i < n; i++) arr[i] = Math.round(Math.random() * 1000) % max;
9-
yield arr
10-
}
11-
}
6+
const [l1, l2, l3] = [adjectives.length, colours.length, nouns.length];
127
const data = [], nTemplates = (n) => Math.round(n / 100), tbody = document.getElementsByTagName('tbody')[0];
138
let index = 1, i, lbl, selected;
149

@@ -28,15 +23,18 @@ function create(n = 1000) {
2823
function set(n) {
2924
const indices = tbody.querySelectorAll('td:first-child');
3025
const labels = tbody.querySelectorAll('a.lbl');
31-
const [r1, r2, r3] = _random(n);
26+
let r1, r2, r3;
3227
for (i = 0; i < n; i++) {
28+
r1 = Math.round(Math.random() * 1000) % l1;
29+
r2 = Math.round(Math.random() * 1000) % l2;
30+
r3 = Math.round(Math.random() * 1000) % l3;
3331
indices[i].firstChild.nodeValue = index++;
34-
labels[i].firstChild.nodeValue = data[i] = `${adjectives[r1[i]]} ${colours[r2[i]]} ${nouns[r3[i]]}`;
32+
labels[i].firstChild.nodeValue = data[i] = `${adjectives[r1]} ${colours[r2]} ${nouns[r3]}`;
3533
}
3634
}
3735
function append(n = 1000) {
38-
const [r1, r2, r3] = _random(n), nt = nTemplates(n); let j = 0;
39-
const itemTemplate = document.getElementById('itemTemplate').content;
36+
const nt = nTemplates(n); let j = 0, r1, r2, r3;
37+
const itemTemplate = document.getElementById('itemTemplate').content.cloneNode(true);
4038
while (nt >= itemTemplate.children.length * 2) itemTemplate.appendChild(itemTemplate.cloneNode(true));
4139
while (nt > itemTemplate.children.length) itemTemplate.appendChild(itemTemplate.firstElementChild.cloneNode(true));
4240

@@ -45,15 +43,18 @@ function append(n = 1000) {
4543

4644
while ((n -= nt) >= 0) {
4745
for (i = 0; i < nt; i++, j++) {
46+
r1 = Math.round(Math.random() * 1000) % l1;
47+
r2 = Math.round(Math.random() * 1000) % l2;
48+
r3 = Math.round(Math.random() * 1000) % l3;
4849
ids[i].nodeValue = index++;
49-
data.push(labels[i].nodeValue = `${adjectives[r1[j]]} ${colours[r2[j]]} ${nouns[r3[j]]}`)
50+
data.push(labels[i].nodeValue = `${adjectives[r1]} ${colours[r2]} ${nouns[r3]}`)
5051
}
5152
tbody.appendChild(itemTemplate.cloneNode(true));
5253
}
5354
}
5455
function update() {
5556
const labels = tbody.querySelectorAll('a.lbl'), length = labels.length;
56-
for (i = 0; i < length; i += 10) labels[i].firstChild.nodeValue = data[i] += ' !!!';
57+
for (i = 0; i < length; i += 10) labels[i].firstChild.nodeValue = data[i] = `${data[i]} !!!`;
5758
}
5859
function clear() { data.length = 0; tbody.textContent = '' }
5960

@@ -77,7 +78,7 @@ tbody.onclick = (e) => {
7778
} else if (e.target.matches('span.remove')) { let temp;
7879
const element = e.target.parentNode.parentNode.parentNode;
7980
data.splice(Array.prototype.indexOf.call(tbody.children, element), 1);
80-
tbody.removeChild(element);
81+
element.remove();
8182
}
8283
}
8384
for (let [key, fn] of Object.entries({

0 commit comments

Comments
 (0)