git.iko.soy/typeable/elm-ui
on master help sign in
better formatting for results benchmarks
ba4158eMatthew Griffith
benchmarks/runtime/index.js+9−19
compare with master
unifiedsplit
@@ -1,5 +1,6 @@
1const puppeteer = require('puppeteer');
1const puppeteer = require('puppeteer');
2const benchPage = require('./benchPage');
2const benchPage = require('./benchPage');
3+const chalk = require('chalk');
3var compileToString = require("node-elm-compiler").compileToString;
4var compileToString = require("node-elm-compiler").compileToString;
4const fs = require('fs');
5const fs = require('fs');
5
6
@@ -98,42 +99,26 @@ async function writeResults(allResults, resultsDir, name) {
98
99
99
100
100 var instances = [
101 var instances = [
101− { module: "Baseline", group: null, value: "bench" }
102− , { module: "ManyElements", group: "elmUI", count: 1024, value: "elmUI1024" }
102+ { module: "ManyElements", group: "elmUI", count: 1024, value: "elmUI1024" }
103− // , { module: "ManyElements", group: "elmUI", count: 128, value: "elmUI128" }
103+ , { module: "ManyElements", group: "elmUI", count: 128, value: "elmUI128" }
104 , { module: "ManyElements", group: "elmUI", count: 2048, value: "elmUI2048" }
104 , { module: "ManyElements", group: "elmUI", count: 2048, value: "elmUI2048" }
105 , { module: "ManyElements", group: "elmUI", count: 24, value: "elmUI24" }
105 , { module: "ManyElements", group: "elmUI", count: 24, value: "elmUI24" }
106− // , { module: "ManyElements", group: "elmUI", count: 256, value: "elmUI256" }
107 , { module: "ManyElements", group: "elmUI", count: 4096, value: "elmUI4096" }
106 , { module: "ManyElements", group: "elmUI", count: 4096, value: "elmUI4096" }
108− // , { module: "ManyElements", group: "elmUI", count: 512, value: "elmUI512" }
109− // , { module: "ManyElements", group: "elmUI", count: 64, value: "elmUI64" }
110 , { module: "ManyElements", group: "elmUI", count: 8192, value: "elmUI8192" }
107 , { module: "ManyElements", group: "elmUI", count: 8192, value: "elmUI8192" }
111 , { module: "ManyElements", group: "elmUIVCSS", count: 1024, value: "elmUIVCSS1024" }
108 , { module: "ManyElements", group: "elmUIVCSS", count: 1024, value: "elmUIVCSS1024" }
112− // , { module: "ManyElements", group: "elmUIVCSS", count: 128, value: "elmUIVCSS128" }
113 , { module: "ManyElements", group: "elmUIVCSS", count: 2048, value: "elmUIVCSS2048" }
109 , { module: "ManyElements", group: "elmUIVCSS", count: 2048, value: "elmUIVCSS2048" }
114 , { module: "ManyElements", group: "elmUIVCSS", count: 24, value: "elmUIVCSS24" }
110 , { module: "ManyElements", group: "elmUIVCSS", count: 24, value: "elmUIVCSS24" }
115− // , { module: "ManyElements", group: "elmUIVCSS", count: 256, value: "elmUIVCSS256" }
116 , { module: "ManyElements", group: "elmUIVCSS", count: 4096, value: "elmUIVCSS4096" }
111 , { module: "ManyElements", group: "elmUIVCSS", count: 4096, value: "elmUIVCSS4096" }
117− // , { module: "ManyElements", group: "elmUIVCSS", count: 512, value: "elmUIVCSS512" }
118− // , { module: "ManyElements", group: "elmUIVCSS", count: 64, value: "elmUIVCSS64" }
119 , { module: "ManyElements", group: "elmUIVCSS", count: 8192, value: "elmUIVCSS8192" }
112 , { module: "ManyElements", group: "elmUIVCSS", count: 8192, value: "elmUIVCSS8192" }
120 , { module: "ManyElements", group: "viewHtml", count: 1024, value: "viewHtml1024" }
113 , { module: "ManyElements", group: "viewHtml", count: 1024, value: "viewHtml1024" }
121− // , { module: "ManyElements", group: "viewHtml", count: 128, value: "viewHtml128" }
122 , { module: "ManyElements", group: "viewHtml", count: 2048, value: "viewHtml2048" }
114 , { module: "ManyElements", group: "viewHtml", count: 2048, value: "viewHtml2048" }
123 , { module: "ManyElements", group: "viewHtml", count: 24, value: "viewHtml24" }
115 , { module: "ManyElements", group: "viewHtml", count: 24, value: "viewHtml24" }
124− // , { module: "ManyElements", group: "viewHtml", count: 256, value: "viewHtml256" }
125 , { module: "ManyElements", group: "viewHtml", count: 4096, value: "viewHtml4096" }
116 , { module: "ManyElements", group: "viewHtml", count: 4096, value: "viewHtml4096" }
126− // , { module: "ManyElements", group: "viewHtml", count: 512, value: "viewHtml512" }
127− // , { module: "ManyElements", group: "viewHtml", count: 64, value: "viewHtml64" }
128 , { module: "ManyElements", group: "viewHtml", count: 8192, value: "viewHtml8192" }
117 , { module: "ManyElements", group: "viewHtml", count: 8192, value: "viewHtml8192" }
129 , { module: "ManyElements", group: "viewInline", count: 1024, value: "viewInline1024" }
118 , { module: "ManyElements", group: "viewInline", count: 1024, value: "viewInline1024" }
130− // , { module: "ManyElements", group: "viewInline", count: 128, value: "viewInline128" }
131 , { module: "ManyElements", group: "viewInline", count: 2048, value: "viewInline2048" }
119 , { module: "ManyElements", group: "viewInline", count: 2048, value: "viewInline2048" }
132 , { module: "ManyElements", group: "viewInline", count: 24, value: "viewInline24" }
120 , { module: "ManyElements", group: "viewInline", count: 24, value: "viewInline24" }
133− // , { module: "ManyElements", group: "viewInline", count: 256, value: "viewInline256" }
134 , { module: "ManyElements", group: "viewInline", count: 4096, value: "viewInline4096" }
121 , { module: "ManyElements", group: "viewInline", count: 4096, value: "viewInline4096" }
135− // , { module: "ManyElements", group: "viewInline", count: 512, value: "viewInline512" }
136− // , { module: "ManyElements", group: "viewInline", count: 64, value: "viewInline64" }
137 , { module: "ManyElements", group: "viewInline", count: 8192, value: "viewInline8192" }
122 , { module: "ManyElements", group: "viewInline", count: 8192, value: "viewInline8192" }
138 ]
123 ]
139
124
@@ -156,6 +141,7 @@ async function writeResults(allResults, resultsDir, name) {
156 fs.mkdirSync(`./${resultsDir}/${resultName}/instances/`, { recursive: true });
141 fs.mkdirSync(`./${resultsDir}/${resultName}/instances/`, { recursive: true });
157 }
142 }
158
143
144+ console.log(`Beginning benchmark for ${resultName} →`)
159
145
160 for (var i = 0; i < instances.length; i++) {
146 for (var i = 0; i < instances.length; i++) {
161 var item = instances[i]
147 var item = instances[i]
@@ -174,7 +160,8 @@ async function writeResults(allResults, resultsDir, name) {
174 results.group = item.group
160 results.group = item.group
175 results.count = item.count
161 results.count = item.count
176 await page.close()
162 await page.close()
177− console.log(results)
163+ // console.log(results)
164+ console.log(" Benchmark of " + chalk.green(`${item.module}.${item.value}`) + " complete")
178 allResults.push(results)
165 allResults.push(results)
179 }
166 }
180 await browser.close();
167 await browser.close();
@@ -182,5 +169,8 @@ async function writeResults(allResults, resultsDir, name) {
182 allResults = regroupResults(allResults)
169 allResults = regroupResults(allResults)
183
170
184 writeResults(allResults, resultsDir, resultName)
171 writeResults(allResults, resultsDir, resultName)
172+ console.log()
173+ console.log("Benchmark complete")
174+ console.log(" → " + chalk.green(`${resultsDir}/${resultName}/index.html`))
185
175
186})();
176})();
benchmarks/src/View/Results.elm+16−10
@@ -52,11 +52,13 @@ main =
52 , body =
52 , body =
53 [ Html.div
53 [ Html.div
54 [ class "container" ]
54 [ class "container" ]
55− [ row
55+ [ column
56+ [ Html.h2 [] [ Html.text "Benchmarked Pages" ]
56− (List.map viewLinks model.data)
57+ , row (List.map viewLinks model.data)
58+ ]
57 , row
59 , row
58− [ viewNodes model.data
60+ [ -- viewNodes model.data
59− , viewFps model.data
61+ viewFps model.data
60 , viewTimeToPaint model.data
62 , viewTimeToPaint model.data
61 ]
63 ]
62 , row
64 , row
@@ -68,7 +70,7 @@ main =
68 , getCount = .count
70 , getCount = .count
69 , name = data.name
71 , name = data.name
70 , flavor = "Cold render"
72 , flavor = "Cold render"
71− , range = (0, 1.2)
73+ , range = ( 0, 1.2 )
72 }
74 }
73 (List.sortBy .count data.results)
75 (List.sortBy .count data.results)
74 )
76 )
@@ -82,7 +84,7 @@ main =
82 , getCount = .count
84 , getCount = .count
83 , name = data.name
85 , name = data.name
84 , flavor = "Warm render"
86 , flavor = "Warm render"
85− , range = (0, 1.2)
87+ , range = ( 0, 1.2 )
86 }
88 }
87 (List.sortBy .count data.results)
89 (List.sortBy .count data.results)
88 )
90 )
@@ -96,7 +98,7 @@ main =
96 , getCount = .count
98 , getCount = .count
97 , name = data.name
99 , name = data.name
98 , flavor = "Long Animation"
100 , flavor = "Long Animation"
99− , range = (0, 5)
101+ , range = ( 0, 5 )
100 }
102 }
101 (List.sortBy .count data.results)
103 (List.sortBy .count data.results)
102 )
104 )
@@ -129,7 +131,7 @@ update msg model =
129
131
130viewLinks data =
132viewLinks data =
131 column
133 column
132− (Html.h2 [] [ Html.text data.name ]
134+ (Html.h1 [] [ Html.text data.name ]
133 :: (data.results
135 :: (data.results
134 |> List.sortBy .link
136 |> List.sortBy .link
135 |> List.map viewSingleLink
137 |> List.map viewSingleLink
@@ -138,7 +140,11 @@ viewLinks data =
138
140
139
141
140viewSingleLink result =
142viewSingleLink result =
143+ Html.a
141− Html.a [ Attr.href result.link ] [ Html.text result.name ]
144+ [ Attr.href result.link
145+ , Html.style "padding-right" "30px"
146+ ]
147+ [ Html.text result.name ]
142
148
143
149
144
150
@@ -300,7 +306,7 @@ viewRenderBreakdown :
300 , getCount : Render -> Float
306 , getCount : Render -> Float
301 , name : String
307 , name : String
302 , flavor : String
308 , flavor : String
303− , range : (Float, Float)
309+ , range : ( Float, Float )
304 }
310 }
305 -> List Render
311 -> List Render
306 -> Html.Html msg
312 -> Html.Html msg