widgets-params1

Benchmark created by s.mishin on


Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<widget id="widget1" data-args="asd">
        <parameters>
                <param name="bla1" value="bla1"/>
                <param name="bla2" value="2"/>
                <param name="bla3" value="true"/>
<param name="bla4" value="bla1"/>
                <param name="bla5" value="2"/>
                <param name="bla6" value="true"/>
<param name="bla7" value="bla1"/>
                <param name="bla8" value="2"/>
                <param name="bla9" value="true"/>
        </parameters>
</widget>

<widget id="widget2" data-args="{'bla1': 'bla1', 'bla2': 2,'bla3': true,'bla4': 'bla1', 'bla5': 2,'bla6': true,'bla7': 'bla1', 'bla8': 2,'bla9': true}"/>

<widget id="widget3" data-bla1="bla1" data-bla2="2" data-bla3="true" data-bla4="bla1" data-bla5="2" data-bla6="true" data-bla7="bla1" data-bla8="2" data-bla9="true"/>
<widget id="widget4" data-args="event1, event2, data,event4, event5, data3, event6, event7, data7"/>

Setup

var params = {};
    var json = {
      bla1: Math.random(),
      bla2: Math.random(),
      bla3: Math.random()
    };
    
    function trim(str) {
      return str.trim();
    }
    
    function getParams(param) {
      return param.indexOf('arg-') !== -1;
    }
    
    var widget1 = $('#widget1'),
      widget2 = $('#widget2'),
      widget3 = $('#widget3');
    
    widget1.find('param').each(function(i, elem) {
      $(elem).attr('name', Math.random())
    });
    widget2.data('args', JSON.stringify(json).replace(/\"/g, "'"));
    widget3[0].setAttribute('data-bla1', Math.random());
    widget3[0].setAttribute('data-bla2', Math.random());
    widget3[0].setAttribute('data-bla3', Math.random());

Test runner

Ready to run.

Testing in
TestOps/sec
dom params
var widget1 = $('#widget1');
widget1.find('param').each(function(index, elem) {
  params[elem.getAttribute('name')] = elem.getAttribute('value');
});
ready
native dom
var params = document.getElementById('widget1').getElementsByTagName('param'),
  i = params.length >>> 0,
  param,
  obj = {};

for (i; i--;) {
  param = params[i];
  obj[param.getAttribute('name')] = param.getAttribute('value');
}
ready
JSON
var widget2 = $('#widget2');
params = JSON.parse(widget2.data('args').replace(/\'/g, '"'));
ready
data attr
var widget3 = $('#widget3');
var args = widget3.data();
for (key in args) {
  if (key.indexOf('arg') !== -1) {
    params[key.substr(3, key.length)] = args[key];
  }
}
ready
data-args
var widget4 = $('#widget4');
params = widget4.data('args').split(',').map(trim);
ready
native dom1
 var
 params = document.getElementById('widget1').getElementsByTagName('param'),
   len = params.length >>> 0,
   iterations = len % 8,
   i = len - 1,
   obj = {};

 function proc(param) {
   obj[param.getAttribute('name')] = param.getAttribute('value');
 }

 while (iterations) {
   proc(params[i--]);
   iterations--;
 }
 iterations = len >>> 3;
 while (iterations) {
   proc(params[i--]);
   proc(params[i--]);
   proc(params[i--]);
   proc(params[i--]);
   proc(params[i--]);
   proc(params[i--]);
   proc(params[i--]);
   proc(params[i--]);
   iterations--;
 }
ready

Revisions

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

  • Revision 1: published by s.mishin on