HTML Preparation code:
x
 
1
2
<!DOCTYPE html>
3
<html>
4
<head>
5
    <meta charset="utf-8" />
6
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
    <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
8
    <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
9
    <link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
10
    <link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
11
    <link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
12
    <link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
13
    <link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
14
    <link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
15
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
16
    <link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png">
17
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
18
    <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
19
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
20
    <link rel="manifest" href="/manifest.json">
21
    <meta name="msapplication-TileColor" content="#ffffff">
22
    <meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
23
    <meta name="theme-color" content="#ffffff">
24
25
    <meta name="Description" content="JavaScript microbenchmarks, JavaScript performance playground. Measure performance accross different browsers.">
26
    <meta name="Keywords" content="JavaScript, jQuery, Performance, Benchmark, Speed, Web, React, Angular, Node.js">
27
28
    <title>Create benchmark - MeasureThat.net</title>
29
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />
30
31
32
    
33
    
34
        <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/css/bootstrap.min.css" />
35
<meta name="x-stylesheet-fallback-test" content="" class="sr-only" /><script>!function(a,b,c){var d,e=document,f=e.getElementsByTagName("SCRIPT"),g=f[f.length-1].previousElementSibling,h=e.defaultView&&e.defaultView.getComputedStyle?e.defaultView.getComputedStyle(g):g.currentStyle;if(h&&h[a]!==b)for(d=0;d<c.length;d++)e.write('<link rel="stylesheet" href="'+c[d]+'"/>')}("position","absolute",["\/lib\/bootstrap\/dist\/css\/bootstrap.min.css"]);</script>
36
        <link rel="stylesheet" href="/css/site.min.css?v=qSM70FXLZmjcGfwoMeo7ZZaGrgeM87kij-CABKByba0" />
37
    
38
        <script type="text/javascript">
39
        var appInsights=window.appInsights||function(config){
40
            function r(config){t[config]=function(){var i=arguments;t.queue.push(function(){t[config].apply(t,i)})}}var t={config:config},u=document,e=window,o="script",s=u.createElement(o),i,f;for(s.src=config.url||"//az416426.vo.msecnd.net/scripts/a/ai.0.js",u.getElementsByTagName(o)[0].parentNode.appendChild(s),t.cookie=u.cookie,t.queue=[],i=["Event","Exception","Metric","PageView","Trace","Ajax"];i.length;)r("track"+i.pop());return r("setAuthenticatedUserContext"),r("clearAuthenticatedUserContext"),config.disableExceptionTracking||(i="onerror",r("_"+i),f=e[i],e[i]=function(config,r,u,e,o){var s=f&&f(config,r,u,e,o);return s!==!0&&t["_"+i](config,r,u,e,o),s}),t
41
        }({
42
            instrumentationKey: '6fbb4f00-bf94-4fe8-a0e3-a5b4e1283fc2'
43
        });
44
        
45
        window.appInsights=appInsights;
46
        appInsights.trackPageView();
47
    </script>
48
49
50
    
51
52
53
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.16.0/codemirror.min.css">
54
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.16.0/theme/ambiance.min.css">
55
56
57
</head>
58
<body>
59
    <div class="navbar navbar-inverse navbar-fixed-top">
60
        <div class="container">
61
            <div class="navbar-header">
62
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
63
                    <span class="sr-only">Toggle navigation</span>
64
                    <span class="icon-bar"></span>
65
                    <span class="icon-bar"></span>
66
                    <span class="icon-bar"></span>
67
                </button>
68
                <a class="navbar-brand" href="/"><i class="fa fa-bar-chart" aria-hidden="true"></i>&nbsp;MeasureThat.net<sup>beta</sup></a>
69
            </div>
70
            <div class="navbar-collapse collapse">
71
                <ul class="nav navbar-nav">
72
                    <li><a href="/">Home</a></li>
73
                    <li><a data-toggle="modal" data-target="#aboutModal" href="#">About</a></li>
74
                    <li><a href="/Home/Discussions">Discussions & Feedback</a></li>
75
                </ul>
76
                
77
    <ul class="nav navbar-nav navbar-right">
78
        <li><a href="/Account/Register">Register</a></li>
79
        <li><a href="#" data-toggle="modal" data-target="#authenticateModal">Log in</a></li>
80
    </ul>    
81
82
            </div>
83
        </div>
84
    </div>
85
    <div class="container body-content">
86
        <div class="row">
87
            
88
89
<div class="page-header">
90
    <h1>Create benchmark</h1>
91
</div>
92
93
    <div class="alert alert-warning" role="alert">
94
        <b>Consider signing in before you create benchmark.</b> Then you will be able to edit it later.
95
        Benchmarks created by guest users <b>can't be edited</b>, only forked.
96
        <br><br>
97
        <button class="btn btn-primary" data-toggle="modal" data-target="#authenticateModal">Log in</button>
98
    </div>
99
    <hr/>
100
101
<form action="/Benchmarks/Add" id="new-benchmark-form" method="post"><div class="validation-summary-valid" data-valmsg-summary="true"><ul><li style="display:none"></li>
102
</ul></div><input data-val="true" data-val-required="The Id field is required." id="Id" name="Id" type="hidden" value="0" />    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
103
        <div class="panel panel-default">
104
            <div class="panel-heading" role="tab" id="headingOne">
105
                <h4 class="panel-title">
106
                    <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
107
                        Benchmark name and description
108
                    </a>
109
                </h4>
110
            </div>
111
            <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
112
                <div class="panel-body">
113
                    <div class="form-group">
114
                        <label for="BenchmarkName">Benchmark Name</label>
115
                        <input class="form-control" data-val="true" data-val-length="The Benchmark Name must be at least 6 and at max 200 characters long." data-val-length-max="200" data-val-length-min="6" data-val-required="The Benchmark Name field is required." id="BenchmarkName" name="BenchmarkName" placeholder="Name of the benchmark" type="text" value="" />
116
                        <span class="field-validation-valid text-danger" data-valmsg-for="BenchmarkName" data-valmsg-replace="true"></span>
117
                    </div>
118
                    <div class="form-group">
119
                        <label for="Description">Description</label>
120
                        <textarea class="form-control" data-val="true" data-val-length="The Description must be at max 4000 characters long." data-val-length-max="4000" id="Description" name="Description" placeholder="Benchmark description">
121
</textarea>
122
                        <span class="field-validation-valid text-danger" data-valmsg-for="Description" data-valmsg-replace="true"></span>
123
                    </div>
124
                </div>
125
            </div>
126
        </div>
127
        <div class="panel panel-default">
128
            <div class="panel-heading" role="tab" id="headingTwo">
129
                <h4 class="panel-title">
130
                    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
131
                        Preparation code
132
                    </a>
133
                </h4>
134
            </div>
135
            <div id="collapseTwo" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingTwo">
136
                <div class="panel-body">
137
                    <div class="form-group">
138
                        <label for="HtmlPreparationCode">Html Preparation code</label>
139
                        <textarea class="form-control" id="HtmlPreparationCode" name="HtmlPreparationCode">
140
</textarea>
141
                        <span class="field-validation-valid text-danger" data-valmsg-for="HtmlPreparationCode" data-valmsg-replace="true"></span>
142
                    </div>
143
                    <div class="form-group">
144
                        <label for="ScriptPreparationCode">JavaScript preparation code</label>
145
                        <textarea class="form-control" id="ScriptPreparationCode" name="ScriptPreparationCode">
146
</textarea>
147
                        <span class="field-validation-valid text-danger" data-valmsg-for="ScriptPreparationCode" data-valmsg-replace="true"></span>
148
                    </div>
149
                </div>
150
            </div>
151
        </div>
152
        <div class="panel panel-default">
153
            <div class="panel-heading" role="tab" id="headingThree">
154
                <h4 class="panel-title">
155
                    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="true" aria-controls="collapseThree">
156
                        Test cases
157
                    </a>
158
                </h4>
159
            </div>
160
            <div id="collapseThree" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingThree">
161
                <ul class="list-group" id="test-case-list"></ul>
162
                <div class="panel-footer">
163
                    <span class="field-validation-valid text-danger" data-valmsg-for="TestCases" data-valmsg-replace="true"></span>
164
                    <div class="form-group">
165
                        <input type="button" class="btn btn-default" data-action="new-test" value="Add test case" />
166
                    </div>
167
                </div>
168
            </div>
169
        </div>
170
    </div>
171
    <div class="form-group">
172
        <div class="g-recaptcha" data-sitekey="6LezciITAAAAAM8yvrfrR23FDpltM8Luz9QB_8O0"></div>
173
        <span class="field-validation-valid text-danger" data-valmsg-for="ReCaptcha" data-valmsg-replace="true"></span>
174
    </div>
175
    <input type="submit" class="btn btn-default" value="Submit" />
176
    <a href="/Benchmarks/Latest" class="btn btn-link">Cancel</a>
177
<input name="__RequestVerificationToken" type="hidden" value="CfDJ8CXqOPSnDxlFoC37ILIPYQyraMxEfGKPx4SDzJN7L77WW-Z6fibI9Z15zMI6isRuhZB5koQsNravmcotlm_AHazGxzPBoCewucqHI7lUSRqLaWaOYDPOdteWgP93JDbsEj-yYxBRBC9I6-rK60jnyO8" /></form>
178
<div class="hidden">
179
</div>
180
181
182
183
        </div>
184
        <hr />
185
        <footer>
186
            <p>&copy; 2016 - MeasureThat.net (Version: 1.0.45.0)</p>
187
        </footer>
188
    </div>
189
190
    
191
    
192
        <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js">
193
        </script>
194
<script>(window.jQuery||document.write("\u003Cscript src=\u0022\/lib\/jquery\/dist\/jquery.min.js\u0022\u003E\u003C\/script\u003E"));</script>
195
        <script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/bootstrap.min.js">
196
        </script>
197
<script>(window.jQuery && window.jQuery.fn && window.jQuery.fn.modal||document.write("\u003Cscript src=\u0022\/lib\/bootstrap\/dist\/js\/bootstrap.min.js\u0022\u003E\u003C\/script\u003E"));</script>
198
    
199
200
    
201
202
203
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.16.0/codemirror.min.js"></script>
204
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.17.0/mode/xml/xml.js"></script>
205
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.16.0/mode/javascript/javascript.min.js"></script>
206
207
208
    <script src='https://www.google.com/recaptcha/api.js'></script>
209
210
    
211
    
212
        <script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.1.3/mustache.min.js"></script>
213
    
214
    
215
    <script src="/js/benchmarklab.js?v=nF5rugUB0U3Byj2-9a9G8yxdH7qL6jxEPRTaYGWrJ_s"></script>
216
217
218
219
    <script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js">
220
    </script>
221
<script>(window.jQuery && window.jQuery.validator||document.write("\u003Cscript src=\u0022\/lib\/jquery-validation\/dist\/jquery.validate.min.js\u0022\u003E\u003C\/script\u003E"));</script>
222
    <script src="https://ajax.aspnetcdn.com/ajax/jquery.validation.unobtrusive/3.2.6/jquery.validate.unobtrusive.min.js">
223
    </script>
224
<script>(window.jQuery && window.jQuery.validator && window.jQuery.validator.unobtrusive||document.write("\u003Cscript src=\u0022\/lib\/jquery-validation-unobtrusive\/jquery.validate.unobtrusive.min.js\u0022\u003E\u003C\/script\u003E"));</script>
225
226
227
228
<script id="testCase" type="x-tmpl-mustache">
229
    <li class="list-group-item">
230
        <div class="form-group">
231
            <label for="TestCases.TestCaseName">Name your test:</label>
232
            <input type="text" class="form-control" placeholder="Name of the test case" data-val="true" data-val-regex="The field Test Case must match the regular expression '[a-zA-Z0-9.`~!@#$%^&amp;*()]'." data-val-regex-pattern="[a-zA-Z0-9.`~!@#$%^&amp;*()]" data-val-required="The Test Case field is required." name="TestCases[{{testCaseId}}].TestCaseName" value="{{testCaseName}}">
233
234
            <label for="TestCases.BenchmarkCode">Benchmark code</label>
235
            <textarea class="form-control" data-val="true" placeholder="Benchmark code" data-val-required="The Benchmark code is required." name="TestCases[{{testCaseId}}].BenchmarkCode">{{textCaseContent}}</textarea>
236
            <span class="field-validation-valid text-danger" data-valmsg-for="TestCases.BenchmarkCode" data-valmsg-replace="true"></span>
237
        </div>
238
        <div class="form-group text-right">
239
            <button data-action="delete-test" class="btn btn-default">Delete test case</button>
240
        </div>
241
    </li>
242
</script>
243
244
<script type="text/javascript">
245
    var addPageController = new AddNewTestPageController();
246
</script>
247
248
249
    <div class="modal fade" id="aboutModal" tabindex="-1" role="dialog" aria-labelledby="myModal-label" aria-hidden="true">
250
    <div class="modal-dialog">
251
        <div class="modal-content">
252
            <div class="modal-header">
253
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
254
                <h4 class="modal-title" id="myModal-label">About</h4>
255
            </div>
256
            <div class="modal-body">
257
                <h2>JavaScript performance benchmarks</h2>
258
                <p><b>Source code:</b> <a target="_blank" href="https://github.com/thecoderok/MeasureThat.net">GitHub/MeasureThat.net</a></p>
259
                <p><b>Report issues:</b> <a target="_blank" href="https://github.com/thecoderok/MeasureThat.net/issues">MeasureThat.net/Issues</a>
260
                <p><b>Based on:</b> <a target="_blank" href="https://benchmarkjs.com/">Benchmark.js (v2.1.1)</a>
261
                </p>
262
            </div>
263
            <div class="modal-footer">
264
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
265
            </div>
266
        </div>
267
    </div>
268
</div>
269
270
<div class="modal fade" id="authenticateModal" tabindex="-1" role="dialog" aria-labelledby="authenticateModal-label" aria-hidden="true">
271
    <div class="modal-dialog">
272
        <div class="modal-content">
273
            <div class="modal-header">
274
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
275
                <h4 class="modal-title" id="authenticateModal-label">Log in using external service:</h4>
276
            </div>
277
            <div class="modal-body" style="text-align: center">
278
                <section>
279
            <form method="post" class="form-horizontal" action="/Account/ExternalLogin?returnurl=%2FBenchmarks%2FAdd">
280
                <div>
281
                    <p>
282
                            <button type="submit" class="btn btn-default" name="provider" value="Google" title="Log in using your Google account">
283
                                <i class="fa fa-google fa-4x" aria-hidden="true"></i>
284
                                <br>
285
                                Google
286
                            </button>
287
                            <button type="submit" class="btn btn-default" name="provider" value="Twitter" title="Log in using your Twitter account">
288
                                <i class="fa fa-twitter fa-4x" aria-hidden="true"></i>
289
                                <br>
290
                                Twitter
291
                            </button>
292
                            <button type="submit" class="btn btn-default" name="provider" value="Facebook" title="Log in using your Facebook account">
293
                                <i class="fa fa-facebook fa-4x" aria-hidden="true"></i>
294
                                <br>
295
                                Facebook
296
                            </button>
297
                    </p>
298
                </div>
299
            <input name="__RequestVerificationToken" type="hidden" value="CfDJ8CXqOPSnDxlFoC37ILIPYQyraMxEfGKPx4SDzJN7L77WW-Z6fibI9Z15zMI6isRuhZB5koQsNravmcotlm_AHazGxzPBoCewucqHI7lUSRqLaWaOYDPOdteWgP93JDbsEj-yYxBRBC9I6-rK60jnyO8" /></form>
300
</section>
301
<section>
302
    Or <a class="btn btn-primary" href="/Account/Login">Sign in with local account</a>
303
</section>
304
            </div>
305
            <div class="modal-footer">
306
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
307
            </div>
308
        </div>
309
    </div>
310
</div>
311
312
313
<script>
314
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
315
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
316
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
317
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
318
319
  ga('create', 'UA-83528903-1', 'auto');
320
  ga('send', 'pageview');
321
322
</script></body>
323
</html>
324
Tests:
  • Short selector

     
    $(".modal-body").text().indexOf("Benchmark.js (v2.1.1)")
  • Long selector

     
    $("body").text().indexOf("Benchmark.js (v2.1.1)")
Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

  • Test case name Result
    Short selector
    Long selector

    Fastest: N/A

    Slowest: N/A

Latest run results:
Run details: (Test run date: 6 years ago)
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36
Chrome 71 on Mac OS X 10.14.2
View result in a separate tab
Test name Executions per second
Short selector 152024.2 Ops/sec
Long selector 26463.3 Ops/sec