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
Which is the faster method of retrieving data from a series of containers: by grabbing the values directly from 'data' attributes on the container, or by crawling through the container's DOM structure looking for particular tags and values?
<ul id="contactList">
<li data-firstname="Cesc" data-lastname="Fabregas" data-tel="020 7619 5000" data-address="75 Drayton Park|London N5 1BU|UK" data-lastupdated="12345">
<div class="avatar">A</div>
<div class="infoContainer">
<ul class="contactInfo">
<li class="name">
<span class="label">Name:</span>
<span class="value">Francesc Fabregas</span>
</li>
<li class="address">
<span class="label">Address:</span>
<p class="value">75 Drayton Park<br/>London N5 1BU<br/>UK</p>
</li>
<li class="phone">
<span class="label">Phone:</span>
<span class="value tel">+020 7619 5000</span>
</li>
</ul>
<span class="date">Last updated: 11/27/2010 19:13</span>
</div>
</li>
<li data-firstname="Samir" data-lastname="Nasri" data-tel="020 7619 5000" data-address="75 Drayton Park|London N5 1BU|UK" data-lastupdated="12345">
<div class="avatar">B</div>
<div class="infoContainer">
<ul class="contactInfo">
<li class="name">
<span class="label">Name:</span>
<span class="value">Samir Nasri</span>
</li>
<li class="address">
<span class="label">Address:</span>
<p class="value">75 Drayton Park<br/>London N5 1BU<br/>UK</p>
</li>
<li class="phone">
<span class="label">Phone:</span>
<span class="value tel">+020 7619 5000</span>
</li>
</ul>
<span class="date">Last updated: 11/27/2010 19:13</span>
</div>
</li>
<li data-firstname="Cesc" data-lastname="Fabregas" data-tel="020 7619 5000" data-address="75 Drayton Park|London N5 1BU|UK" data-lastupdated="12345">
<div class="avatar">C</div>
<div class="infoContainer">
<ul class="contactInfo">
<li class="name"><span class="label">Name:</span> <span class="value">David Villa</span></li>
<li class="address"><span class="label">Address:</span> <p class="value">75 Drayton Park<br/>London N5 1BU<br/>UK</p></li>
<li class="phone"><span class="label">Phone:</span> <span class="value tel">+020 7619 5000</span></li>
</ul>
<span class="date">Last updated: 11/27/2010 19:13</span>
</div>
</li>
<li data-firstname="Keisuke" data-lastname="Honda" data-tel="020 7619 5000" data-address="75 Drayton Park|London N5 1BU|UK" data-lastupdated="12345">
<div class="avatar">D</div>
<div class="infoContainer">
<ul class="contactInfo">
<li class="name"><span class="label">Name:</span> <span class="value">Honda Keisuke</span></li>
<li class="address"><span class="label">Address:</span> <p class="value">75 Drayton Park<br/>London N5 1BU<br/>UK</p></li>
<li class="phone"><span class="label">Phone:</span> <span class="value tel">+020 7619 5000</span></li>
</ul>
<span class="date">Last updated: 11/27/2010 19:13</span>
</div>
</li>
</ul><script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
function getDataFromTags() {
// These arrays will be populated and returned at the end of the function
var lastNames = [],
streetAddresses = [],
lastUpdatedDates = [];
// Get the list of contact items
var $people = $('ul#contactList > li');
$people.each(function() {
var lastName, streetAddress, lastUpdatedDate, $this = $(this);
var wholeName = $this.find('li.name > span.value').html();
lastName = wholeName.substr(wholeName.indexOf(' ') + 1);
lastNames.push(lastName);
var wholeAddress = $this.find('li.address > p.value').html();
streetAddress = wholeAddress.substr(wholeAddress.indexOf('<br/>') + 1);
streetAddresses.push(streetAddress);
lastUpdatedDate = new Date($this.find('li.address > p.value').html().replace('Last updated: ', ''));
lastUpdatedDates.push(lastUpdatedDate);
});
return [lastNames, streetAddresses, lastUpdatedDates];
}
function getDataFromData() {
var lastNames = [],
streetAddresses = [],
lastUpdatedDates = [];
var $people = $('ul#contactList > li');
$people.each(function() {
var lastName, streetAddress, lastUpdatedDate, $this = $(this);
lastName = $this.data('lastname');
lastNames.push(lastName);
streetAddresses.push($this.data('address').split('|')[0]);
lastUpdatedDates.push(new Date($this.data('date')));
});
return [lastNames, streetAddresses, lastUpdatedDates];
}
</script>
Ready to run.
Test | Ops/sec | |
---|---|---|
DOM crawl |
| ready |
Data attribute |
| ready |
You can edit these tests or add more tests to this page by appending /edit to the URL.