Constants inside functions (v2)

Revision 2 of this benchmark created by EWGL on

Description

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

Preparation HTML

<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>

Test runner

Ready to run.

Testing in
TestOps/sec
1 - Const outside
one();
ready
2 - Const inside
two();
ready
3 - const inside closure outside function
three()
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.