git.iko.soy/typeable/elm-ui
on master help sign in
add benchmarks to checkout contain: strict
ac74e54Matthew Griffith
benchmarks/runtime/benchPage.js+2−2
compare with master
unifiedsplit
@@ -6,11 +6,11 @@ async function benchPage(page) {
6 // await page.tracing.start({ path: 'trace.json' });
6 // await page.tracing.start({ path: 'trace.json' });
7 await page.goto('file://' + path.resolve('./tmp/run.html'))
7 await page.goto('file://' + path.resolve('./tmp/run.html'))
8
8
9− await page.waitFor(1000);
9+ await page.waitFor(5000);
10 // await page.tracing.stop();
10 // await page.tracing.stop();
11 const metrics = await client.send('Performance.getMetrics');
11 const metrics = await client.send('Performance.getMetrics');
12 await page.evaluate(() => { window.elmStartAnim() })
12 await page.evaluate(() => { window.elmStartAnim() })
13− await sleep(10000)
13+ await sleep(5000)
14 await page.evaluate(() => { window.elmStopAnim() })
14 await page.evaluate(() => { window.elmStopAnim() })
15 const frames = await page.evaluate(x => {
15 const frames = await page.evaluate(x => {
16 return Promise.resolve(window.metrics);
16 return Promise.resolve(window.metrics);
benchmarks/runtime/index.js+8−4
@@ -54,6 +54,10 @@ function regroupResults(results) {
54}
54}
55
55
56
56
57+var contain = [{ module: "Contain", group: "html", count: 1024, value: "viewHtml8192" }
58+ , { module: "Contain", group: "contain", count: 128, value: "viewHtmlContain8192" }]
59+
60+
57async function write_results(allResults) {
61async function write_results(allResults) {
58 var resultsDir = "benchmarks/results"
62 var resultsDir = "benchmarks/results"
59 if (!fs.existsSync(resultsDir)) {
63 if (!fs.existsSync(resultsDir)) {
@@ -71,11 +75,12 @@ async function write_results(allResults) {
71}
75}
72
76
73
77
74−
75−
76(async () => {
78(async () => {
77 const browser = await puppeteer.launch();
79 const browser = await puppeteer.launch();
80+
81+
82+ var instances = [
78− var instances = [{ module: "Baseline", group: null, value: "bench" }
83+ { module: "Baseline", group: null, value: "bench" }
79 , { module: "ManyElements", group: "elmUI", count: 1024, value: "elmUI1024" }
84 , { module: "ManyElements", group: "elmUI", count: 1024, value: "elmUI1024" }
80 , { module: "ManyElements", group: "elmUI", count: 128, value: "elmUI128" }
85 , { module: "ManyElements", group: "elmUI", count: 128, value: "elmUI128" }
81 , { module: "ManyElements", group: "elmUI", count: 2048, value: "elmUI2048" }
86 , { module: "ManyElements", group: "elmUI", count: 2048, value: "elmUI2048" }
@@ -112,7 +117,6 @@ async function write_results(allResults) {
112 , { module: "ManyElements", group: "viewInline", count: 512, value: "viewInline512" }
117 , { module: "ManyElements", group: "viewInline", count: 512, value: "viewInline512" }
113 , { module: "ManyElements", group: "viewInline", count: 64, value: "viewInline64" }
118 , { module: "ManyElements", group: "viewInline", count: 64, value: "viewInline64" }
114 , { module: "ManyElements", group: "viewInline", count: 8192, value: "viewInline8192" }
119 , { module: "ManyElements", group: "viewInline", count: 8192, value: "viewInline8192" }
115−
116 ]
120 ]
117
121
118
122
benchmarks/runtime/template/run.html+16
@@ -9,6 +9,22 @@
9 <script>
9 <script>
10 ${compiled_elm_code}
10 ${compiled_elm_code}
11 </script>
11 </script>
12+ <style>
13+ .box {
14+ width: 400px;
15+ height: 50px;
16+ border: solid thick;
17+ }
18+ .pink {
19+ background-color: pink;
20+ }
21+ .white {
22+ background-color: white;
23+ }
24+ .contain {
25+ contain: strict;
26+ }
27+ </style>
12</head>
28</head>
13
29
14<body>
30<body>
benchmarks/src/Contain.elmnew file+159
@@ -0,0 +1,159 @@
1+module Contain exposing
2+ ( viewHtml8192
3+ , viewHtmlContain8192
4+ )
5+
6+{-| -}
7+
8+import Benchmark.Render
9+import Element exposing (..)
10+import Element.Background as Background
11+import Element.Font as Font
12+import Element.Keyed
13+import Html
14+import Html.Attributes
15+import Internal.Model as Internal
16+
17+
18+type alias Model =
19+ { index : Int
20+ , numberOfElements : Int
21+ , elements : List Int
22+ }
23+
24+
25+type Msg
26+ = Refresh
27+ | Tick Float
28+
29+
30+viewHtml8192 : Benchmark.Render.Benchmark Model Msg
31+viewHtml8192 =
32+ viewHtml "viewHtml8192" 8192
33+
34+
35+viewHtmlContain8192 : Benchmark.Render.Benchmark Model Msg
36+viewHtmlContain8192 =
37+ viewHtmlContain "viewHtmlContain8192" 8192
38+
39+
40+white =
41+ rgb 1 1 1
42+
43+
44+pink =
45+ rgb255 240 0 245
46+
47+
48+{-| -}
49+viewHtml : String -> Int -> Benchmark.Render.Benchmark Model Msg
50+viewHtml name count =
51+ { name = name
52+ , init =
53+ { index = 0
54+ , numberOfElements = count
55+ , elements = List.range 0 (count - 1)
56+ }
57+ , view =
58+ \model ->
59+ Html.div []
60+ [ Html.div []
61+ (List.map (viewHtmlElement model.index) model.elements)
62+ ]
63+ , update =
64+ \msg model ->
65+ case msg of
66+ Refresh ->
67+ if model.index > model.numberOfElements then
68+ { model | index = 0 }
69+
70+ else
71+ { model | index = model.index + 1 }
72+
73+ Tick i ->
74+ if model.index > model.numberOfElements then
75+ { model | index = 0 }
76+
77+ else
78+ { model | index = model.index + 1 }
79+ , tick = Tick
80+ , refresh = Refresh
81+ }
82+
83+
84+viewHtmlElement selectedIndex index =
85+ Html.div
86+ [ Html.Attributes.class "box"
87+ , Html.Attributes.class
88+ (if selectedIndex == index then
89+ "white"
90+
91+ else
92+ "pink"
93+ )
94+ ]
95+ [ Html.div []
96+ [ if selectedIndex == index then
97+ Html.text "selected"
98+
99+ else
100+ Html.text "Hello!"
101+ ]
102+ ]
103+
104+
105+{-| -}
106+viewHtmlContain : String -> Int -> Benchmark.Render.Benchmark Model Msg
107+viewHtmlContain name count =
108+ { name = name
109+ , init =
110+ { index = 0
111+ , numberOfElements = count
112+ , elements = List.range 0 (count - 1)
113+ }
114+ , view =
115+ \model ->
116+ Html.div []
117+ [ Html.div []
118+ (List.map (viewHtmlElementContain model.index) model.elements)
119+ ]
120+ , update =
121+ \msg model ->
122+ case msg of
123+ Refresh ->
124+ if model.index > model.numberOfElements then
125+ { model | index = 0 }
126+
127+ else
128+ { model | index = model.index + 1 }
129+
130+ Tick i ->
131+ if model.index > model.numberOfElements then
132+ { model | index = 0 }
133+
134+ else
135+ { model | index = model.index + 1 }
136+ , tick = Tick
137+ , refresh = Refresh
138+ }
139+
140+
141+viewHtmlElementContain selectedIndex index =
142+ Html.div
143+ [ Html.Attributes.class "box contain"
144+ , Html.Attributes.class
145+ (if selectedIndex == index then
146+ "white"
147+
148+ else
149+ "pink"
150+ )
151+ ]
152+ [ Html.div []
153+ [ if selectedIndex == index then
154+ Html.text "selected"
155+
156+ else
157+ Html.text "Hello!"
158+ ]
159+ ]