Skip to content

Commit 1d842e8

Browse files
mksunny1mksunny1
committed
I think I have landed for the time-being.
I don't know yet if this can become faster for 1k. But the implementation has many things going for it.
1 parent 03043de commit 1d842e8

File tree

5 files changed

+186
-18
lines changed

5 files changed

+186
-18
lines changed

‎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: 19 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
"use strict";
22

33
new class App {
4-
index = 1; data = [];
4+
index = 1; data = []; labels = null; invalidLabels = true;
55
tbody = document.getElementsByTagName('tbody')[0];
66
constructor() {
77
this.tbody.onclick = this.onclick();
@@ -17,16 +17,18 @@ new class App {
1717
const nouns = ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger", "pizza", "mouse", "keyboard"];
1818
const l1 = adjectives.length, l2 = colours.length,l3 = nouns.length;
1919

20-
const itemTemplate = document.getElementById('itemTemplate').content; // .cloneNode(true);
21-
const nt = Math.max(itemTemplate.children.length, n / 100); // Math.round(n / 50);
20+
const nt = 125; // n / 25; // Math.round(n / 50);
21+
let i, j = 0, r1, r2, r3;;
2222

23-
while (nt >= itemTemplate.children.length * 2) itemTemplate.appendChild(itemTemplate.cloneNode(true));
24-
while (nt > itemTemplate.children.length) itemTemplate.appendChild(itemTemplate.firstElementChild.cloneNode(true));
23+
const itemTemplates = document.getElementById('itemTemplate').content.cloneNode(true); // .content; // .cloneNode(true);
24+
if (itemTemplates.children.length < nt) {
25+
const itemTemplate = itemTemplates.firstElementChild;
26+
while (nt >= itemTemplates.children.length * 2) itemTemplates.appendChild(itemTemplates.cloneNode(true));
27+
while (nt > itemTemplates.children.length) itemTemplates.appendChild(itemTemplate.cloneNode(true));;
28+
}
29+
const ids = Array.prototype.map.call(itemTemplates.querySelectorAll(`td:first-child`), i => i.firstChild)
30+
const labels = Array.prototype.map.call(itemTemplates.querySelectorAll(`a.lbl`), i => i.firstChild);
2531

26-
const ids = Array.prototype.map.call(itemTemplate.querySelectorAll('td:first-child'), i => i.firstChild)
27-
const labels = Array.prototype.map.call(itemTemplate.querySelectorAll('a.lbl'), i => i.firstChild);
28-
29-
let i, j = 0, r1, r2, r3;;
3032
while ((n -= nt) >= 0) {
3133
for (i = 0; i < nt; i++, j++) {
3234
r1 = Math.round(Math.random() * 1000) % l1;
@@ -35,18 +37,19 @@ new class App {
3537
ids[i].nodeValue = this.index++;
3638
this.data.push(labels[i].nodeValue = `${adjectives[r1]} ${colours[r2]} ${nouns[r3]}`);
3739
}
38-
this.tbody.appendChild(itemTemplate.cloneNode(true));
39-
}
40+
this.tbody.appendChild(itemTemplates.cloneNode(true));
41+
} this.invalidLabels = true;
4042
};
4143
update() {
42-
const labels = this.tbody.querySelectorAll('tr:nth-child(10n+1)>td>a.lbl'), length = labels.length, data = this.data;
43-
let i = 0, lbl; for (lbl of labels) { lbl.firstChild.nodeValue = data[i] += ' !!!'; i += 10 }
44+
if (this.invalidLabels) this.labels = this.tbody.querySelectorAll('a.lbl'); this.invalidLabels = false;
45+
const labels = this.labels, length = labels.length, data = this.data;
46+
let i; for (i = 0; i < length; i += 10) labels[i].firstChild.nodeValue = data[i] += ' !!!';
4447
};
45-
clear() { this.tbody.textContent = ''; this.data = [] };
48+
clear() { this.tbody.textContent = ''; this.data = []; this.invalidLabels = true; };
4649

4750
swaprows() {
4851
const tbody = this.tbody, data = this.data;
49-
if (tbody.children.length < 999) return;
52+
if (tbody.children.length < 999) return; this.invalidLabels = true;
5053
const first = tbody.firstElementChild;
5154
[data[1], data[998]] = [data[998], data[1]];
5255
tbody.insertBefore(tbody.insertBefore(first.nextElementSibling,
@@ -67,7 +70,7 @@ new class App {
6770
} else if (e.target.matches('span.remove')) {
6871
const element = e.target.parentNode.parentNode.parentNode;
6972
const index = Array.prototype.indexOf.call(this.tbody.children, element);
70-
element.remove();
73+
element.remove(); this.invalidLabels = true;
7174
this.data.splice(index, 1);
7275
}
7376
}

‎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+
}();

0 commit comments

Comments
 (0)