Skip to content

Commit ce725d2

Browse files
ryfazrinryfazrin
authored
Merge pull request #2 from ryfazrin/feature/measure-main-thread
Feature/measure main thread
2 parents 1fba135 + cbfe5a5 commit ce725d2

File tree

11 files changed

+431
-376
lines changed

11 files changed

+431
-376
lines changed

‎.vscode/launch.json‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"configurations": [
3+
{
4+
"type": "chrome",
5+
"name": "http://localhost:5500",
6+
"request": "launch",
7+
"url": "http://localhost:5500"
8+
}
9+
]
10+
}

‎async.html‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link rel="stylesheet" href="src/styles.css">
8+
<title>Async</title>
9+
</head>
10+
<body>
11+
<h1>Asynchronous</h1>
12+
13+
<div>Main Load time: <span id="mainLoadTime"></span></div>
14+
15+
<div>Async Execute time results: <span id="asyncResult"></span></div>
16+
17+
<table border="0" id="results"></table>
18+
19+
<div id="output"></div>
20+
21+
<script>
22+
(() => {
23+
const MAIN_LOAD_TIME = document.getElementById('mainLoadTime');
24+
const ASYNC_RESULT = document.getElementById('asyncResult');
25+
const RESULTS = document.getElementById('results');
26+
const OUTPUT = document.getElementById('output');
27+
28+
const timeBetween = 20;
29+
const iterateCount = 1000;
30+
const runCount = 10;
31+
const runs = [];
32+
33+
const test = (i) => {
34+
const outer = document.createElement('div');
35+
outer.setAttribute('attr', i);
36+
outer.removeAttribute('attr');
37+
outer.className = 'c' + i;
38+
OUTPUT.appendChild(outer);
39+
40+
const inner = document.createElement('span');
41+
inner.textContent = i;
42+
inner.id = 'i' + i;
43+
inner.classList.add('a');
44+
inner.style.color = 'red';
45+
inner.tabIndex = i;
46+
outer.appendChild(inner);
47+
48+
inner.style.color;
49+
};
50+
51+
const run = () => {
52+
const start = performance.now();
53+
for (let i = 0; i < iterateCount; i++) {
54+
test(i);
55+
}
56+
const duration = performance.now() - start;
57+
runs.push(duration);
58+
59+
const runId = runs.length;
60+
61+
OUTPUT.textContent = '';
62+
63+
const resultTr = document.createElement('tr');
64+
const resultTh = document.createElement('th');
65+
resultTh.textContent = runId;
66+
const resultTd = document.createElement('td');
67+
resultTd.textContent = `${duration.toFixed(1)}ms`;
68+
resultTr.appendChild(resultTh);
69+
resultTr.appendChild(resultTd);
70+
RESULTS.appendChild(resultTr);
71+
72+
if (runId < runCount) {
73+
setTimeout(() => run(), timeBetween);
74+
} else {
75+
const total = runs.reduce((t, dur) => {
76+
t += dur;
77+
return t;
78+
}, 0);
79+
const ave = total / runCount;
80+
ASYNC_RESULT.textContent = `${ave.toFixed(1)}ms`;
81+
ASYNC_RESULT.classList.add('completed');
82+
83+
// reset runs length
84+
runs.length = 0;
85+
}
86+
}
87+
88+
setTimeout(() => run(), timeBetween);
89+
90+
window.addEventListener("load", () => {
91+
const now = new Date().getTime();
92+
const loadingTime = now - performance.timing.navigationStart;
93+
94+
MAIN_LOAD_TIME.innerText = `${loadingTime}ms`;
95+
}, false);
96+
})();
97+
</script>
98+
</body>
99+
</html>

‎index.html‎

Lines changed: 49 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -5,76 +5,57 @@
55
<meta http-equiv="X-UA-Compatible" content="IE=edge">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77
<link rel="stylesheet" href="src/styles.css">
8-
<title>Web Worker</title>
9-
<script src="~partytown/debug/partytown.js"></script>
10-
<script>
11-
partytown = {
12-
debug: true,
13-
};
14-
</script>
8+
<title>Measure Thread</title>
159
</head>
1610
<body>
17-
<table>
18-
<tr>
19-
<td valign="top">
20-
<table border="1">
21-
<thead>
22-
<tr>
23-
<th>Synchronous</th>
24-
<th>Asynchronous</th>
25-
<th>Worker</th>
26-
<th>Partytown</th>
27-
</tr>
28-
</thead>
29-
<tbody>
30-
<tr>
31-
<td id="sync"></td>
32-
<td id="async"></td>
33-
<td id="worker"></td>
34-
<td id="partytownTime"></td>
35-
</tr>
36-
<tr>
37-
<td>
38-
<button id="syncRun">Run Test</button>
39-
</td>
40-
<td>
41-
<button id="asyncRun">Run Test</button>
42-
</td>
43-
<td>
44-
<button id="workerRun">Run Test</button>
45-
</td>
46-
<td>
47-
<button id="partytownRun">Run Test</button>
48-
</td>
49-
</tr>
50-
<tr valign="top">
51-
<td>
52-
<table border="0" id="syncInfo"></table>
53-
</td>
54-
<td>
55-
<table border="0" id="asyncInfo"></table>
56-
</td>
57-
<td>
58-
<table border="0" id="workerInfo"></table>
59-
</td>
60-
<td>
61-
<table border="0" id="partytownInfo"></table>
62-
<div ></div>
63-
</td>
64-
</tr>
65-
</tbody>
66-
</table>
67-
</td>
68-
69-
<td valign="top">
70-
<h3>Execute Running</h3>
71-
<div id="output"></div>
72-
</td>
73-
</tr>
11+
<table border="1">
12+
<thead>
13+
<tr>
14+
<th>Synchronous</th>
15+
<th>Asynchronous</th>
16+
<th>Worker</th>
17+
<th>Partytown</th>
18+
</tr>
19+
</thead>
20+
<tbody>
21+
<tr>
22+
<td>
23+
<a href="sync.html" target="_blank">
24+
<button id="syncRun">Run Test</button>
25+
</a>
26+
</td>
27+
<td>
28+
<a href="async.html" target="_blank">
29+
<button id="asyncRun">Run Test</button>
30+
</a>
31+
</td>
32+
<td>
33+
<a href="worker.html" target="_blank">
34+
<button id="workerRun">Run Test</button>
35+
</a>
36+
</td>
37+
<td>
38+
<a href="partytown.html" target="_blank">
39+
<button id="partytownRun">Run Test</button>
40+
</a>
41+
</td>
42+
</tr>
43+
<tr valign="top">
44+
<td>
45+
<table border="0" id="syncInfo"></table>
46+
</td>
47+
<td>
48+
<table border="0" id="asyncInfo"></table>
49+
</td>
50+
<td>
51+
<table border="0" id="workerInfo"></table>
52+
</td>
53+
<td>
54+
<table border="0" id="partytownInfo"></table>
55+
<div ></div>
56+
</td>
57+
</tr>
58+
</tbody>
7459
</table>
75-
76-
<script type="text/partytown" src="src/script-partytown.js"></script>
77-
<script src="src/run-script.js"></script>
78-
<script src="src/main.js"></script>
7960
</body>
8061
</html>

‎partytown.html‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link rel="stylesheet" href="src/styles.css">
8+
<title>Partytown</title>
9+
<script src="~partytown/debug/partytown.js"></script>
10+
<script>
11+
partytown = {
12+
debug: true,
13+
};
14+
</script>
15+
</head>
16+
<body>
17+
<h1>Partytown</h1>
18+
19+
<div>Main Load time: <span id="mainLoadTime"></span></div>
20+
21+
<div>Partytown Execute time results: <span id="partytownResult"></span></div>
22+
23+
<table border="0" id="results"></table>
24+
25+
<div id="output"></div>
26+
27+
<script type="text/partytown" src="src/script-partytown.js"></script>
28+
<script>
29+
const MAIN_LOAD_TIME = document.getElementById('mainLoadTime');
30+
31+
window.addEventListener("load", () => {
32+
const now = new Date().getTime();
33+
const loadingTime = now - performance.timing.navigationStart;
34+
35+
MAIN_LOAD_TIME.innerText = `${loadingTime}ms`;
36+
}, false);
37+
</script>
38+
</body>
39+
</html>

‎src/main.js‎

Lines changed: 0 additions & 18 deletions
This file was deleted.

0 commit comments

Comments
 (0)