Skip to content

Commit 904b338

Browse files
willybraunerwillybrauner
committed
feat: Create benchmark
1 parent 3831f3a commit 904b338

11 files changed

Lines changed: 778 additions & 11 deletions

File tree

‎bench/browser-bench/.gitignore‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎bench/browser-bench/index.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>@wbe/debug vs debug - Benchmark</title>
8+
</head>
9+
<body>
10+
<div id="app">
11+
</div>
12+
<script type="module" src="/src/main.tsx"></script>
13+
</body>
14+
</html>

‎bench/browser-bench/package.json‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"name": "browser-bench",
3+
"private": true,
4+
"version": "0.0.0",
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "tsc && vite build",
9+
"preview": "vite preview"
10+
},
11+
"dependencies": {
12+
"@wbe/debug": "workspace:*",
13+
"debug": "4.4.0",
14+
"preact": "^10.26.5"
15+
},
16+
"devDependencies": {
17+
"sass": "^1.86.3",
18+
"typescript": "~5.7.2",
19+
"vite": "^6.2.0"
20+
}
21+
}

‎bench/browser-bench/public/vite.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎bench/browser-bench/src/App.tsx‎

Lines changed: 232 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,232 @@
1+
import { useState, useEffect } from "preact/hooks"
2+
import debugOriginal from "debug"
3+
import debugWbe from "@wbe/debug"
4+
5+
interface BenchmarkResults {
6+
debugOriginal: number
7+
debugWbe: number
8+
iterations: number
9+
testMessages: any[]
10+
completed: boolean
11+
}
12+
13+
export const BenchmarkApp = () => {
14+
const [results, setResults] = useState<BenchmarkResults>({
15+
debugOriginal: 0,
16+
debugWbe: 0,
17+
iterations: 10000,
18+
testMessages: [],
19+
completed: false,
20+
})
21+
const [isRunning, setIsRunning] = useState(false)
22+
23+
useEffect(() => {
24+
runBenchmark()
25+
}, [])
26+
27+
const runBenchmark = async () => {
28+
setIsRunning(true)
29+
30+
const logBench = debugWbe("bench:main")
31+
logBench("Starting browser benchmark...")
32+
33+
// Setup for benchmarking
34+
const iterations = 10000
35+
const benchResults = {
36+
debugOriginal: 0,
37+
debugWbe: 0,
38+
}
39+
40+
// Create loggers for each library
41+
const logOriginal = debugOriginal("bench:original")
42+
const logWbe = debugWbe("bench:wbe")
43+
44+
// Warmup phase
45+
logBench("Warming up...")
46+
for (let i = 0; i < 100; i++) {
47+
logOriginal("warmup")
48+
logWbe("warmup")
49+
}
50+
51+
// Setup test messages with different complexity
52+
const testMessages = [
53+
"Simple string message",
54+
["Array", "of", "strings"],
55+
{ complex: "object", with: { nested: "properties" } },
56+
["Mixed", 123, { type: "content" }],
57+
]
58+
59+
// Update state with test messages
60+
setResults((prev) => ({ ...prev, testMessages }))
61+
62+
// Benchmark original debug
63+
logBench("Benchmarking original debug library...")
64+
const originalStart = performance.now()
65+
66+
for (let i = 0; i < iterations; i++) {
67+
const msgIndex = i % testMessages.length
68+
// Use console.time/timeEnd for more granular measurement
69+
if (i % 1000 === 0) console.time("original-" + i)
70+
logOriginal(testMessages[msgIndex])
71+
if (i % 1000 === 0) console.timeEnd("original-" + i)
72+
}
73+
74+
benchResults.debugOriginal = performance.now() - originalStart
75+
76+
// Benchmark @wbe/debug
77+
logBench("Benchmarking @wbe/debug library...")
78+
const wbeStart = performance.now()
79+
80+
for (let i = 0; i < iterations; i++) {
81+
const msgIndex = i % testMessages.length
82+
if (i % 1000 === 0) console.time("wbe-" + i)
83+
logWbe(testMessages[msgIndex])
84+
if (i % 1000 === 0) console.timeEnd("wbe-" + i)
85+
}
86+
87+
benchResults.debugWbe = performance.now() - wbeStart
88+
89+
// Display results
90+
logBench("Browser benchmark completed.")
91+
92+
console.log(
93+
"%c---- BENCHMARK RESULTS ----",
94+
"font-weight: bold; font-size: 16px;"
95+
)
96+
console.log(`Total iterations per library: ${iterations}`)
97+
console.log(
98+
`Original debug: ${benchResults.debugOriginal.toFixed(2)}ms (${(
99+
benchResults.debugOriginal / iterations
100+
).toFixed(3)}ms per call)`
101+
)
102+
console.log(
103+
`@wbe/debug: ${benchResults.debugWbe.toFixed(2)}ms (${(
104+
benchResults.debugWbe / iterations
105+
).toFixed(3)}ms per call)`
106+
)
107+
console.log(
108+
`Difference: ${(
109+
benchResults.debugWbe - benchResults.debugOriginal
110+
).toFixed(2)}ms`
111+
)
112+
113+
if (benchResults.debugWbe < benchResults.debugOriginal) {
114+
console.log(
115+
`%c@wbe/debug is ${(
116+
(benchResults.debugOriginal / benchResults.debugWbe - 1) *
117+
100
118+
).toFixed(2)}% faster`,
119+
"color: green; font-weight: bold"
120+
)
121+
} else {
122+
console.log(
123+
`%cOriginal debug is ${(
124+
(benchResults.debugWbe / benchResults.debugOriginal - 1) *
125+
100
126+
).toFixed(2)}% faster`,
127+
"color: red; font-weight: bold"
128+
)
129+
}
130+
131+
// Update state with results
132+
setResults({
133+
debugOriginal: benchResults.debugOriginal,
134+
debugWbe: benchResults.debugWbe,
135+
iterations,
136+
testMessages,
137+
completed: true,
138+
})
139+
140+
setIsRunning(false)
141+
}
142+
143+
return (
144+
<div>
145+
<div className="actions">
146+
<button onClick={runBenchmark} disabled={isRunning} className="run-btn">
147+
{isRunning ? "Running..." : "Run Benchmark Again"}
148+
</button>
149+
</div>
150+
151+
{isRunning && <div className="loading">Running benchmark...</div>}
152+
153+
{results.completed && <BenchmarkResults results={results} />}
154+
</div>
155+
)
156+
}
157+
158+
const BenchmarkResults = ({ results }: { results: BenchmarkResults }) => {
159+
const { debugOriginal, debugWbe, iterations, testMessages } = results
160+
161+
const originalPerCall = debugOriginal / iterations
162+
const wbePerCall = debugWbe / iterations
163+
const difference = debugWbe - debugOriginal
164+
165+
// Calculate percentage difference
166+
const isWbeFaster = debugWbe < debugOriginal
167+
const percentDiff = isWbeFaster
168+
? ((debugOriginal / debugWbe - 1) * 100).toFixed(2)
169+
: ((debugWbe / debugOriginal - 1) * 100).toFixed(2)
170+
171+
// Calculate bar widths
172+
const maxTime = Math.max(debugOriginal, debugWbe)
173+
const originalBarWidth = `${Math.min(100, (debugOriginal / maxTime) * 100)}%`
174+
const wbeBarWidth = `${Math.min(100, (debugWbe / maxTime) * 100)}%`
175+
176+
return (
177+
<div className="results">
178+
<h2>Benchmark Results</h2>
179+
180+
<div className="summary">
181+
<p>
182+
Total iterations per library: <strong>{iterations}</strong>
183+
</p>
184+
<p className="winner" style={{ color: isWbeFaster ? "green" : "red" }}>
185+
<strong>
186+
{isWbeFaster
187+
? `@wbe/debug is ${percentDiff}% faster`
188+
: `Original debug is ${percentDiff}% faster`}
189+
</strong>
190+
</p>
191+
</div>
192+
193+
<div className="result-bars">
194+
<div className="bar-container">
195+
<div className="bar-label">
196+
Original debug: {debugOriginal.toFixed(2)}ms (
197+
{originalPerCall.toFixed(3)}ms per call)
198+
</div>
199+
<div className="bar original-bar" style={{ width: originalBarWidth }}>
200+
{originalPerCall.toFixed(3)}ms
201+
</div>
202+
</div>
203+
204+
<div className="bar-container">
205+
<div className="bar-label">
206+
@wbe/debug: {debugWbe.toFixed(2)}ms ({wbePerCall.toFixed(3)}ms per
207+
call)
208+
</div>
209+
<div className="bar wbe-bar" style={{ width: wbeBarWidth }}>
210+
{wbePerCall.toFixed(3)}ms
211+
</div>
212+
</div>
213+
</div>
214+
215+
<div className="difference">
216+
<p>Difference: {difference.toFixed(2)}ms</p>
217+
</div>
218+
219+
<div className="test-details">
220+
<h3>Test Details</h3>
221+
<ul>
222+
<li>Iterations: {iterations}</li>
223+
<li>Test performed on: {new Date().toLocaleString()}</li>
224+
<li>Browser: {navigator.userAgent}</li>
225+
</ul>
226+
227+
<h3>Test Messages</h3>
228+
<pre>{JSON.stringify(testMessages, null, 2)}</pre>
229+
</div>
230+
</div>
231+
)
232+
}

‎bench/browser-bench/src/main.tsx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { render } from "preact"
2+
import { BenchmarkApp } from "./App"
3+
import "./styles/main.scss"
4+
5+
localStorage.setItem("debug", "*")
6+
;(() => {
7+
render(<BenchmarkApp />, document.getElementById("app")!)
8+
})()

0 commit comments

Comments
 (0)