jsPerf.app is an online JavaScript performance benchmark test runner & jsperf.com mirror. It is a complete rewrite in homage to the once excellent jsperf.com now with hopefully a more modern & maintainable codebase.
jsperf.com URLs are mirrored at the same path, e.g:
https://jsperf.com/negative-modulo/2
Can be accessed at:
https://jsperf.app/negative-modulo/2
This is a quick test to determine if there is any performance difference to having large constants inside functions or not. EDIT: the closure is needed to have faster access to the variable. That is why it is added
<script>
var SINGLE_THING_TEMPLATE = ['<li id="thing-{{id}}" class="thing">', '{{{dateCard}}}', '{{{preview}}}', '<div class="info">', '<div class="title">', '<h4><a href="{{url}}">{{name}}</a><span class="fade"></span></h4>', '{{#wheelCountLabel}}<span class="wheel-cournt">{{wheelCountLabel}}</span>{{/wheelCountLabel}}', '</div>', '<div class="description">', '<ul class="details">', '{{#details}}', '{{#owner}}<li class="owner">{{owner}}</li>{{/owner}}', '{{#createdDate}}<li class="created">{{createdDate}}</li>{{/createdDate}}', '{{#color}}<li class="color">{{color}}</li>{{/color}}', '{{/details}}', '</ul>', '<p>{{shortDescription}}</p>', '</div>', '{{{actionLinks}}}', '</div>', '</li>'].join('');
function one() {
return new Date();
}
function two() {
var ANOTHER_SINGLE_THING_TEMPLATE = ['<li id="thing-{{id}}" class="thing">', '{{{dateCard}}}', '{{{preview}}}', '<div class="info">', '<div class="title">', '<h4><a href="{{url}}">{{name}}</a><span class="fade"></span></h4>', '{{#wheelCountLabel}}<span class="wheel-cournt">{{wheelCountLabel}}</span>{{/wheelCountLabel}}', '</div>', '<div class="description">', '<ul class="details">', '{{#details}}', '{{#owner}}<li class="owner">{{owner}}</li>{{/owner}}', '{{#createdDate}}<li class="created">{{createdDate}}</li>{{/createdDate}}', '{{#color}}<li class="color">{{color}}</li>{{/color}}', '{{/details}}', '</ul>', '<p>{{shortDescription}}</p>', '</div>', '{{{actionLinks}}}', '</div>', '</li>'].join('');
return new Date();
};
var three;
(function() {
var again_another_SINGLE_THING_TEMPLATE = ['<li id="thing-{{id}}" class="thing">', '{{{dateCard}}}', '{{{preview}}}', '<div class="info">', '<div class="title">', '<h4><a href="{{url}}">{{name}}</a><span class="fade"></span></h4>', '{{#wheelCountLabel}}<span class="wheel-cournt">{{wheelCountLabel}}</span>{{/wheelCountLabel}}', '</div>', '<div class="description">', '<ul class="details">', '{{#details}}', '{{#owner}}<li class="owner">{{owner}}</li>{{/owner}}', '{{#createdDate}}<li class="created">{{createdDate}}</li>{{/createdDate}}', '{{#color}}<li class="color">{{color}}</li>{{/color}}', '{{/details}}', '</ul>', '<p>{{shortDescription}}</p>', '</div>', '{{{actionLinks}}}', '</div>', '</li>'].join('');
three = function() {
return new Date();
}
})();
</script>
Ready to run.
Test | Ops/sec | |
---|---|---|
1 - Const outside |
| ready |
2 - Const inside |
| ready |
3 - const inside closure outside function |
| ready |
You can edit these tests or add more tests to this page by appending /edit to the URL.