Data JSON vs Parse JSON vs Multiple Data Attributes vs DOM traversal for values (v4)

Revision 4 of this 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 data attributes, parse JSON from a single attribute, or use the built-in parsing of data for json.

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-processid="1" data-unitid="2" data-taskid="3" data-json2='{"processID":1,"unitID":2,"taskID":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');
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
Mutli Data Attr
$testLink.data('processid');
$testLink.data('unitid');
$testLink.data('taskid');
ready
Parse 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
Data JSON
var obj = $testLink.data('json2');
obj.processID;
obj.unitTask;
obj.taskID;
ready

Revisions

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