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 >
0 commit comments