Skip to content

Commit 7495c86

Browse files
committed
add results with fixes
1 parent 1cca029 commit 7495c86

File tree

2 files changed

+174
-1
lines changed

2 files changed

+174
-1
lines changed
Lines changed: 172 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,172 @@
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+
<title>Lightning JS Framework benchmark</title>
8+
<style>
9+
body {
10+
font-family: Arial, sans-serif;
11+
margin: 0;
12+
padding: 0;
13+
}
14+
table {
15+
width: 100%;
16+
border-collapse: collapse;
17+
}
18+
th, td {
19+
border: 1px solid #ddd;
20+
padding: 8px;
21+
text-align: left;
22+
}
23+
th {
24+
background-color: #f2f2f2;
25+
}
26+
h2 {
27+
margin: 0;
28+
}
29+
p {
30+
margin: 0;
31+
}
32+
div {
33+
padding: 10px;
34+
}
35+
span {
36+
font-weight: bold;
37+
}
38+
</style>
39+
</head>
40+
<body><div>
41+
<h2>Results for Lightning JS Framework benchmark</h2>
42+
<p>The benchmark was run on <span>darwin 23.6.0 arm64</span> on a <span>Apple M1 Pro 10 and 16.00 GB memory</span></p>
43+
<p>Tests where executed on browser version: <span id="browserVersion">Chromium 125.0.6422.26</span> using PlayWright</p>
44+
</div><div>
45+
<h2>Results</h2>
46+
<p>Tests are run by executing an operation and waiting for the WebGL rennder to be Idle</p>
47+
<p>Results are the time in milliseconds to execute the operation</p>
48+
<p>All operations are executed on 6x CPU slowdown</p>
49+
</div><table>
50+
<thead>
51+
<tr>
52+
<th>
53+
<b>Name</b>
54+
<br>
55+
Duration for...
56+
</th>
57+
<th>renderer 2.13.0</th><th>lightning2-core 2.14.0</th><th>solid 2.13.0</th><th>blits 1.21.0</th><th>react 2.13.0</th><th>lightning2 2.14.0</th><th>renderer-canvasfonts 2.13.0</th>
58+
</tr>
59+
60+
</thead>
61+
<tbody>
62+
<tr>
63+
<th>
64+
<b>create rows</b>
65+
<div>creating 1,000 nodes. (5 warmup runs)</div>
66+
</th>
67+
<td style="background-color: rgb(99, 191, 124); color: rgb(0, 0, 0);">69.68ms ±21.20 (1.00)</td><td style="background-color: rgb(252, 176, 121); color: rgb(0, 0, 0);">369.86ms ±440.50 (2.91)</td><td style="background-color: rgb(113, 195, 125); color: rgb(0, 0, 0);">79.68ms ±15.60 (1.09)</td><td style="background-color: rgb(143, 204, 126); color: rgb(0, 0, 0);">102.34ms ±66.70 (1.28)</td><td style="background-color: rgb(154, 207, 127); color: rgb(0, 0, 0);">111.58ms ±16.10 (1.35)</td><td style="background-color: rgb(249, 105, 108); color: rgb(0, 0, 0);">654.52ms ±341.20 (4.19)</td><td style="background-color: rgb(249, 105, 108); color: rgb(0, 0, 0);">1619.60ms ±273.10 (7.49)</td>
68+
</tr>
69+
<tr>
70+
<th>
71+
<b>replace all rows</b>
72+
<div>updating all 1,000 nodes. (5 warmup runs)</div>
73+
</th>
74+
<td style="background-color: rgb(99, 191, 124); color: rgb(0, 0, 0);">29.72ms ±5.50 (1.00)</td><td style="background-color: rgb(218, 225, 130); color: rgb(0, 0, 0);">81.68ms ±22.30 (1.76)</td><td style="background-color: rgb(99, 191, 124); color: rgb(0, 0, 0);">29.72ms ±6.00 (1.00)</td><td style="background-color: rgb(103, 192, 124); color: rgb(0, 0, 0);">31.12ms ±2.10 (1.03)</td><td style="background-color: rgb(141, 203, 126); color: rgb(0, 0, 0);">45.58ms ±6.70 (1.27)</td><td style="background-color: rgb(200, 220, 129); color: rgb(0, 0, 0);">72.54ms ±42.80 (1.65)</td><td style="background-color: rgb(250, 130, 113); color: rgb(0, 0, 0);">296.10ms ±49.20 (3.62)</td>
75+
</tr>
76+
<tr>
77+
<th>
78+
<b>partial update rows</b>
79+
<div>updating every 10th node for 1,000 nodes. (5 warmup runs)</div>
80+
</th>
81+
<td style="background-color: rgb(99, 191, 124); color: rgb(0, 0, 0);">27.26ms ±3.70 (1.00)</td><td style="background-color: rgb(159, 208, 127); color: rgb(0, 0, 0);">48.68ms ±25.90 (1.38)</td><td style="background-color: rgb(101, 192, 124); color: rgb(0, 0, 0);">28.04ms ±3.80 (1.02)</td><td style="background-color: rgb(104, 192, 124); color: rgb(0, 0, 0);">28.88ms ±3.10 (1.03)</td><td style="background-color: rgb(133, 201, 126); color: rgb(0, 0, 0);">38.88ms ±13.90 (1.22)</td><td style="background-color: rgb(199, 220, 129); color: rgb(0, 0, 0);">65.88ms ±35.20 (1.64)</td><td style="background-color: rgb(252, 181, 122); color: rgb(0, 0, 0);">175.36ms ±28.60 (2.84)</td>
82+
</tr>
83+
<tr>
84+
<th>
85+
<b>select row</b>
86+
<div>selecting a node at random. (5 warmup runs)</div>
87+
</th>
88+
<td style="background-color: rgb(114, 195, 125); color: rgb(0, 0, 0);">27.56ms ±6.90 (1.09)</td><td style="background-color: rgb(99, 191, 124); color: rgb(0, 0, 0);">17.10ms ±7.60 (1.00)</td><td style="background-color: rgb(114, 195, 125); color: rgb(0, 0, 0);">28.06ms ±2.40 (1.10)</td><td style="background-color: rgb(121, 197, 125); color: rgb(0, 0, 0);">34.60ms ±14.70 (1.14)</td><td style="background-color: rgb(120, 197, 125); color: rgb(0, 0, 0);">33.64ms ±12.80 (1.14)</td><td style="background-color: rgb(100, 191, 124); color: rgb(0, 0, 0);">17.78ms ±7.20 (1.01)</td><td style="background-color: rgb(151, 206, 127); color: rgb(0, 0, 0);">78.14ms ±11.00 (1.33)</td>
89+
</tr>
90+
<tr>
91+
<th>
92+
<b>swap rows</b>
93+
<div>swapping 2 nodes. (5 warmup runs)</div>
94+
</th>
95+
<td style="background-color: rgb(123, 198, 125); color: rgb(0, 0, 0);">31.34ms ±19.70 (1.15)</td><td style="background-color: rgb(99, 191, 124); color: rgb(0, 0, 0);">10.52ms ±6.50 (1.00)</td><td style="background-color: rgb(129, 200, 126); color: rgb(0, 0, 0);">39.98ms ±4.90 (1.19)</td><td style="background-color: rgb(132, 201, 126); color: rgb(0, 0, 0);">46.24ms ±8.90 (1.21)</td><td style="background-color: rgb(133, 201, 126); color: rgb(0, 0, 0);">47.82ms ±1.60 (1.22)</td><td style="background-color: rgb(102, 192, 124); color: rgb(0, 0, 0);">12.14ms ±1.70 (1.02)</td><td style="background-color: rgb(131, 200, 126); color: rgb(0, 0, 0);">44.06ms ±37.60 (1.20)</td>
96+
</tr>
97+
<tr>
98+
<th>
99+
<b>remove row</b>
100+
<div>removing a node. (5 warmup runs)</div>
101+
</th>
102+
<td style="background-color: rgb(255, 232, 131); color: rgb(0, 0, 0);">27.90ms ±4.40 (2.06)</td><td style="background-color: rgb(101, 192, 124); color: rgb(0, 0, 0);">7.28ms ±3.20 (1.01)</td><td style="background-color: rgb(255, 234, 132); color: rgb(0, 0, 0);">27.18ms ±4.50 (2.03)</td><td style="background-color: rgb(255, 231, 131); color: rgb(0, 0, 0);">28.36ms ±5.00 (2.08)</td><td style="background-color: rgb(255, 226, 130); color: rgb(0, 0, 0);">30.32ms ±5.90 (2.16)</td><td style="background-color: rgb(99, 191, 124); color: rgb(0, 0, 0);">7.12ms ±1.80 (1.00)</td><td style="background-color: rgb(254, 212, 128); color: rgb(0, 0, 0);">36.10ms ±9.10 (2.36)</td>
103+
</tr>
104+
<tr>
105+
<th>
106+
<b>create many rows</b>
107+
<div>creating 10,000 nodes. (5 warmup runs)</div>
108+
</th>
109+
<td style="background-color: rgb(120, 197, 125); color: rgb(0, 0, 0);">311.92ms ±32.60 (1.14)</td><td style="background-color: rgb(99, 191, 124); color: rgb(0, 0, 0);">248.16ms ±24.40 (1.00)</td><td style="background-color: rgb(176, 213, 128); color: rgb(0, 0, 0);">507.56ms ±70.10 (1.49)</td><td style="background-color: rgb(179, 214, 128); color: rgb(0, 0, 0);">518.14ms ±55.40 (1.51)</td><td style="background-color: rgb(252, 174, 121); color: rgb(0, 0, 0);">1701.48ms ±783.80 (2.94)</td><td style="background-color: rgb(249, 105, 108); color: rgb(0, 0, 0);">3238.72ms ±58.60 (4.21)</td><td style="background-color: rgb(249, 105, 108); color: rgb(0, 0, 0);">3605.42ms ±367.20 (4.48)</td>
110+
</tr>
111+
<tr>
112+
<th>
113+
<b>append rows</b>
114+
<div>appending 1,000 nodes to 1,000 nodes. (5 warmup runs)</div>
115+
</th>
116+
<td style="background-color: rgb(121, 197, 125); color: rgb(0, 0, 0);">331.86ms ±44.00 (1.14)</td><td style="background-color: rgb(99, 191, 124); color: rgb(0, 0, 0);">260.36ms ±21.00 (1.00)</td><td style="background-color: rgb(174, 213, 128); color: rgb(0, 0, 0);">530.12ms ±48.10 (1.48)</td><td style="background-color: rgb(181, 215, 128); color: rgb(0, 0, 0);">562.70ms ±53.30 (1.53)</td><td style="background-color: rgb(253, 190, 124); color: rgb(0, 0, 0);">1579.98ms ±185.10 (2.70)</td><td style="background-color: rgb(249, 105, 108); color: rgb(0, 0, 0);">3266.66ms ±133.20 (4.02)</td><td style="background-color: rgb(249, 105, 108); color: rgb(0, 0, 0);">4020.54ms ±253.90 (4.51)</td>
117+
</tr>
118+
<tr>
119+
<th>
120+
<b>clear rows</b>
121+
<div>removing all nodes. (5 warmup runs)</div>
122+
</th>
123+
<td style="background-color: rgb(206, 222, 129); color: rgb(0, 0, 0);">15.36ms ±3.20 (1.68)</td><td style="background-color: rgb(99, 191, 124); color: rgb(0, 0, 0);">4.44ms ±0.80 (1.00)</td><td style="background-color: rgb(196, 219, 129); color: rgb(0, 0, 0);">14.10ms ±5.30 (1.62)</td><td style="background-color: rgb(219, 226, 130); color: rgb(0, 0, 0);">17.26ms ±4.30 (1.77)</td><td style="background-color: rgb(210, 223, 130); color: rgb(0, 0, 0);">16.00ms ±2.00 (1.71)</td><td style="background-color: rgb(251, 154, 117); color: rgb(0, 0, 0);">73.48ms ±2.10 (3.25)</td><td style="background-color: rgb(250, 234, 132); color: rgb(0, 0, 0);">22.18ms ±3.60 (1.97)</td>
124+
</tr>
125+
<tr>
126+
<th>
127+
<b>Overall</b>
128+
<div>Average mean of all tests</div>
129+
</th>
130+
<td>1.25</td><td>1.34</td><td>1.34</td><td>1.40</td><td>1.75</td><td>2.44</td><td>3.31</td>
131+
</tr>
132+
</tbody>
133+
<thead>
134+
<tr>
135+
<th>
136+
<b>Name</b>
137+
<br>
138+
Memory for...
139+
</th>
140+
<th>renderer 2.13.0</th><th>lightning2-core 2.14.0</th><th>solid 2.13.0</th><th>blits 1.21.0</th><th>react 2.13.0</th><th>lightning2 2.14.0</th><th>renderer-canvasfonts 2.13.0</th>
141+
</tr>
142+
</thead>
143+
<tbody>
144+
<tr>
145+
<th>
146+
<b>create 20k nodes</b>
147+
<div>creating 20k nodes.</div>
148+
</th>
149+
<td>30.77MB (created in 560.80ms)</td><td>Failed</td><td>32.94MB (created in 441.80ms)</td><td>38.50MB (created in 275.50msms)</td><td>54.60MB (created in 4263.60ms)</td><td>Failed</td><td>26.03MB (created in 475.80ms)</td>
150+
</tr>
151+
</tbody>
152+
<thead>
153+
<tr>
154+
<th>
155+
<b>Name</b>
156+
<br>
157+
File size for...
158+
</th>
159+
<th>renderer 2.13.0</th><th>lightning2-core 2.14.0</th><th>solid 2.13.0</th><th>blits 1.21.0</th><th>react 2.13.0</th><th>lightning2 2.14.0</th><th>renderer-canvasfonts 2.13.0</th>
160+
</tr>
161+
</thead>
162+
<tbody>
163+
<tr>
164+
<th>
165+
<b>bundle size</b>
166+
<div>JavaScript size of the framework</div>
167+
</th>
168+
<td>162.16 KB</td><td>329.58 KB</td><td>202.50 KB</td><td>275.31 KB</td><td>497.17 KB</td><td>329.95 KB</td><td>145.14 KB</td>
169+
</tr>
170+
</tbody>
171+
</table></body>
172+
</html>

official_results/results.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,5 +8,6 @@
88
"20241022 Blits 1.8.0 Renderer 2.4.0 Chromium 128.0.6613.18": "20241022_results_Chromium 128.0.6613.18_darwin_23.6.0_arm64.html",
99
"20250112 Blits 1.14.1 Renderer 2.8.0 Chromium 128.0.6613.18": "20250112_results_Chromium 128.0.6613.18_darwin_23.6.0_arm64.html",
1010
"20250227 Blits 1.21.0 Renderer 2.13.0 Chromium 128.0.6613.18": "20250227_results_Chromium 128.0.6613.18_darwin_23.6.0_arm64.html",
11-
"20250311 Blits 1.21.0 Renderer 2.13.0 Chromium 125.0.6422.26": "20250311_results_Chromium 125.0.6422.26_darwin_23.6.0_arm64.html"
11+
"20250311 Blits 1.21.0 Renderer 2.13.0 Chromium 125.0.6422.26": "20250311_results_Chromium 125.0.6422.26_darwin_23.6.0_arm64.html",
12+
"20250312 Blits 1.21.0 Renderer 2.13.0 Chromium 125.0.6422.26": "20250312_results_Chromium 125.0.6422.26_darwin_23.6.0_arm64.html"
1213
}

0 commit comments

Comments
 (0)