Data attribute versus crawling the DOM to retrieve data

Benchmark created by Craig on December 30, 2010

Description

Preparation HTML

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

Test runner

var x = getDataFromTags();

var x = getDataFromData();

Revisions

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

• Revision 1: published by Craig on December 30, 2010