git.iko.soy/typeable/elm-ui
on master help sign in
run benchmark for all implentations
commita2a4b328140a5f7b6c850b8e49cafa5e077dede7 authorMatthew Griffith <mdg.griffith@gmail.com> dateSat 29 Jun 2019, 21:04 (7 years ago) parent2f910a8
4 files changed+1286−6
compare with master
unifiedsplit
benchmarks/results/1.1.1-candidate-optimized.json+618 benchmarks/results/1.1.1-candidate.json+618 benchmarks/runtime/benchPage.js+6−2 benchmarks/runtime/index.js+44−4
benchmarks/results/1.1.1-candidate-optimized.jsonnew file+618
@@ -0,0 +1,618 @@
1+[
2+ {
3+ "name": "Baseline",
4+ "perf": {
5+ "Timestamp": 345986.702145,
6+ "Nodes": 32,
7+ "LayoutDuration": 0.145099,
8+ "RecalcStyleDuration": 0.001496,
9+ "ScriptDuration": 0.030322,
10+ "JSHeapUsedSize": 2697680,
11+ "FirstMeaningfulPaint": 345985.868625,
12+ "DomContentLoaded": 345985.545586,
13+ "NavigationStart": 345985.408888,
14+ "TimeToFirstPaintMS": 323.0389999807812
15+ },
16+ "frames": {
17+ "count": 597,
18+ "median": 17,
19+ "mode": 17,
20+ "avg": 16.77386934673367,
21+ "fps": 59.616536848412224
22+ }
23+ },
24+ {
25+ "name": "elmUI1024",
26+ "perf": {
27+ "Timestamp": 345998.637,
28+ "Nodes": 3110,
29+ "LayoutDuration": 0.143663,
30+ "RecalcStyleDuration": 0.037193,
31+ "ScriptDuration": 0.124266,
32+ "JSHeapUsedSize": 5124552,
33+ "FirstMeaningfulPaint": 345997.643123,
34+ "DomContentLoaded": 345997.439475,
35+ "NavigationStart": 345997.266533,
36+ "TimeToFirstPaintMS": 203.64799996605143
37+ },
38+ "frames": {
39+ "count": 595,
40+ "median": 17,
41+ "mode": 17,
42+ "avg": 16.82689075630252,
43+ "fps": 59.42868557730723
44+ }
45+ },
46+ {
47+ "name": "elmUI128",
48+ "perf": {
49+ "Timestamp": 346010.270391,
50+ "Nodes": 422,
51+ "LayoutDuration": 0.088399,
52+ "RecalcStyleDuration": 0.004369,
53+ "ScriptDuration": 0.039421,
54+ "JSHeapUsedSize": 3047360,
55+ "FirstMeaningfulPaint": 346009.272964,
56+ "DomContentLoaded": 346009.171456,
57+ "NavigationStart": 346009.087675,
58+ "TimeToFirstPaintMS": 101.50799999246374
59+ },
60+ "frames": {
61+ "count": 601,
62+ "median": 17,
63+ "mode": 17,
64+ "avg": 16.650582362728784,
65+ "fps": 60.057959428400125
66+ }
67+ },
68+ {
69+ "name": "elmUI2048",
70+ "perf": {
71+ "Timestamp": 346022.120399,
72+ "Nodes": 6182,
73+ "LayoutDuration": 0.195444,
74+ "RecalcStyleDuration": 0.06521,
75+ "ScriptDuration": 0.148801,
76+ "JSHeapUsedSize": 7547272,
77+ "FirstMeaningfulPaint": 346021.124589,
78+ "DomContentLoaded": 346020.833759,
79+ "NavigationStart": 346020.651084,
80+ "TimeToFirstPaintMS": 290.83000001264736
81+ },
82+ "frames": {
83+ "count": 474,
84+ "median": 20,
85+ "mode": 18,
86+ "avg": 21.116033755274263,
87+ "fps": 47.35737835947647
88+ }
89+ },
90+ {
91+ "name": "elmUI24",
92+ "perf": {
93+ "Timestamp": 346033.831737,
94+ "Nodes": 110,
95+ "LayoutDuration": 0.094541,
96+ "RecalcStyleDuration": 0.001542,
97+ "ScriptDuration": 0.025952,
98+ "JSHeapUsedSize": 2957488,
99+ "FirstMeaningfulPaint": 346032.833183,
100+ "DomContentLoaded": 346032.728693,
101+ "NavigationStart": 346032.648695,
102+ "TimeToFirstPaintMS": 104.48999999789521
103+ },
104+ "frames": {
105+ "count": 599,
106+ "median": 17,
107+ "mode": 17,
108+ "avg": 16.681135225375627,
109+ "fps": 59.94795836669335
110+ }
111+ },
112+ {
113+ "name": "elmUI256",
114+ "perf": {
115+ "Timestamp": 346045.348411,
116+ "Nodes": 806,
117+ "LayoutDuration": 0.095629,
118+ "RecalcStyleDuration": 0.007168,
119+ "ScriptDuration": 0.045604,
120+ "JSHeapUsedSize": 3775848,
121+ "FirstMeaningfulPaint": 346044.351806,
122+ "DomContentLoaded": 346044.238766,
123+ "NavigationStart": 346044.162083,
124+ "TimeToFirstPaintMS": 113.03999996744096
125+ },
126+ "frames": {
127+ "count": 600,
128+ "median": 17,
129+ "mode": 17,
130+ "avg": 16.656666666666666,
131+ "fps": 60.03602161296778
132+ }
133+ },
134+ {
135+ "name": "elmUI4096",
136+ "perf": {
137+ "Timestamp": 346057.300433,
138+ "Nodes": 12326,
139+ "LayoutDuration": 0.228002,
140+ "RecalcStyleDuration": 0.116152,
141+ "ScriptDuration": 0.210452,
142+ "JSHeapUsedSize": 13654464,
143+ "FirstMeaningfulPaint": 346056.302642,
144+ "DomContentLoaded": 346055.912087,
145+ "NavigationStart": 346055.667222,
146+ "TimeToFirstPaintMS": 390.5550000490621
147+ },
148+ "frames": {
149+ "count": 239,
150+ "median": 38,
151+ "mode": 38,
152+ "avg": 42,
153+ "fps": 23.80952380952381
154+ }
155+ },
156+ {
157+ "name": "elmUI512",
158+ "perf": {
159+ "Timestamp": 346069.183102,
160+ "Nodes": 1574,
161+ "LayoutDuration": 0.130964,
162+ "RecalcStyleDuration": 0.019871,
163+ "ScriptDuration": 0.102341,
164+ "JSHeapUsedSize": 3823384,
165+ "FirstMeaningfulPaint": 346068.189191,
166+ "DomContentLoaded": 346068.014006,
167+ "NavigationStart": 346067.858869,
168+ "TimeToFirstPaintMS": 175.18500000005588
169+ },
170+ "frames": {
171+ "count": 597,
172+ "median": 17,
173+ "mode": 17,
174+ "avg": 16.765494137353432,
175+ "fps": 59.64631831351784
176+ }
177+ },
178+ {
179+ "name": "elmUI64",
180+ "perf": {
181+ "Timestamp": 346080.805163,
182+ "Nodes": 230,
183+ "LayoutDuration": 0.086837,
184+ "RecalcStyleDuration": 0.002749,
185+ "ScriptDuration": 0.035007,
186+ "JSHeapUsedSize": 3241216,
187+ "FirstMeaningfulPaint": 346079.807008,
188+ "DomContentLoaded": 346079.708721,
189+ "NavigationStart": 346079.639147,
190+ "TimeToFirstPaintMS": 98.28699997160584
191+ },
192+ "frames": {
193+ "count": 601,
194+ "median": 17,
195+ "mode": 17,
196+ "avg": 16.640599001663894,
197+ "fps": 60.093990600939904
198+ }
199+ },
200+ {
201+ "name": "elmUI8192",
202+ "perf": {
203+ "Timestamp": 346093.404299,
204+ "Nodes": 24604,
205+ "LayoutDuration": 0.396954,
206+ "RecalcStyleDuration": 0.25935,
207+ "ScriptDuration": 0.473007,
208+ "JSHeapUsedSize": 21113448,
209+ "FirstMeaningfulPaint": 0,
210+ "DomContentLoaded": 346091.658898,
211+ "NavigationStart": 346091.153798,
212+ "TimeToFirstPaintMS": -346091658.898
213+ },
214+ "frames": {
215+ "count": 106,
216+ "median": 88,
217+ "mode": 76,
218+ "avg": 94.94339622641509,
219+ "fps": 10.532591414944356
220+ }
221+ },
222+ {
223+ "name": "viewHtml1024",
224+ "perf": {
225+ "Timestamp": 346105.074855,
226+ "Nodes": 2082,
227+ "LayoutDuration": 0.113217,
228+ "RecalcStyleDuration": 0.005573,
229+ "ScriptDuration": 0.021185,
230+ "JSHeapUsedSize": 3026520,
231+ "FirstMeaningfulPaint": 346104.081608,
232+ "DomContentLoaded": 346103.951646,
233+ "NavigationStart": 346103.853903,
234+ "TimeToFirstPaintMS": 129.96200000634417
235+ },
236+ "frames": {
237+ "count": 601,
238+ "median": 17,
239+ "mode": 17,
240+ "avg": 16.630615640599,
241+ "fps": 60.130065032516264
242+ }
243+ },
244+ {
245+ "name": "viewHtml128",
246+ "perf": {
247+ "Timestamp": 346116.54228,
248+ "Nodes": 290,
249+ "LayoutDuration": 0.084021,
250+ "RecalcStyleDuration": 0.000915,
251+ "ScriptDuration": 0.009023,
252+ "JSHeapUsedSize": 2839840,
253+ "FirstMeaningfulPaint": 346115.548342,
254+ "DomContentLoaded": 346115.455214,
255+ "NavigationStart": 346115.420731,
256+ "TimeToFirstPaintMS": 93.12799997860566
257+ },
258+ "frames": {
259+ "count": 601,
260+ "median": 17,
261+ "mode": 17,
262+ "avg": 16.628951747088188,
263+ "fps": 60.13608164898939
264+ }
265+ },
266+ {
267+ "name": "viewHtml2048",
268+ "perf": {
269+ "Timestamp": 346128.083785,
270+ "Nodes": 4130,
271+ "LayoutDuration": 0.132194,
272+ "RecalcStyleDuration": 0.011767,
273+ "ScriptDuration": 0.033818,
274+ "JSHeapUsedSize": 3553304,
275+ "FirstMeaningfulPaint": 346127.093366,
276+ "DomContentLoaded": 346126.933672,
277+ "NavigationStart": 346126.879529,
278+ "TimeToFirstPaintMS": 159.6939999726601
279+ },
280+ "frames": {
281+ "count": 602,
282+ "median": 17,
283+ "mode": 17,
284+ "avg": 16.61794019933555,
285+ "fps": 60.17592962814874
286+ }
287+ },
288+ {
289+ "name": "viewHtml24",
290+ "perf": {
291+ "Timestamp": 346139.80112,
292+ "Nodes": 82,
293+ "LayoutDuration": 0.10086,
294+ "RecalcStyleDuration": 0.000441,
295+ "ScriptDuration": 0.01238,
296+ "JSHeapUsedSize": 2734168,
297+ "FirstMeaningfulPaint": 346138.80972,
298+ "DomContentLoaded": 346138.693184,
299+ "NavigationStart": 346138.637483,
300+ "TimeToFirstPaintMS": 116.53600004501641
301+ },
302+ "frames": {
303+ "count": 601,
304+ "median": 17,
305+ "mode": 17,
306+ "avg": 16.64226289517471,
307+ "fps": 60.08798240351929
308+ }
309+ },
310+ {
311+ "name": "viewHtml256",
312+ "perf": {
313+ "Timestamp": 346151.228859,
314+ "Nodes": 546,
315+ "LayoutDuration": 0.089365,
316+ "RecalcStyleDuration": 0.001558,
317+ "ScriptDuration": 0.009812,
318+ "JSHeapUsedSize": 2978440,
319+ "FirstMeaningfulPaint": 346150.23484,
320+ "DomContentLoaded": 346150.134675,
321+ "NavigationStart": 346150.104686,
322+ "TimeToFirstPaintMS": 100.16500001074746
323+ },
324+ "frames": {
325+ "count": 601,
326+ "median": 17,
327+ "mode": 17,
328+ "avg": 16.622296173044926,
329+ "fps": 60.16016016016015
330+ }
331+ },
332+ {
333+ "name": "viewHtml4096",
334+ "perf": {
335+ "Timestamp": 346162.959497,
336+ "Nodes": 8226,
337+ "LayoutDuration": 0.218309,
338+ "RecalcStyleDuration": 0.020438,
339+ "ScriptDuration": 0.05622,
340+ "JSHeapUsedSize": 4545408,
341+ "FirstMeaningfulPaint": 346161.990085,
342+ "DomContentLoaded": 346161.717714,
343+ "NavigationStart": 346161.640804,
344+ "TimeToFirstPaintMS": 272.3709999700077
345+ },
346+ "frames": {
347+ "count": 601,
348+ "median": 17,
349+ "mode": 17,
350+ "avg": 16.625623960066555,
351+ "fps": 60.14811849479584
352+ }
353+ },
354+ {
355+ "name": "viewHtml512",
356+ "perf": {
357+ "Timestamp": 346174.413124,
358+ "Nodes": 1058,
359+ "LayoutDuration": 0.0982,
360+ "RecalcStyleDuration": 0.002726,
361+ "ScriptDuration": 0.011984,
362+ "JSHeapUsedSize": 3230320,
363+ "FirstMeaningfulPaint": 346173.418192,
364+ "DomContentLoaded": 346173.307241,
365+ "NavigationStart": 346173.275328,
366+ "TimeToFirstPaintMS": 110.9510000096634
367+ },
368+ "frames": {
369+ "count": 602,
370+ "median": 17,
371+ "mode": 17,
372+ "avg": 16.619601328903656,
373+ "fps": 60.169915042478756
374+ }
375+ },
376+ {
377+ "name": "viewHtml64",
378+ "perf": {
379+ "Timestamp": 346185.879167,
380+ "Nodes": 162,
381+ "LayoutDuration": 0.086741,
382+ "RecalcStyleDuration": 0.000479,
383+ "ScriptDuration": 0.008242,
384+ "JSHeapUsedSize": 2775368,
385+ "FirstMeaningfulPaint": 346184.884919,
386+ "DomContentLoaded": 346184.789315,
387+ "NavigationStart": 346184.760847,
388+ "TimeToFirstPaintMS": 95.6039999728091
389+ },
390+ "frames": {
391+ "count": 602,
392+ "median": 17,
393+ "mode": 17,
394+ "avg": 16.61794019933555,
395+ "fps": 60.17592962814874
396+ }
397+ },
398+ {
399+ "name": "viewHtml8192",
400+ "perf": {
401+ "Timestamp": 346197.765446,
402+ "Nodes": 16418,
403+ "LayoutDuration": 0.330272,
404+ "RecalcStyleDuration": 0.050241,
405+ "ScriptDuration": 0.086286,
406+ "JSHeapUsedSize": 6687328,
407+ "FirstMeaningfulPaint": 0,
408+ "DomContentLoaded": 346196.379984,
409+ "NavigationStart": 346196.273358,
410+ "TimeToFirstPaintMS": -346196379.984
411+ },
412+ "frames": {
413+ "count": 582,
414+ "median": 17,
415+ "mode": 17,
416+ "avg": 17.189003436426116,
417+ "fps": 58.17672930827669
418+ }
419+ },
420+ {
421+ "name": "viewInline1024",
422+ "perf": {
423+ "Timestamp": 346209.261267,
424+ "Nodes": 2082,
425+ "LayoutDuration": 0.115626,
426+ "RecalcStyleDuration": 0.00799,
427+ "ScriptDuration": 0.039209,
428+ "JSHeapUsedSize": 3297280,
429+ "FirstMeaningfulPaint": 346208.276922,
430+ "DomContentLoaded": 346208.132481,
431+ "NavigationStart": 346208.072482,
432+ "TimeToFirstPaintMS": 144.4410000112839
433+ },
434+ "frames": {
435+ "count": 601,
436+ "median": 17,
437+ "mode": 17,
438+ "avg": 16.655574043261232,
439+ "fps": 60.039960039960036
440+ }
441+ },
442+ {
443+ "name": "viewInline128",
444+ "perf": {
445+ "Timestamp": 346221.259416,
446+ "Nodes": 290,
447+ "LayoutDuration": 0.112782,
448+ "RecalcStyleDuration": 0.00195,
449+ "ScriptDuration": 0.017902,
450+ "JSHeapUsedSize": 2894680,
451+ "FirstMeaningfulPaint": 346220.276355,
452+ "DomContentLoaded": 346220.248296,
453+ "NavigationStart": 346220.051557,
454+ "TimeToFirstPaintMS": 28.058999974746257
455+ },
456+ "frames": {
457+ "count": 601,
458+ "median": 17,
459+ "mode": 17,
460+ "avg": 16.64559068219634,
461+ "fps": 60.07596961215514
462+ }
463+ },
464+ {
465+ "name": "viewInline2048",
466+ "perf": {
467+ "Timestamp": 346232.845892,
468+ "Nodes": 4130,
469+ "LayoutDuration": 0.146042,
470+ "RecalcStyleDuration": 0.012963,
471+ "ScriptDuration": 0.05584,
472+ "JSHeapUsedSize": 3667392,
473+ "FirstMeaningfulPaint": 346231.862693,
474+ "DomContentLoaded": 346231.683101,
475+ "NavigationStart": 346231.607326,
476+ "TimeToFirstPaintMS": 179.59200002951548
477+ },
478+ "frames": {
479+ "count": 599,
480+ "median": 17,
481+ "mode": 17,
482+ "avg": 16.70450751252087,
483+ "fps": 59.864081551069354
484+ }
485+ },
486+ {
487+ "name": "viewInline24",
488+ "perf": {
489+ "Timestamp": 346244.547507,
490+ "Nodes": 82,
491+ "LayoutDuration": 0.095162,
492+ "RecalcStyleDuration": 0.000847,
493+ "ScriptDuration": 0.011158,
494+ "JSHeapUsedSize": 2750736,
495+ "FirstMeaningfulPaint": 346243.551815,
496+ "DomContentLoaded": 346243.44497,
497+ "NavigationStart": 346243.397346,
498+ "TimeToFirstPaintMS": 106.84500000206754
499+ },
500+ "frames": {
501+ "count": 601,
502+ "median": 17,
503+ "mode": 17,
504+ "avg": 16.632279534109816,
505+ "fps": 60.12404961984794
506+ }
507+ },
508+ {
509+ "name": "viewInline256",
510+ "perf": {
511+ "Timestamp": 346256.312428,
512+ "Nodes": 546,
513+ "LayoutDuration": 0.132689,
514+ "RecalcStyleDuration": 0.00552,
515+ "ScriptDuration": 0.024725,
516+ "JSHeapUsedSize": 3080456,
517+ "FirstMeaningfulPaint": 346255.335878,
518+ "DomContentLoaded": 346255.166638,
519+ "NavigationStart": 346255.08648,
520+ "TimeToFirstPaintMS": 169.24000001745299
521+ },
522+ "frames": {
523+ "count": 599,
524+ "median": 17,
525+ "mode": 17,
526+ "avg": 16.69282136894825,
527+ "fps": 59.905990599059905
528+ }
529+ },
530+ {
531+ "name": "viewInline4096",
532+ "perf": {
533+ "Timestamp": 346268.55972,
534+ "Nodes": 8226,
535+ "LayoutDuration": 0.266169,
536+ "RecalcStyleDuration": 0.040441,
537+ "ScriptDuration": 0.151584,
538+ "JSHeapUsedSize": 4803920,
539+ "FirstMeaningfulPaint": 346267.570152,
540+ "DomContentLoaded": 346267.554917,
541+ "NavigationStart": 346267.010086,
542+ "TimeToFirstPaintMS": 15.234999998938292
543+ },
544+ "frames": {
545+ "count": 572,
546+ "median": 17,
547+ "mode": 17,
548+ "avg": 17.51923076923077,
549+ "fps": 57.080131723380894
550+ }
551+ },
552+ {
553+ "name": "viewInline512",
554+ "perf": {
555+ "Timestamp": 346280.413897,
556+ "Nodes": 1058,
557+ "LayoutDuration": 0.120525,
558+ "RecalcStyleDuration": 0.00541,
559+ "ScriptDuration": 0.025665,
560+ "JSHeapUsedSize": 3425912,
561+ "FirstMeaningfulPaint": 346279.440873,
562+ "DomContentLoaded": 346279.280955,
563+ "NavigationStart": 346279.218933,
564+ "TimeToFirstPaintMS": 159.91799999028444
565+ },
566+ "frames": {
567+ "count": 601,
568+ "median": 17,
569+ "mode": 17,
570+ "avg": 16.64226289517471,
571+ "fps": 60.08798240351929
572+ }
573+ },
574+ {
575+ "name": "viewInline64",
576+ "perf": {
577+ "Timestamp": 346292.197182,
578+ "Nodes": 162,
579+ "LayoutDuration": 0.108792,
580+ "RecalcStyleDuration": 0.00093,
581+ "ScriptDuration": 0.014489,
582+ "JSHeapUsedSize": 2806104,
583+ "FirstMeaningfulPaint": 346291.219288,
584+ "DomContentLoaded": 346291.080611,
585+ "NavigationStart": 346291.032715,
586+ "TimeToFirstPaintMS": 138.67700000992045
587+ },
588+ "frames": {
589+ "count": 601,
590+ "median": 17,
591+ "mode": 17,
592+ "avg": 16.638935108153078,
593+ "fps": 60.1
594+ }
595+ },
596+ {
597+ "name": "viewInline8192",
598+ "perf": {
599+ "Timestamp": 346304.274811,
600+ "Nodes": 16418,
601+ "LayoutDuration": 0.473895,
602+ "RecalcStyleDuration": 0.063373,
603+ "ScriptDuration": 0.164557,
604+ "JSHeapUsedSize": 7591024,
605+ "FirstMeaningfulPaint": 0,
606+ "DomContentLoaded": 346302.724079,
607+ "NavigationStart": 346302.540332,
608+ "TimeToFirstPaintMS": -346302724.079
609+ },
610+ "frames": {
611+ "count": 430,
612+ "median": 21,
613+ "mode": 22,
614+ "avg": 23.290697674418606,
615+ "fps": 42.93559660509236
616+ }
617+ }
618+]
benchmarks/results/1.1.1-candidate.jsonnew file+618
@@ -0,0 +1,618 @@
1+[
2+ {
3+ "name": "Baseline",
4+ "perf": {
5+ "Timestamp": 344878.643758,
6+ "Nodes": 32,
7+ "LayoutDuration": 0.084632,
8+ "RecalcStyleDuration": 0.000419,
9+ "ScriptDuration": 0.008046,
10+ "JSHeapUsedSize": 2745848,
11+ "FirstMeaningfulPaint": 344877.642787,
12+ "DomContentLoaded": 344877.550817,
13+ "NavigationStart": 344877.520863,
14+ "TimeToFirstPaintMS": 91.9700000085868
15+ },
16+ "frames": {
17+ "count": 601,
18+ "median": 17,
19+ "mode": 17,
20+ "avg": 16.62396006655574,
21+ "fps": 60.15413872485237
22+ }
23+ },
24+ {
25+ "name": "elmUI1024",
26+ "perf": {
27+ "Timestamp": 344890.42811,
28+ "Nodes": 3110,
29+ "LayoutDuration": 0.120024,
30+ "RecalcStyleDuration": 0.027005,
31+ "ScriptDuration": 0.100141,
32+ "JSHeapUsedSize": 6062544,
33+ "FirstMeaningfulPaint": 344889.430931,
34+ "DomContentLoaded": 344889.267119,
35+ "NavigationStart": 344889.135817,
36+ "TimeToFirstPaintMS": 163.81199995521456
37+ },
38+ "frames": {
39+ "count": 547,
40+ "median": 17,
41+ "mode": 17,
42+ "avg": 18.29250457038391,
43+ "fps": 54.667199680191885
44+ }
45+ },
46+ {
47+ "name": "elmUI128",
48+ "perf": {
49+ "Timestamp": 344903.77081,
50+ "Nodes": 422,
51+ "LayoutDuration": 0.144157,
52+ "RecalcStyleDuration": 0.009863,
53+ "ScriptDuration": 0.074032,
54+ "JSHeapUsedSize": 3478296,
55+ "FirstMeaningfulPaint": 344902.779498,
56+ "DomContentLoaded": 344902.603919,
57+ "NavigationStart": 344902.469249,
58+ "TimeToFirstPaintMS": 175.5789999733679
59+ },
60+ "frames": {
61+ "count": 557,
62+ "median": 17,
63+ "mode": 16,
64+ "avg": 17.956912028725313,
65+ "fps": 55.688862227554495
66+ }
67+ },
68+ {
69+ "name": "elmUI2048",
70+ "perf": {
71+ "Timestamp": 344917.100319,
72+ "Nodes": 6182,
73+ "LayoutDuration": 0.486099,
74+ "RecalcStyleDuration": 0.104675,
75+ "ScriptDuration": 0.447634,
76+ "JSHeapUsedSize": 7516104,
77+ "FirstMeaningfulPaint": 0,
78+ "DomContentLoaded": 344915.381856,
79+ "NavigationStart": 344914.82896,
80+ "TimeToFirstPaintMS": -344915381.856
81+ },
82+ "frames": {
83+ "count": 220,
84+ "median": 41,
85+ "mode": 21,
86+ "avg": 45.554545454545455,
87+ "fps": 21.951706246258233
88+ }
89+ },
90+ {
91+ "name": "elmUI24",
92+ "perf": {
93+ "Timestamp": 344929.138945,
94+ "Nodes": 110,
95+ "LayoutDuration": 0.133557,
96+ "RecalcStyleDuration": 0.002265,
97+ "ScriptDuration": 0.05144,
98+ "JSHeapUsedSize": 3100288,
99+ "FirstMeaningfulPaint": 344928.142845,
100+ "DomContentLoaded": 344927.996502,
101+ "NavigationStart": 344927.862848,
102+ "TimeToFirstPaintMS": 146.34300000034273
103+ },
104+ "frames": {
105+ "count": 595,
106+ "median": 17,
107+ "mode": 17,
108+ "avg": 16.79327731092437,
109+ "fps": 59.547638110488386
110+ }
111+ },
112+ {
113+ "name": "elmUI256",
114+ "perf": {
115+ "Timestamp": 344940.680191,
116+ "Nodes": 806,
117+ "LayoutDuration": 0.093107,
118+ "RecalcStyleDuration": 0.007533,
119+ "ScriptDuration": 0.051167,
120+ "JSHeapUsedSize": 3514560,
121+ "FirstMeaningfulPaint": 344939.683501,
122+ "DomContentLoaded": 344939.5719,
123+ "NavigationStart": 344939.488243,
124+ "TimeToFirstPaintMS": 111.60100001143292
125+ },
126+ "frames": {
127+ "count": 593,
128+ "median": 17,
129+ "mode": 17,
130+ "avg": 16.870151770657674,
131+ "fps": 59.27628948420631
132+ }
133+ },
134+ {
135+ "name": "elmUI4096",
136+ "perf": {
137+ "Timestamp": 344952.888922,
138+ "Nodes": 12326,
139+ "LayoutDuration": 0.268849,
140+ "RecalcStyleDuration": 0.152581,
141+ "ScriptDuration": 0.273734,
142+ "JSHeapUsedSize": 11707296,
143+ "FirstMeaningfulPaint": 344951.890689,
144+ "DomContentLoaded": 344951.415926,
145+ "NavigationStart": 344951.103989,
146+ "TimeToFirstPaintMS": 474.76300003472716
147+ },
148+ "frames": {
149+ "count": 189,
150+ "median": 44,
151+ "mode": 38,
152+ "avg": 53.026455026455025,
153+ "fps": 18.858511275194573
154+ }
155+ },
156+ {
157+ "name": "elmUI512",
158+ "perf": {
159+ "Timestamp": 344964.550514,
160+ "Nodes": 1574,
161+ "LayoutDuration": 0.104459,
162+ "RecalcStyleDuration": 0.013678,
163+ "ScriptDuration": 0.063437,
164+ "JSHeapUsedSize": 3891232,
165+ "FirstMeaningfulPaint": 344963.549882,
166+ "DomContentLoaded": 344963.418595,
167+ "NavigationStart": 344963.321986,
168+ "TimeToFirstPaintMS": 131.28700002562255
169+ },
170+ "frames": {
171+ "count": 581,
172+ "median": 17,
173+ "mode": 17,
174+ "avg": 17.21514629948365,
175+ "fps": 58.08838232353529
176+ }
177+ },
178+ {
179+ "name": "elmUI64",
180+ "perf": {
181+ "Timestamp": 344976.326436,
182+ "Nodes": 230,
183+ "LayoutDuration": 0.168891,
184+ "RecalcStyleDuration": 0.004277,
185+ "ScriptDuration": 0.062968,
186+ "JSHeapUsedSize": 3097968,
187+ "FirstMeaningfulPaint": 344975.328438,
188+ "DomContentLoaded": 344975.145323,
189+ "NavigationStart": 344975.02711,
190+ "TimeToFirstPaintMS": 183.11500002164394
191+ },
192+ "frames": {
193+ "count": 590,
194+ "median": 17,
195+ "mode": 17,
196+ "avg": 16.959322033898307,
197+ "fps": 58.964621227263635
198+ }
199+ },
200+ {
201+ "name": "elmUI8192",
202+ "perf": {
203+ "Timestamp": 344990.078901,
204+ "Nodes": 24614,
205+ "LayoutDuration": 0.948283,
206+ "RecalcStyleDuration": 0.419394,
207+ "ScriptDuration": 0.630391,
208+ "JSHeapUsedSize": 31637808,
209+ "FirstMeaningfulPaint": 344989.083616,
210+ "DomContentLoaded": 344989.070026,
211+ "NavigationStart": 344986.773071,
212+ "TimeToFirstPaintMS": 13.590000045951456
213+ },
214+ "frames": {
215+ "count": 49,
216+ "median": 196,
217+ "mode": 207,
218+ "avg": 206.3877551020408,
219+ "fps": 4.845248689805201
220+ }
221+ },
222+ {
223+ "name": "viewHtml1024",
224+ "perf": {
225+ "Timestamp": 345002.25585,
226+ "Nodes": 2082,
227+ "LayoutDuration": 0.143173,
228+ "RecalcStyleDuration": 0.007993,
229+ "ScriptDuration": 0.033202,
230+ "JSHeapUsedSize": 3073416,
231+ "FirstMeaningfulPaint": 345001.273976,
232+ "DomContentLoaded": 345001.097327,
233+ "NavigationStart": 345001.017309,
234+ "TimeToFirstPaintMS": 176.64900003001094
235+ },
236+ "frames": {
237+ "count": 601,
238+ "median": 17,
239+ "mode": 17,
240+ "avg": 16.657237936772045,
241+ "fps": 60.0339626410948
242+ }
243+ },
244+ {
245+ "name": "viewHtml128",
246+ "perf": {
247+ "Timestamp": 345014.02727,
248+ "Nodes": 290,
249+ "LayoutDuration": 0.104178,
250+ "RecalcStyleDuration": 0.000807,
251+ "ScriptDuration": 0.009939,
252+ "JSHeapUsedSize": 2896808,
253+ "FirstMeaningfulPaint": 345013.034266,
254+ "DomContentLoaded": 345012.919841,
255+ "NavigationStart": 345012.888771,
256+ "TimeToFirstPaintMS": 114.42499997792765
257+ },
258+ "frames": {
259+ "count": 602,
260+ "median": 17,
261+ "mode": 17,
262+ "avg": 16.61794019933555,
263+ "fps": 60.17592962814874
264+ }
265+ },
266+ {
267+ "name": "viewHtml2048",
268+ "perf": {
269+ "Timestamp": 345025.938376,
270+ "Nodes": 4130,
271+ "LayoutDuration": 0.186164,
272+ "RecalcStyleDuration": 0.013735,
273+ "ScriptDuration": 0.06127,
274+ "JSHeapUsedSize": 3853752,
275+ "FirstMeaningfulPaint": 345024.961399,
276+ "DomContentLoaded": 345024.731751,
277+ "NavigationStart": 345024.631436,
278+ "TimeToFirstPaintMS": 229.64800003683195
279+ },
280+ "frames": {
281+ "count": 602,
282+ "median": 17,
283+ "mode": 17,
284+ "avg": 16.624584717607974,
285+ "fps": 60.15187849720224
286+ }
287+ },
288+ {
289+ "name": "viewHtml24",
290+ "perf": {
291+ "Timestamp": 345037.715804,
292+ "Nodes": 82,
293+ "LayoutDuration": 0.113177,
294+ "RecalcStyleDuration": 0.00091,
295+ "ScriptDuration": 0.013686,
296+ "JSHeapUsedSize": 2784368,
297+ "FirstMeaningfulPaint": 345036.723595,
298+ "DomContentLoaded": 345036.597467,
299+ "NavigationStart": 345036.549931,
300+ "TimeToFirstPaintMS": 126.1279999744147
301+ },
302+ "frames": {
303+ "count": 601,
304+ "median": 17,
305+ "mode": 17,
306+ "avg": 16.632279534109816,
307+ "fps": 60.12404961984794
308+ }
309+ },
310+ {
311+ "name": "viewHtml256",
312+ "perf": {
313+ "Timestamp": 345049.569729,
314+ "Nodes": 546,
315+ "LayoutDuration": 0.135261,
316+ "RecalcStyleDuration": 0.002224,
317+ "ScriptDuration": 0.023098,
318+ "JSHeapUsedSize": 3034264,
319+ "FirstMeaningfulPaint": 345048.583408,
320+ "DomContentLoaded": 345048.4236,
321+ "NavigationStart": 345048.360233,
322+ "TimeToFirstPaintMS": 159.8080000258051
323+ },
324+ "frames": {
325+ "count": 602,
326+ "median": 17,
327+ "mode": 17,
328+ "avg": 16.62126245847176,
329+ "fps": 60.163901659004594
330+ }
331+ },
332+ {
333+ "name": "viewHtml4096",
334+ "perf": {
335+ "Timestamp": 345061.180575,
336+ "Nodes": 8226,
337+ "LayoutDuration": 0.196827,
338+ "RecalcStyleDuration": 0.020681,
339+ "ScriptDuration": 0.059101,
340+ "JSHeapUsedSize": 4569624,
341+ "FirstMeaningfulPaint": 345060.196743,
342+ "DomContentLoaded": 345059.959926,
343+ "NavigationStart": 345059.880324,
344+ "TimeToFirstPaintMS": 236.81700002634898
345+ },
346+ "frames": {
347+ "count": 597,
348+ "median": 17,
349+ "mode": 17,
350+ "avg": 16.748743718592966,
351+ "fps": 59.705970597059704
352+ }
353+ },
354+ {
355+ "name": "viewHtml512",
356+ "perf": {
357+ "Timestamp": 345072.653838,
358+ "Nodes": 1058,
359+ "LayoutDuration": 0.098266,
360+ "RecalcStyleDuration": 0.002852,
361+ "ScriptDuration": 0.013692,
362+ "JSHeapUsedSize": 3307376,
363+ "FirstMeaningfulPaint": 345071.659606,
364+ "DomContentLoaded": 345071.548413,
365+ "NavigationStart": 345071.513197,
366+ "TimeToFirstPaintMS": 111.19299998972565
367+ },
368+ "frames": {
369+ "count": 599,
370+ "median": 17,
371+ "mode": 17,
372+ "avg": 16.679465776293824,
373+ "fps": 59.95395856270643
374+ }
375+ },
376+ {
377+ "name": "viewHtml64",
378+ "perf": {
379+ "Timestamp": 345084.12984,
380+ "Nodes": 162,
381+ "LayoutDuration": 0.089871,
382+ "RecalcStyleDuration": 0.000495,
383+ "ScriptDuration": 0.009554,
384+ "JSHeapUsedSize": 2832432,
385+ "FirstMeaningfulPaint": 345083.142749,
386+ "DomContentLoaded": 345083.035738,
387+ "NavigationStart": 345083.004776,
388+ "TimeToFirstPaintMS": 107.0109999855049
389+ },
390+ "frames": {
391+ "count": 601,
392+ "median": 17,
393+ "mode": 17,
394+ "avg": 16.633943427620633,
395+ "fps": 60.118035410623186
396+ }
397+ },
398+ {
399+ "name": "viewHtml8192",
400+ "perf": {
401+ "Timestamp": 345096.074883,
402+ "Nodes": 16418,
403+ "LayoutDuration": 0.344601,
404+ "RecalcStyleDuration": 0.041616,
405+ "ScriptDuration": 0.108739,
406+ "JSHeapUsedSize": 6742952,
407+ "FirstMeaningfulPaint": 0,
408+ "DomContentLoaded": 345094.68408,
409+ "NavigationStart": 345094.537732,
410+ "TimeToFirstPaintMS": -345094684.08
411+ },
412+ "frames": {
413+ "count": 601,
414+ "median": 17,
415+ "mode": 17,
416+ "avg": 16.647254575707155,
417+ "fps": 60.069965017491256
418+ }
419+ },
420+ {
421+ "name": "viewInline1024",
422+ "perf": {
423+ "Timestamp": 345107.619868,
424+ "Nodes": 2082,
425+ "LayoutDuration": 0.110438,
426+ "RecalcStyleDuration": 0.008157,
427+ "ScriptDuration": 0.037625,
428+ "JSHeapUsedSize": 3375528,
429+ "FirstMeaningfulPaint": 345106.633879,
430+ "DomContentLoaded": 345106.4968,
431+ "NavigationStart": 345106.434503,
432+ "TimeToFirstPaintMS": 137.0789999491535
433+ },
434+ "frames": {
435+ "count": 600,
436+ "median": 17,
437+ "mode": 17,
438+ "avg": 16.653333333333332,
439+ "fps": 60.0480384307446
440+ }
441+ },
442+ {
443+ "name": "viewInline128",
444+ "perf": {
445+ "Timestamp": 345119.112826,
446+ "Nodes": 290,
447+ "LayoutDuration": 0.086839,
448+ "RecalcStyleDuration": 0.001145,
449+ "ScriptDuration": 0.011245,
450+ "JSHeapUsedSize": 2945560,
451+ "FirstMeaningfulPaint": 345118.125645,
452+ "DomContentLoaded": 345118.019695,
453+ "NavigationStart": 345117.98784,
454+ "TimeToFirstPaintMS": 105.9499999973923
455+ },
456+ "frames": {
457+ "count": 589,
458+ "median": 17,
459+ "mode": 17,
460+ "avg": 16.972835314091682,
461+ "fps": 58.91767530259077
462+ }
463+ },
464+ {
465+ "name": "viewInline2048",
466+ "perf": {
467+ "Timestamp": 345131.239141,
468+ "Nodes": 4130,
469+ "LayoutDuration": 0.158221,
470+ "RecalcStyleDuration": 0.036846,
471+ "ScriptDuration": 0.092121,
472+ "JSHeapUsedSize": 3725584,
473+ "FirstMeaningfulPaint": 345130.258347,
474+ "DomContentLoaded": 345130.03765,
475+ "NavigationStart": 345129.863279,
476+ "TimeToFirstPaintMS": 220.69699998246506
477+ },
478+ "frames": {
479+ "count": 579,
480+ "median": 17,
481+ "mode": 17,
482+ "avg": 17.29015544041451,
483+ "fps": 57.83637998201977
484+ }
485+ },
486+ {
487+ "name": "viewInline24",
488+ "perf": {
489+ "Timestamp": 345143.496626,
490+ "Nodes": 82,
491+ "LayoutDuration": 0.164004,
492+ "RecalcStyleDuration": 0.001491,
493+ "ScriptDuration": 0.022634,
494+ "JSHeapUsedSize": 2799544,
495+ "FirstMeaningfulPaint": 345142.546889,
496+ "DomContentLoaded": 345142.324442,
497+ "NavigationStart": 345142.235239,
498+ "TimeToFirstPaintMS": 222.4469999782741
499+ },
500+ "frames": {
501+ "count": 597,
502+ "median": 17,
503+ "mode": 17,
504+ "avg": 16.742043551088777,
505+ "fps": 59.729864932466235
506+ }
507+ },
508+ {
509+ "name": "viewInline256",
510+ "perf": {
511+ "Timestamp": 345155.529047,
512+ "Nodes": 546,
513+ "LayoutDuration": 0.223106,
514+ "RecalcStyleDuration": 0.004685,
515+ "ScriptDuration": 0.035701,
516+ "JSHeapUsedSize": 3122392,
517+ "FirstMeaningfulPaint": 345154.581785,
518+ "DomContentLoaded": 345154.292897,
519+ "NavigationStart": 345154.197627,
520+ "TimeToFirstPaintMS": 288.8880000100471
521+ },
522+ "frames": {
523+ "count": 596,
524+ "median": 17,
525+ "mode": 17,
526+ "avg": 16.77181208053691,
527+ "fps": 59.623849539815936
528+ }
529+ },
530+ {
531+ "name": "viewInline4096",
532+ "perf": {
533+ "Timestamp": 345167.802748,
534+ "Nodes": 8226,
535+ "LayoutDuration": 0.457015,
536+ "RecalcStyleDuration": 0.039855,
537+ "ScriptDuration": 0.137973,
538+ "JSHeapUsedSize": 4843632,
539+ "FirstMeaningfulPaint": 0,
540+ "DomContentLoaded": 345166.298538,
541+ "NavigationStart": 345166.125876,
542+ "TimeToFirstPaintMS": -345166298.538
543+ },
544+ "frames": {
545+ "count": 540,
546+ "median": 17,
547+ "mode": 17,
548+ "avg": 18.524074074074075,
549+ "fps": 53.983804858542435
550+ }
551+ },
552+ {
553+ "name": "viewInline512",
554+ "perf": {
555+ "Timestamp": 345180.388116,
556+ "Nodes": 1058,
557+ "LayoutDuration": 0.240558,
558+ "RecalcStyleDuration": 0.005237,
559+ "ScriptDuration": 0.044031,
560+ "JSHeapUsedSize": 3474992,
561+ "FirstMeaningfulPaint": 345179.428061,
562+ "DomContentLoaded": 345179.129099,
563+ "NavigationStart": 345179.002414,
564+ "TimeToFirstPaintMS": 298.96200000075623
565+ },
566+ "frames": {
567+ "count": 584,
568+ "median": 17,
569+ "mode": 17,
570+ "avg": 17.131849315068493,
571+ "fps": 58.370814592703645
572+ }
573+ },
574+ {
575+ "name": "viewInline64",
576+ "perf": {
577+ "Timestamp": 345191.883445,
578+ "Nodes": 162,
579+ "LayoutDuration": 0.084576,
580+ "RecalcStyleDuration": 0.000589,
581+ "ScriptDuration": 0.009884,
582+ "JSHeapUsedSize": 2861304,
583+ "FirstMeaningfulPaint": 345190.892177,
584+ "DomContentLoaded": 345190.792914,
585+ "NavigationStart": 345190.762283,
586+ "TimeToFirstPaintMS": 99.26300001097843
587+ },
588+ "frames": {
589+ "count": 602,
590+ "median": 17,
591+ "mode": 17,
592+ "avg": 16.622923588039868,
593+ "fps": 60.15788947736584
594+ }
595+ },
596+ {
597+ "name": "viewInline8192",
598+ "perf": {
599+ "Timestamp": 345203.799304,
600+ "Nodes": 16418,
601+ "LayoutDuration": 0.314446,
602+ "RecalcStyleDuration": 0.057603,
603+ "ScriptDuration": 0.17363,
604+ "JSHeapUsedSize": 7827392,
605+ "FirstMeaningfulPaint": 0,
606+ "DomContentLoaded": 345202.424543,
607+ "NavigationStart": 345202.230403,
608+ "TimeToFirstPaintMS": -345202424.543
609+ },
610+ "frames": {
611+ "count": 594,
612+ "median": 17,
613+ "mode": 19,
614+ "avg": 16.833333333333332,
615+ "fps": 59.40594059405941
616+ }
617+ }
618+]
benchmarks/runtime/benchPage.js+6−2
@@ -33,11 +33,15 @@ function summarize(frames) {
3333 }
3434}
3535
36+const keep = ["Timestamp", "Nodes", "LayoutDuration", "RecalcStyleDuration", "ScriptDuration", "JSHeapUsedSize", "FirstMeaningfulPaint", "DomContentLoaded", "NavigationStart"]
37+
38+
3639function extract(metrics) {
3740 var ext = {}
3841 metrics.metrics.forEach((item) => {
39− ext[item.name] = item.value
40−
42+ if (keep.indexOf(item.name) >= 0) {
43+ ext[item.name] = item.value
44+ }
4145 })
4246 ext.TimeToFirstPaintMS = 1000 * (ext.FirstMeaningfulPaint - ext.DomContentLoaded)
4347 return ext
benchmarks/runtime/index.js+44−4
@@ -8,27 +8,60 @@ function write_entrypoint(item) {
88
99 const entrypoint = `module Main exposing (main)
1010import ${item.module}
11−import Render
11+import Benchmark.Render
1212
13−main = Render.toProgram ${item.module}.${item.value}
13+main = Benchmark.Render.toProgram ${item.module}.${item.value}
1414`
1515 fs.writeFileSync('./tmp/Main.elm', entrypoint);
1616}
1717
1818(async () => {
1919 const browser = await puppeteer.launch();
20− var instances = [{ module: "Bench", value: "bench" }]
20+ var instances = [{ module: "Baseline", value: "bench" }
21+ , { module: "ManyElements", value: "elmUI1024" }
22+ , { module: "ManyElements", value: "elmUI128" }
23+ , { module: "ManyElements", value: "elmUI2048" }
24+ , { module: "ManyElements", value: "elmUI24" }
25+ , { module: "ManyElements", value: "elmUI256" }
26+ , { module: "ManyElements", value: "elmUI4096" }
27+ , { module: "ManyElements", value: "elmUI512" }
28+ , { module: "ManyElements", value: "elmUI64" }
29+ , { module: "ManyElements", value: "elmUI8192" }
30+ , { module: "ManyElements", value: "viewHtml1024" }
31+ , { module: "ManyElements", value: "viewHtml128" }
32+ , { module: "ManyElements", value: "viewHtml2048" }
33+ , { module: "ManyElements", value: "viewHtml24" }
34+ , { module: "ManyElements", value: "viewHtml256" }
35+ , { module: "ManyElements", value: "viewHtml4096" }
36+ , { module: "ManyElements", value: "viewHtml512" }
37+ , { module: "ManyElements", value: "viewHtml64" }
38+ , { module: "ManyElements", value: "viewHtml8192" }
39+ , { module: "ManyElements", value: "viewInline1024" }
40+ , { module: "ManyElements", value: "viewInline128" }
41+ , { module: "ManyElements", value: "viewInline2048" }
42+ , { module: "ManyElements", value: "viewInline24" }
43+ , { module: "ManyElements", value: "viewInline256" }
44+ , { module: "ManyElements", value: "viewInline4096" }
45+ , { module: "ManyElements", value: "viewInline512" }
46+ , { module: "ManyElements", value: "viewInline64" }
47+ , { module: "ManyElements", value: "viewInline8192" }
48+
49+ ]
50+
51+
2152 var dir = "tmp"
2253 if (!fs.existsSync(dir)) {
2354 fs.mkdirSync(dir);
2455 }
2556
57+ var allResults = []
58+
2659 for (var i = 0; i < instances.length; i++) {
2760 var item = instances[i]
2861 write_entrypoint(item)
2962 var template = fs.readFileSync("./runtime/template/index.html")
3063 // we embed the compiled js to avoid having to start a server to read the app.
31− await compileToString(["./tmp/Main.elm"], {}).then(function (compiled_elm_code) {
64+ await compileToString(["./tmp/Main.elm"], { optimize: true }).then(function (compiled_elm_code) {
3265 const compiled = eval(`\`${template}\``)
3366 fs.writeFileSync("./tmp/index.html", compiled)
3467 });
@@ -37,6 +70,13 @@ main = Render.toProgram ${item.module}.${item.value}
3770 const results = await benchPage(page);
3871 await page.close()
3972 console.log(results)
73+ allResults.push(results)
4074 }
4175 await browser.close();
76+
77+ var resultsDir = "results"
78+ if (!fs.existsSync(resultsDir)) {
79+ fs.mkdirSync(resultsDir);
80+ }
81+ fs.writeFileSync(`./${resultsDir}/1.1.1-candidate-optimized.json`, JSON.stringify(allResults))
4282})();