Passing More Data to a Script

Benchmark created by Mike on

Description

Testing the performance of retrieving data from a script's URL versus from a script's data- attributes. Normally, this would be done within the included script, but a fake external script is used here to simplify the tests.

Preparation HTML

<div id="fakeScript">
</div>
<script>
  var fakeScript = document.getElementById('fakeScript'),
      fakeSrc = 'http://example.com/#';
  
  for (var i = 0; i < 20; ++i) {
    fakeSrc += i + '=' + i + '&';
    fakeScript.setAttribute('data-' + i, i);
  }
  fakeScript.setAttribute('data-src', fakeSrc);
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
Parsing the URL
var url = fakeScript.getAttribute('data-src'),
    paramStrings = url.slice(url.search('#') + 1).split('&'),
    params = {},
    keyVal;

for (var i = 0, l = paramStrings.length; i < l; ++i) {
  keyVal = paramStrings[i].split('=');
  params[keyVal[0]] = keyVal[1];
}
ready
Reading data- Attributes
var params = {};

for (var i = 0; i < 20; ++i) {
  params[i] = fakeScript.getAttribute('data-' + i);
}
ready

Revisions

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

  • Revision 1: published by Mike on