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 24.6.0 arm64</ span > on a < span > Apple M3 Max 14 and 36.00 GB memory</ span > </ p >
43+ < p > Tests where executed on browser version: < span id ="browserVersion "> Chromium 145.0.7632.6</ 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 > ftl undefined</ th > < th > renderer-beta 3.0.0-beta20</ th > < th > renderer 2.21.0</ th > < th > ftl-canvas undefined</ th > < th > renderer-canvasfonts 2.21.0</ th > < th > lightning2 2.17.0</ th > < th > lightning2-core 2.17.0</ th > < th > blits 1.47.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(113, 195, 125); color: rgb(0, 0, 0); "> 43.12ms ±10.00 (1.09)</ td > < td style ="background-color: rgb(114, 195, 125); color: rgb(0, 0, 0); "> 43.62ms ±7.10 (1.10)</ td > < td style ="background-color: rgb(99, 191, 124); color: rgb(0, 0, 0); "> 37.82ms ±8.20 (1.00)</ td > < td style ="background-color: rgb(249, 105, 108); color: rgb(0, 0, 0); "> 493.48ms ±33.80 (5.18)</ td > < td style ="background-color: rgb(249, 105, 108); color: rgb(0, 0, 0); "> 523.08ms ±63.20 (5.37)</ td > < td style ="background-color: rgb(251, 155, 117); color: rgb(0, 0, 0); "> 236.20ms ±93.70 (3.23)</ td > < td style ="background-color: rgb(251, 154, 117); color: rgb(0, 0, 0); "> 238.80ms ±81.20 (3.25)</ td > < td style ="background-color: rgb(145, 204, 126); color: rgb(0, 0, 0); "> 56.54ms ±10.70 (1.29)</ 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); "> 21.20ms ±5.80 (1.00)</ td > < td style ="background-color: rgb(170, 211, 128); color: rgb(0, 0, 0); "> 41.44ms ±15.50 (1.46)</ td > < td style ="background-color: rgb(126, 199, 125); color: rgb(0, 0, 0); "> 28.30ms ±9.00 (1.18)</ td > < td style ="background-color: rgb(249, 105, 108); color: rgb(0, 0, 0); "> 475.24ms ±24.10 (5.71)</ td > < td style ="background-color: rgb(249, 105, 108); color: rgb(0, 0, 0); "> 483.00ms ±32.50 (5.76)</ td > < td style ="background-color: rgb(249, 105, 108); color: rgb(0, 0, 0); "> 766.10ms ±260.60 (7.46)</ td > < td style ="background-color: rgb(249, 105, 108); color: rgb(0, 0, 0); "> 779.42ms ±109.90 (7.53)</ td > < td style ="background-color: rgb(249, 105, 108); color: rgb(0, 0, 0); "> 535.98ms ±3.40 (6.10)</ 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); "> 10.24ms ±1.90 (1.00)</ td > < td style ="background-color: rgb(219, 226, 130); color: rgb(0, 0, 0); "> 28.34ms ±18.50 (1.77)</ td > < td style ="background-color: rgb(189, 217, 129); color: rgb(0, 0, 0); "> 23.06ms ±17.80 (1.58)</ td > < td style ="background-color: rgb(249, 105, 108); color: rgb(0, 0, 0); "> 238.78ms ±108.60 (5.83)</ td > < td style ="background-color: rgb(252, 177, 121); color: rgb(0, 0, 0); "> 68.52ms ±19.00 (2.90)</ td > < td style ="background-color: rgb(249, 105, 108); color: rgb(0, 0, 0); "> 250.16ms ±55.70 (5.99)</ td > < td style ="background-color: rgb(249, 105, 108); color: rgb(0, 0, 0); "> 247.78ms ±24.30 (5.96)</ td > < td style ="background-color: rgb(249, 105, 108); color: rgb(0, 0, 0); "> 516.78ms ±10.30 (8.99)</ 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(99, 191, 124); color: rgb(0, 0, 0); "> 10.62ms ±2.20 (1.00)</ td > < td style ="background-color: rgb(130, 200, 126); color: rgb(0, 0, 0); "> 27.92ms ±17.00 (1.20)</ td > < td style ="background-color: rgb(124, 198, 125); color: rgb(0, 0, 0); "> 23.04ms ±24.60 (1.16)</ td > < td style ="background-color: rgb(224, 227, 130); color: rgb(0, 0, 0); "> 236.18ms ±10.00 (1.80)</ td > < td style ="background-color: rgb(152, 206, 127); color: rgb(0, 0, 0); "> 49.82ms ±42.50 (1.34)</ td > < td style ="background-color: rgb(218, 225, 130); color: rgb(0, 0, 0); "> 210.74ms ±30.10 (1.76)</ td > < td style ="background-color: rgb(219, 226, 130); color: rgb(0, 0, 0); "> 213.50ms ±24.90 (1.77)</ td > < td style ="background-color: rgb(255, 230, 131); color: rgb(0, 0, 0); "> 510.98ms ±20.30 (2.09)</ 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(99, 191, 124); color: rgb(0, 0, 0); "> 9.96ms ±2.40 (1.00)</ td > < td style ="background-color: rgb(114, 195, 125); color: rgb(0, 0, 0); "> 20.12ms ±3.70 (1.10)</ td > < td style ="background-color: rgb(113, 195, 125); color: rgb(0, 0, 0); "> 19.14ms ±6.50 (1.09)</ td > < td style ="background-color: rgb(137, 202, 126); color: rgb(0, 0, 0); "> 53.78ms ±222.90 (1.25)</ td > < td style ="background-color: rgb(120, 197, 125); color: rgb(0, 0, 0); "> 26.38ms ±30.90 (1.13)</ td > < td style ="background-color: rgb(167, 211, 128); color: rgb(0, 0, 0); "> 163.58ms ±60.60 (1.44)</ td > < td style ="background-color: rgb(166, 210, 127); color: rgb(0, 0, 0); "> 156.82ms ±41.80 (1.43)</ td > < td style ="background-color: rgb(225, 227, 130); color: rgb(0, 0, 0); "> 934.56ms ±374.60 (1.80)</ 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(99, 191, 124); color: rgb(0, 0, 0); "> 8.94ms ±1.20 (1.00)</ td > < td style ="background-color: rgb(163, 210, 127); color: rgb(0, 0, 0); "> 17.14ms ±22.20 (1.41)</ td > < td style ="background-color: rgb(151, 206, 127); color: rgb(0, 0, 0); "> 15.40ms ±13.70 (1.33)</ td > < td style ="background-color: rgb(106, 193, 124); color: rgb(0, 0, 0); "> 9.76ms ±6.50 (1.05)</ td > < td style ="background-color: rgb(207, 222, 130); color: rgb(0, 0, 0); "> 24.10ms ±21.40 (1.69)</ td > < td style ="background-color: rgb(249, 105, 108); color: rgb(0, 0, 0); "> 189.34ms ±78.70 (5.04)</ td > < td style ="background-color: rgb(249, 105, 108); color: rgb(0, 0, 0); "> 192.48ms ±78.40 (5.09)</ td > < td style ="background-color: rgb(249, 105, 108); color: rgb(0, 0, 0); "> 439.18ms ±366.20 (7.88)</ 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(178, 214, 128); color: rgb(0, 0, 0); "> 274.72ms ±15.20 (1.51)</ td > < td style ="background-color: rgb(99, 191, 124); color: rgb(0, 0, 0); "> 131.76ms ±46.90 (1.00)</ td > < td style ="background-color: rgb(183, 215, 128); color: rgb(0, 0, 0); "> 285.28ms ±24.70 (1.54)</ td > < td style ="background-color: rgb(252, 174, 121); color: rgb(0, 0, 0); "> 908.02ms ±130.70 (2.95)</ td > < td style ="background-color: rgb(251, 149, 116); color: rgb(0, 0, 0); "> 1128.88ms ±124.80 (3.33)</ td > < td style ="background-color: rgb(192, 218, 129); color: rgb(0, 0, 0); "> 304.32ms ±107.00 (1.60)</ td > < td style ="background-color: rgb(213, 224, 130); color: rgb(0, 0, 0); "> 351.76ms ±5.30 (1.73)</ td > < td style ="background-color: rgb(253, 202, 126); color: rgb(0, 0, 0); "> 682.86ms ±177.30 (2.51)</ 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(99, 191, 124); color: rgb(0, 0, 0); "> 34.32ms ±7.40 (1.00)</ td > < td style ="background-color: rgb(254, 220, 129); color: rgb(0, 0, 0); "> 148.92ms ±11.80 (2.24)</ td > < td style ="background-color: rgb(251, 145, 115); color: rgb(0, 0, 0); "> 315.58ms ±84.30 (3.39)</ td > < td style ="background-color: rgb(121, 197, 125); color: rgb(0, 0, 0); "> 43.78ms ±7.30 (1.14)</ td > < td style ="background-color: rgb(249, 105, 108); color: rgb(0, 0, 0); "> 1611.30ms ±191.90 (8.31)</ td > < td style ="background-color: rgb(252, 181, 122); color: rgb(0, 0, 0); "> 229.02ms ±23.70 (2.84)</ td > < td style ="background-color: rgb(252, 169, 120); color: rgb(0, 0, 0); "> 256.64ms ±26.30 (3.02)</ td > < td style ="background-color: rgb(249, 105, 108); color: rgb(0, 0, 0); "> 816.98ms ±224.10 (5.72)</ 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(99, 191, 124); color: rgb(0, 0, 0); "> 9.70ms ±2.50 (1.00)</ td > < td style ="background-color: rgb(155, 207, 127); color: rgb(0, 0, 0); "> 20.12ms ±16.80 (1.36)</ td > < td style ="background-color: rgb(134, 201, 126); color: rgb(0, 0, 0); "> 15.62ms ±22.60 (1.22)</ td > < td style ="background-color: rgb(150, 206, 127); color: rgb(0, 0, 0); "> 18.94ms ±33.10 (1.32)</ td > < td style ="background-color: rgb(150, 206, 127); color: rgb(0, 0, 0); "> 19.08ms ±16.10 (1.33)</ td > < td style ="background-color: rgb(252, 174, 121); color: rgb(0, 0, 0); "> 127.14ms ±182.50 (2.95)</ td > < td style ="background-color: rgb(251, 152, 117); color: rgb(0, 0, 0); "> 163.70ms ±117.60 (3.28)</ td > < td style ="background-color: rgb(249, 105, 108); color: rgb(0, 0, 0); "> 433.12ms ±365.00 (4.93)</ td >
124+ </ tr >
125+ < tr >
126+ < th >
127+ < b > Overall</ b >
128+ < div > Average mean of all tests</ div >
129+ </ th >
130+ < td > 1.07</ td > < td > 1.40</ td > < td > 1.50</ td > < td > 2.91</ td > < td > 3.46</ td > < td > 3.59</ td > < td > 3.67</ td > < td > 4.59</ td >
131+ </ tr >
132+ </ tbody >
133+ < thead >
134+ < tr >
135+ < th >
136+ < b > Name</ b >
137+ < br >
138+ Memory for...
139+ </ th >
140+ < th > ftl undefined</ th > < th > renderer-beta 3.0.0-beta20</ th > < th > renderer 2.21.0</ th > < th > ftl-canvas undefined</ th > < th > renderer-canvasfonts 2.21.0</ th > < th > lightning2 2.17.0</ th > < th > lightning2-core 2.17.0</ th > < th > blits 1.47.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 > 72.62MB (created in 470.10ms)</ td > < td > 29.91MB (created in 283.60ms)</ td > < td > 27.76MB (created in 288.70ms)</ td > < td > 60.17MB (created in 355.80ms)</ td > < td > 32.15MB (created in 330.00ms)</ td > < td > Failed</ td > < td > Failed</ td > < td > 39.84MB (created in 974.50ms)</ 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 > ftl undefined</ th > < th > renderer-beta 3.0.0-beta20</ th > < th > renderer 2.21.0</ th > < th > ftl-canvas undefined</ th > < th > renderer-canvasfonts 2.21.0</ th > < th > lightning2 2.17.0</ th > < th > lightning2-core 2.17.0</ th > < th > blits 1.47.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 > 40.18 KB</ td > < td > 137.22 KB</ td > < td > 170.15 KB</ td > < td > 29.76 KB</ td > < td > 150.09 KB</ td > < td > 330.22 KB</ td > < td > 330.22 KB</ td > < td > 303.88 KB</ td >
169+ </ tr >
170+ </ tbody >
171+ </ table > </ body >
172+ </ html >
0 commit comments