-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsync.html
101 lines (83 loc) · 2.67 KB
/
sync.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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="src/styles.css">
<title>Sync</title>
</head>
<body>
<h1>Synchronous</h1>
<div>Main Load time: <span id="mainLoadTime"></span></div>
<div>Sync Execute time results: <span id="syncResult"></span></div>
<table border="0" id="results"></table>
<div id="output"></div>
<script>
(() => {
const MAIN_LOAD_TIME = document.getElementById('mainLoadTime');
const SYNC_RESULT = document.getElementById('syncResult');
const RESULTS = document.getElementById('results');
const OUTPUT = document.getElementById('output');
const timeBetween = 20;
const iterateCount = 1000;
const runCount = 10;
const runs = [];
const test = (i) => {
const outer = document.createElement('div');
outer.setAttribute('attr', i);
outer.removeAttribute('attr');
outer.className = 'c' + i;
OUTPUT.appendChild(outer);
const inner = document.createElement('span');
inner.textContent = i;
inner.id = 'i' + i;
inner.classList.add('a');
inner.style.color = 'red';
inner.tabIndex = i;
outer.appendChild(inner);
inner.style.color;
};
const run = () => {
const start = performance.now();
console.log('start: ', start);
for (let i = 0; i < iterateCount; i++) {
test(i);
}
const duration = performance.now() - start;
console.log('end: ', performance.now());
runs.push(duration);
const runId = runs.length;
OUTPUT.textContent = '';
const resultTr = document.createElement('tr');
const resultTh = document.createElement('th');
resultTh.textContent = runId;
const resultTd = document.createElement('td');
resultTd.textContent = `${duration.toFixed(1)}ms`;
resultTr.appendChild(resultTh);
resultTr.appendChild(resultTd);
results.appendChild(resultTr);
if (runId < runCount) {
run();
} else {
const total = runs.reduce((t, dur) => {
t += dur;
return t;
}, 0);
const ave = total / runCount;
SYNC_RESULT.textContent = `${ave.toFixed(1)}ms`;
SYNC_RESULT.classList.add('completed');
// reset runs length
runs.length = 0;
}
}
run();
window.addEventListener("load", () => {
const now = new Date().getTime();
const loadingTime = now - performance.timing.navigationStart;
MAIN_LOAD_TIME.innerText = `${loadingTime}ms`;
}, false);
})();
</script>
</body>
</html>