JSON vs Data/Attribute vs DOM traversal for values

Benchmark created by GregWa on

Description

This is a test case to find whether it is more efficient to traverse the DOM to find the related values, pull them directly from the element as attributes, or to parse JSON from a single attribute.

Preparation HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<div id="1" class="process-container">
    <div>        
        <h3>Test H3</h3>
        <p>Address</p>
    </div>
    <div id="2" class="task-data">
<table>
    <thead>
        <tr>
            <td>
                <h4>
                    List
                </h4>
            </td>
            <td>
                <span>Completed</span>            
            </td>
        </tr>
    </thead>
    <tbody>
<tr>
    <td class="first">
        <div class="task-container">
            <input type="checkbox" id="taskGuid" value="someGuid" name="${TaskId}" />           
            <label for="taskGuid" class="task">Task Name</label>
            <div class="functions">                
                <a href="#" class="function-view-file">
                    <span class="sprite sprite-view-icon" />
                    View
                </a>
                <a href="#" id="testLink" data-task-id="3" class="function-note"><span class="sprite sprite-note-icon" />Note</a>
            </div>
            <ol class="notes">
            
            </ol>
        </div>
    </td>
    <td class="date-completed">
         <span>
                --
         </span>
    </td>
</tr>        
    </tbody>
    <tfoot></tfoot>
</table>
    </div>
    <div id="task-data-placeholder"></div>
</div>
<script>
  var $testLink = $('#testLink');
  var json = '{"processID": 1, "unitID": 2, "taskID": 3}';
  $testLink.data('processID', 1);
  $testLink.data('unitID', 2);
  $testLink.data('taskID', 3);
  $testLink.attr('data-json2', json);
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
Data
$testLink.data('processID');
$testLink.data('unitTask');
$testLink.data('taskID');
ready
JSON
var obj = $.parseJSON($testLink.attr('data-json2'));
obj.processID;
obj.unitTask;
obj.taskID;
ready
DOM Traversal
$testLink.closest(".process-container").attr("id");
$testLink.closest(".task-data-container").attr("id");
$testLink.attr('data-task-id');
ready

Revisions

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