Skip to content

Commit 2352cd4

Browse files
committed
chore: benchmarks
1 parent 3d28683 commit 2352cd4

File tree

5 files changed

+139
-4
lines changed

5 files changed

+139
-4
lines changed

Diff for: package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -30,8 +30,8 @@
3030
"release": "npm run build && npm test && np --no-tests",
3131
"serve": "node scripts/serve.js 4000",
3232
"serve.test": "node scripts/serve.js 4001",
33-
"serve.atomics": "node scripts/serve.js 4000 --atomics",
34-
"serve.atomics.test": "node scripts/serve.js 4002 --atomics",
33+
"serve.atomics": "node scripts/serve.js 4002 --atomics",
34+
"serve.atomics.test": "node scripts/serve.js 4003 --atomics",
3535
"test": "playwright test tests/platform --browser=chromium",
3636
"test.atomics": "playwright test tests/platform --config playwright.atomics.config.ts --browser=chromium",
3737
"test.webkit": "playwright test tests/platform --browser=webkit",

Diff for: scripts/serve.js

+3-2
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,15 @@ const port = parseInt(process.argv[2], 10);
88
const enableAtomics = process.argv.includes('--atomics');
99

1010
const server = http.createServer((req, rsp) => {
11-
let filePath = req.url.split('?')[0];
11+
const url = req.url.split('?')[0];
12+
let filePath = url;
1213

1314
if (filePath.includes('~partytown')) {
1415
filePath = filePath.replace('/~partytown', '');
1516
filePath = path.join(libDir, filePath);
1617
} else {
1718
filePath = path.join(testsDir, filePath);
18-
if (req.url.endsWith('/')) {
19+
if (url.endsWith('/')) {
1920
filePath = path.join(filePath, 'index.html');
2021
}
2122
}

Diff for: tests/benchmarks/benchmark.js

+65
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
(() => {
2+
const h1 = document.getElementById('h1');
3+
const h1Title = document.getElementById('title');
4+
h1Title.textContent = `${window.ptType} Benchmark`;
5+
document.title = h1.textContent;
6+
7+
const h1Average = document.getElementById('ave');
8+
const output = document.getElementById('output');
9+
const results = document.getElementById('results');
10+
11+
const timeBetween = 20;
12+
const iterateCount = 1000;
13+
const runCount = 10;
14+
const runs = [];
15+
16+
const test = (i) => {
17+
const outer = document.createElement('div');
18+
outer.setAttribute('attr', i);
19+
outer.removeAttribute('attr');
20+
outer.className = 'c' + i;
21+
output.appendChild(outer);
22+
23+
const inner = document.createElement('div');
24+
inner.textContent = i;
25+
inner.id = 'i' + i;
26+
inner.classList.add('a');
27+
outer.appendChild(inner);
28+
};
29+
30+
const run = () => {
31+
const start = performance.now();
32+
for (let i = 0; i < iterateCount; i++) {
33+
test(i);
34+
}
35+
const duration = performance.now() - start;
36+
runs.push(duration);
37+
38+
const runId = runs.length;
39+
40+
output.textContent = '';
41+
42+
const resultTr = document.createElement('tr');
43+
const resultTh = document.createElement('th');
44+
resultTh.textContent = runId;
45+
const resultTd = document.createElement('td');
46+
resultTd.textContent = `${duration.toFixed(1)}ms`;
47+
resultTr.appendChild(resultTh);
48+
resultTr.appendChild(resultTd);
49+
results.appendChild(resultTr);
50+
51+
if (runId < runCount) {
52+
setTimeout(() => run(), timeBetween);
53+
} else {
54+
const total = runs.reduce((t, dur) => {
55+
t += dur;
56+
return t;
57+
}, 0);
58+
const ave = total / runCount;
59+
h1Average.textContent = `${ave.toFixed(1)}ms`;
60+
document.title = h1.textContent;
61+
}
62+
};
63+
64+
setTimeout(() => run(), timeBetween);
65+
})();

Diff for: tests/benchmarks/index.html

+62
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<meta name="description" content="Partytown Test Page" />
7+
<title>Benchmark</title>
8+
<link
9+
rel="icon"
10+
id="favicon"
11+
href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎉</text></svg>"
12+
/>
13+
<style>
14+
body {
15+
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif,
16+
Apple Color Emoji, Segoe UI Emoji;
17+
font-size: 9px;
18+
}
19+
h1 {
20+
margin: 0 0 10px 0;
21+
}
22+
#output {
23+
font-size: 8px;
24+
}
25+
th {
26+
text-align: left;
27+
width: 30px;
28+
}
29+
</style>
30+
</head>
31+
<body>
32+
<h1 id="h1">
33+
<span id="title"></span>:
34+
<span id="ave">running...</span>
35+
</h1>
36+
37+
<table id="results"></table>
38+
39+
<div id="output"></div>
40+
41+
<script src="/~partytown/debug/partytown-snippet.js"></script>
42+
<script>
43+
(() => {
44+
const script = document.createElement('script');
45+
script.src = 'benchmark.js';
46+
47+
if (location.search.includes('mainthread')) {
48+
window.ptType = 'Main Thread';
49+
} else {
50+
if (window.crossOriginIsolated) {
51+
window.ptType = 'Atomics';
52+
} else {
53+
window.ptType = 'Service Worker';
54+
}
55+
script.setAttribute('type', 'text/partytown');
56+
}
57+
58+
document.body.appendChild(script);
59+
})();
60+
</script>
61+
</body>
62+
</html>

Diff for: tests/index.html

+7
Original file line numberDiff line numberDiff line change
@@ -110,6 +110,13 @@ <h2>Service Integration Tests</h2>
110110

111111
<hr />
112112

113+
<h2>Benchmarks</h2>
114+
<ul>
115+
<li><a href="/benchmarks/">Benchmarks</a></li>
116+
</ul>
117+
118+
<hr />
119+
113120
<h2>More Info</h2>
114121
<ul>
115122
<li><a href="https://github.com/BuilderIO/partytown#readme">Readme</a></li>

0 commit comments

Comments
 (0)