Skip to content

Commit 01fc358

Browse files
hawkticehursthawkticehurst
committed
Some more tweaks to improve perf
1 parent 4cb24cc commit 01fc358

File tree

6 files changed

+111
-119
lines changed

6 files changed

+111
-119
lines changed

‎frameworks/keyed/vanillajs-portable-html-wc-2/src/app.js‎

Lines changed: 38 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -30,17 +30,17 @@ const APP = `<div class="container">
3030
</div>`;
3131

3232
class BenchApp extends HTMLElement {
33-
ID = 1;
34-
SEL = null;
35-
TMPL = null;
36-
SIZE = 0;
33+
_id = 1;
34+
_selected = null;
35+
_tmpl = null;
36+
_size = 0;
3737

3838
constructor() {
3939
super();
4040
this.innerHTML = APP;
41-
this.TABLE = this.querySelector('table');
42-
this.TBODY = this.querySelector('tbody');
43-
this.ROWS = this.TBODY.children;
41+
this._table = this.querySelector('table');
42+
this._tbody = this.querySelector('tbody');
43+
this._rows = this._tbody.children;
4444
const container = this.firstElementChild.firstElementChild.firstElementChild.lastElementChild.firstElementChild;
4545

4646
container.append(new BenchButton('run', 'Create 1,000 rows', this.run.bind(this)));
@@ -50,12 +50,12 @@ class BenchApp extends HTMLElement {
5050
container.append(new BenchButton('clear', 'Clear', this.clear.bind(this)));
5151
container.append(new BenchButton('swaprows', 'Swap Rows', this.swaprows.bind(this)));
5252

53-
this.TBODY.addEventListener("row-select", (e) => {
53+
this._tbody.addEventListener("row-select", (e) => {
5454
const msg = e.detail;
55-
if (this.SEL) {
56-
this.SEL.deselect();
55+
if (this._selected) {
56+
this._selected.deselect();
5757
}
58-
this.SEL = msg.element;
58+
this._selected = msg.element;
5959
});
6060
}
6161
run() {
@@ -68,45 +68,34 @@ class BenchApp extends HTMLElement {
6868
this.create(1000, true);
6969
}
7070
clear() {
71-
this.TBODY.textContent = '';
72-
this.SEL = null;
71+
this._tbody.textContent = '';
72+
this._selected = null;
7373
}
7474
update() {
75-
for (let i = 0, r; r = this.ROWS[i]; i += 10) {
75+
for (let i = 0, r; r = this._rows[i]; i += 10) {
7676
labelOf(r).nodeValue += ' !!!';
7777
}
7878
}
7979
swaprows() {
80-
const [, r1, r2] = this.ROWS;
81-
const r998 = this.ROWS[998];
80+
const [, r1, r2] = this._rows;
81+
const r998 = this._rows[998];
8282
if (r998) {
83-
insert(this.TBODY, r1, r998);
84-
insert(this.TBODY, r998, r2);
83+
insert(this._tbody, r1, r998);
84+
insert(this._tbody, r998, r2);
8585
}
8686
}
8787
create(count, add = false) {
88-
if (this.SIZE !== count) {
89-
const template = document.createElement('template');
90-
this.TMPL = clone(template.content);
91-
[...Array((this.SIZE = count) / 50)].forEach(() => {
92-
this.TMPL.append(new BenchRow());
93-
});
94-
}
9588
if (!add) {
9689
this.clear();
97-
this.TBODY.remove();
98-
}
99-
while (count > 0) {
100-
for (const r of this.TMPL.children) {
101-
r.rowId = this.ID++;
102-
r.rowLabel = label();
103-
count--;
104-
}
105-
insert(this.TBODY, clone(this.TMPL), null);
10690
}
107-
if (!add) {
108-
this.TABLE.append(this.TBODY);
91+
let id = this._id;
92+
const fragment = document.createDocumentFragment();
93+
for (let i = 0; i < count; i++) {
94+
const row = new BenchRow(id++, label());
95+
fragment.appendChild(row);
10996
}
97+
insert(this._tbody, fragment, null);
98+
this._id = id;
11099
}
111100
}
112101

@@ -128,34 +117,30 @@ const TROW = document.createElement('template');
128117
TROW.innerHTML = '<td class="col-md-1">?</td><td class="col-md-4"><a>?</a></td><td class="col-md-1"><a><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a></td><td class="col-md-6"></td>';
129118

130119
class BenchRow extends HTMLTableRowElement {
131-
constructor() {
120+
constructor(rowId, rowLabel) {
132121
super();
133-
if (this.innerHTML === '') {
134-
this.append(clone(TROW.content));
135-
}
136-
this.idColumn = this.firstChild.firstChild;
137-
this.label = this.firstChild.nextSibling.firstChild;
138-
this.close = this.firstChild.nextSibling.nextSibling.firstChild;
139-
}
140-
connectedCallback() {
141-
this.label.addEventListener("click", (e) => {
122+
this.append(clone(TROW.content));
123+
124+
const idColumn = this.firstChild.firstChild;
125+
idColumn.textContent = rowId;
126+
127+
const label = this.firstChild.nextSibling.firstChild;
128+
label.textContent = rowLabel;
129+
130+
const close = this.firstChild.nextSibling.nextSibling.firstChild;
131+
132+
label.addEventListener("click", (e) => {
142133
e.stopPropagation();
143134
this.select();
144135
this.dispatchEvent(new CustomEvent('row-select',
145136
{ bubbles: true, detail: { element: this }
146137
}));
147138
});
148-
this.close.addEventListener("click", (e) => {
139+
close.addEventListener("click", (e) => {
149140
e.stopPropagation();
150141
this.remove();
151142
});
152143
}
153-
set rowId(value) {
154-
this.idColumn.textContent = value;
155-
}
156-
set rowLabel(value) {
157-
this.label.textContent = value;
158-
}
159144
select() {
160145
this.className = 'danger';
161146
}

‎frameworks/keyed/vanillajs-portable-html-wc-3/src/app.js‎

Lines changed: 36 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -29,10 +29,6 @@ const APP = `<div class="container">
2929
<span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>
3030
</div>`;
3131

32-
const TROW_TMPL = document.createElement('template');
33-
TROW_TMPL.innerHTML = '<tr is="bench-row"></tr>';
34-
const TROW = clone(TROW_TMPL.content);
35-
3632
class BenchApp extends HTMLElement {
3733
_id = 1;
3834
_selected = null;
@@ -93,12 +89,9 @@ class BenchApp extends HTMLElement {
9389
this.clear();
9490
}
9591
let id = this._id;
96-
let row;
9792
const fragment = document.createDocumentFragment();
9893
for (let i = 0; i < count; i++) {
99-
row = new BenchRow();
100-
row.rowId = id++;
101-
row.rowLabel = label();
94+
const row = new BenchRow(id++, label());
10295
fragment.appendChild(row);
10396
}
10497
insert(this._tbody, fragment, null);
@@ -120,37 +113,32 @@ class BenchButton extends HTMLElement {
120113
}
121114
}
122115

123-
const TROW_CONTENT_TMPL = document.createElement('template');
124-
TROW_CONTENT_TMPL.innerHTML = '<td is="bench-cell" class="col-md-1">?</td><td is="bench-cell" class="col-md-4"><a>?</a></td><td is="bench-cell" class="col-md-1"><a><span is="bench-icon" class="glyphicon glyphicon-remove" aria-hidden="true"></span></a></td><td is="bench-cell" class="col-md-6"></td>';
125-
const TROW_CONTENT = clone(TROW_CONTENT_TMPL.content);
126-
127116
class BenchRow extends HTMLTableRowElement {
128-
constructor() {
117+
constructor(rowId, rowLabel) {
129118
super();
130-
if (this.innerHTML === '') {
131-
this.append(clone(TROW_CONTENT));
132-
}
133-
this.idColumn = this.firstChild;
134-
this.label = this.firstChild.nextSibling.firstChild;
135-
this.close = this.firstChild.nextSibling.nextSibling.firstChild;
136-
this.label.addEventListener("click", (e) => {
119+
120+
const label = document.createElement('a');
121+
label.textContent = rowLabel;
122+
const close = document.createElement('a');
123+
close.append(new BenchIcon());
124+
125+
this.append(new BenchCell('col-md-1', rowId));
126+
this.append(new BenchCell('col-md-4', label));
127+
this.append(new BenchCell('col-md-1', close));
128+
this.append(new BenchCell('col-md-6'));
129+
130+
label.addEventListener("click", (e) => {
137131
e.stopPropagation();
138132
this.select();
139133
this.dispatchEvent(new CustomEvent('row-select',
140134
{ bubbles: true, detail: { element: this }
141135
}));
142136
});
143-
this.close.addEventListener("click", (e) => {
137+
close.addEventListener("click", (e) => {
144138
e.stopPropagation();
145139
this.remove();
146140
});
147141
}
148-
set rowId(value) {
149-
this.idColumn.textContent = value;
150-
}
151-
set rowLabel(value) {
152-
this.label.textContent = value;
153-
}
154142
select() {
155143
this.className = 'danger';
156144
}
@@ -159,9 +147,28 @@ class BenchRow extends HTMLTableRowElement {
159147
}
160148
}
161149

162-
class BenchCell extends HTMLTableCellElement {}
150+
class BenchCell extends HTMLTableCellElement {
151+
constructor(className, children) {
152+
super();
153+
this.className = className;
154+
if (!children) {
155+
return;
156+
}
157+
if (typeof children === 'string') {
158+
this.textContent = children;
159+
} else {
160+
this.append(children);
161+
}
162+
}
163+
}
163164

164-
class BenchIcon extends HTMLSpanElement {}
165+
class BenchIcon extends HTMLSpanElement {
166+
constructor() {
167+
super();
168+
this.className = 'glyphicon glyphicon-remove';
169+
this.setAttribute('aria-hidden', 'true');
170+
}
171+
}
165172

166173
customElements.define('bench-button', BenchButton);
167174
customElements.define('bench-row', BenchRow, {extends: 'tr'});

‎frameworks/keyed/vanillajs-portable-html-wc/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<link href="/css/currentStyle.css" rel="stylesheet" />
99
</head>
1010
<body>
11-
<js-bench></js-bench>
11+
<bench-app></bench-app>
1212
<script type="module" src="./src/app.js"></script>
1313
</body>
1414
</html>

‎frameworks/keyed/vanillajs-portable-html-wc/src/app.js‎

Lines changed: 33 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ const insert = (parent, node, ref) => parent.insertBefore(node, ref);
1515
const TROW = document.createElement('template');
1616
TROW.innerHTML = '<tr><td class="col-md-1">?</td><td class="col-md-4"><a>?</a></td><td class="col-md-1"><a><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a></td><td class="col-md-6"></td></tr>';
1717

18-
const MARKUP = `<div class="container">
18+
const APP = `<div class="container">
1919
<div class="jumbotron">
2020
<div class="row">
2121
<div class="col-md-6">
@@ -51,22 +51,22 @@ const MARKUP = `<div class="container">
5151
<span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>
5252
</div>`;
5353

54-
class JsBench extends HTMLElement {
55-
ID = 1;
56-
SEL = null;
57-
TMPL = null;
58-
SIZE = 0;
54+
class BenchApp extends HTMLElement {
55+
_id = 1;
56+
_selected = null;
57+
_tmpl = null;
58+
_size = 0;
5959

6060
constructor() {
6161
super();
62-
this.innerHTML = MARKUP;
63-
this.TABLE = this.querySelector('table');
64-
this.TBODY = this.querySelector('tbody');
65-
this.BUTTONS = this.querySelectorAll('button');
66-
this.ROWS = this.TBODY.children;
67-
68-
this.BUTTONS.forEach(b => b.addEventListener("click", this[b.id].bind(this)));
69-
this.TBODY.addEventListener("click", this.rowSelect.bind(this));
62+
this.innerHTML = APP;
63+
this._table = this.querySelector('table');
64+
this._tbody = this.querySelector('tbody');
65+
this._rows = this._tbody.children;
66+
this._buttons = this.querySelectorAll('button');
67+
68+
this._buttons.forEach(b => b.addEventListener("click", this[b.id].bind(this)));
69+
this._tbody.addEventListener("click", this.rowSelect.bind(this));
7070
}
7171
run() {
7272
this.create(1000);
@@ -78,43 +78,43 @@ class JsBench extends HTMLElement {
7878
this.create(1000, true);
7979
}
8080
clear() {
81-
this.TBODY.textContent = '';
82-
this.SEL = null;
81+
this._tbody.textContent = '';
82+
this._selected = null;
8383
}
8484
update() {
85-
for (let i = 0, r; r = this.ROWS[i]; i += 10) {
85+
for (let i = 0, r; r = this._rows[i]; i += 10) {
8686
labelOf(r).nodeValue += ' !!!';
8787
}
8888
}
8989
swaprows() {
90-
const [, r1, r2] = this.ROWS;
91-
const r998 = this.ROWS[998];
90+
const [, r1, r2] = this._rows;
91+
const r998 = this._rows[998];
9292
if (r998) {
93-
insert(this.TBODY, r1, r998);
94-
insert(this.TBODY, r998, r2);
93+
insert(this._tbody, r1, r998);
94+
insert(this._tbody, r998, r2);
9595
}
9696
}
9797
create(count, add = false) {
98-
if (this.SIZE !== count) {
99-
this.TMPL = clone(TROW.content);
100-
[...Array((this.SIZE = count) / 50 - 1)].forEach(() => {
101-
this.TMPL.append(clone(this.TMPL.firstChild));
98+
if (this._size !== count) {
99+
this._tmpl = clone(TROW.content);
100+
[...Array((this._size = count) / 50 - 1)].forEach(() => {
101+
this._tmpl.append(clone(this._tmpl.firstChild));
102102
});
103103
}
104104
if (!add) {
105105
this.clear();
106-
this.TBODY.remove();
106+
this._tbody.remove();
107107
}
108108
while (count) {
109-
for (const r of this.TMPL.children) {
110-
(r.$id ??= r.firstChild.firstChild).nodeValue = this.ID++;
109+
for (const r of this._tmpl.children) {
110+
(r.$id ??= r.firstChild.firstChild).nodeValue = this._id++;
111111
(r.$label ??= labelOf(r)).nodeValue = label();
112112
count--;
113113
}
114-
insert(this.TBODY, clone(this.TMPL), null);
114+
insert(this._tbody, clone(this._tmpl), null);
115115
}
116116
if (!add) {
117-
this.TABLE.append(this.TBODY);
117+
this._table.append(this._tbody);
118118
}
119119
}
120120
rowSelect(e) {
@@ -124,10 +124,10 @@ class JsBench extends HTMLElement {
124124
e.stopPropagation();
125125
if (n == 'SPAN' || n == 'A' && t.firstElementChild) {
126126
r.remove();
127-
} else if (n == 'A' && (this.SEL && (this.SEL.className = ''), (this.SEL = r))) {
128-
this.SEL.className = 'danger';
127+
} else if (n == 'A' && (this._selected && (this._selected.className = ''), (this._selected = r))) {
128+
this._selected.className = 'danger';
129129
}
130130
}
131131
}
132132

133-
customElements.define('js-bench', JsBench);
133+
customElements.define('bench-app', BenchApp);

0 commit comments

Comments
 (0)