/
boot-speed.html
63 lines (51 loc) · 940 Bytes
/
boot-speed.html
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
<!DOCTYPE html>
<html>
<head>
<script src="../index.js"></script>
<style>
.red {
color: red;
}
</style>
</head>
<body>
<p>Boot speed: <span id='boot'></span></p>
<div id='app'>
<my-tag :items='items'></my-tag>
</div>
<script>
// coming from
// https://github.com/developit/preact/issues/416
const items = [];
let amount = 10000;
while(amount--) {
items.push({
name: `item-${ amount }`
});
}
var start = Date.now();
var render = hyperHTML.bind(app);
update();
boot.textContent = Date.now() - start;
function update() {
render`
<div>
<button onclick='${onclick}'>
update
</button>
<p>
${Date.now() - start}
</p>
${items.map((item, i) =>
`<h1 class="${i % 2 ? 'red' : ''}">${item.name}</h1>`
)}
<div>`;
}
function onclick() {
start = Date.now();
items.reverse();
update();
}
</script>
</body>
</html>