/
elements.bench.js
65 lines (53 loc) · 1.68 KB
/
elements.bench.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
import { Bench } from '/node_modules/tinybench/dist/index.js';
const html = (strings, ...exprs) => {
const template = document.createElement('template');
template.innerHTML = String.raw(strings, ...exprs);
return template.content.firstElementChild;
};
class WordCount extends HTMLParagraphElement {
// Element functionality written in here
}
class Divvy extends HTMLDivElement {
// Element functionality written in here
}
class PopupInfo extends HTMLElement {
// Element functionality written in here
}
customElements.define("word-count", WordCount, { extends: "p" });
customElements.define("div-vy", Divvy, { extends: "div" });
customElements.define("popup-info", PopupInfo);
const benchmark = true;
if(benchmark) {
await doBench(createElement);
}
async function createElement(bench) {
bench
.add('div', () => {
document.createElement('div');
})
.add('wat', () => {
document.createElement('wat');
})
.add('p is word-count', () => {
document.createElement('p', { is: 'word-count' });
})
.add('div is div-vy', () => {
document.createElement('div', { is: 'div-vy' });
})
.add('popup-info', () => {
document.createElement('popup-info');
});
}
async function doBench(setup) {
const bench = new Bench();
setup(bench)
await bench.warmup(); // make results more reliable, ref: https://github.com/tinylibs/tinybench/pull/50
await bench.run();
const tabulation = bench.table();
console.table(tabulation);
console.table(
bench.todos.map(({ name }) => ({
'Task name': name,
})),
);
}