mask vs mask 050

JavaScript performance comparison

Revision 8 of this test case created by tenbits

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<script src="https://raw.github.com/tenbits/MaskJS/master/lib/mask.js">
</script>
<script>
  var maskN = mask;
</script>
<script src="https://raw.github.com/tenbits/MaskJS/v050/lib/mask.js">
</script>
<script>
  var mask050 = mask;
</script>
<script src="https://raw.github.com/tenbits/MaskJS/scope-vars/lib/mask.js">
</script>
<script>
  var maskScoped = mask;
</script>
<script src="https://raw.github.com/tenbits/MaskJS/inline-binds/lib/mask.js">
</script>
<script>
  var maskArrInterp = mask;
</script>
<script src="https://raw.github.com/tenbits/MaskJS/maskdom/lib/mask.js">
</script>
<script>
  var maskLinkedRecursion = mask;
</script>

<script>
  window.sharedVariables = {
    header: "Header",
    header2: "Header2",
    header3: "Header3",
    header4: "Header4",
    header5: "Header5",
    header6: "Header6",
    list: ['1000000000', '2', '3', '4', '5', '6', '7', '8', '9', '10']
  };

   window.maskTemplateRaw = "div { \
                                    h1.header > '#{header}'\
                                    h2.header2 > '#{header2}'\
                                    h3.header3 > '#{header3}'\
                                    h4.header4 > '#{header4}'\
                                    h5.header5 > '#{header5}'\
                                    h6.header6 > '#{header6}'\
div#id.myClass data-attr='attr' data-title='title' > span > 'hello' \
                                    ul.list > list value='list' > li.item > '#{.}'\
}"
;

 window.maskTemplateRaw2 = "div { \
                                    h1.header > '#{header}'\
                                    h2.header2 > '#{header2}'\
                                    h3.header3 > '#{header3}'\
                                    h4.header4 > '#{header4}'\
                                    h5.header5 > '#{header5}'\
                                    h6.header6 > '#{header6}'\
div#id.myClass data-attr='attr' data-title='title' > span > 'hello' \
                                    ul.list > % foreach='list' > li.item > '#{.}'\
}"
;
</script>
<div id="template" style="">
</div>
<script>
Benchmark.prototype.setup = function() {
    var div = $('#template')[0];
};

Benchmark.prototype.teardown = function() {
    div.innerHTML = '';
};
</script>

Preparation code output

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
mask
div.appendChild(maskN.render(maskTemplateRaw2, sharedVariables));

++sharedVariables.list[0];

maskN.clearCache();
pending…
mask:scope-vars
div.appendChild(maskScoped.render(maskTemplateRaw, sharedVariables));

++sharedVariables.list[0];

maskScoped.clearCache();
pending…
mask array interpolation
div.appendChild(maskArrInterp.render(maskTemplateRaw, sharedVariables));

++sharedVariables.list[0];

maskArrInterp.clearCache();
pending…
maskLinkedRecursion
div.appendChild(maskLinkedRecursion.render(maskTemplateRaw2, sharedVariables));

++sharedVariables.list[0];

maskLinkedRecursion.clearCache();
pending…
mask 050
div.appendChild(mask050.renderDom(maskTemplateRaw, sharedVariables));

++sharedVariables.list[0];
pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

0 comments

Add a comment