innerHTML vs dom-diff with no change to DOM

Benchmark created by DOMtesterer on December 22, 2014

Description

Preparation HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://rawgit.com/fiduswriter/diffDOM/gh-pages/diffDOM.js"></script>

<!-- Existing DOM elements into which the tests will append new content -->
<div id="parent-inner">Replace me via <code>elm.innerHTML</code></div>
<hr/>
<div id="parent-diffhtml">Replace me via <code>$elm.diffhtml()</code></div>
<hr/>
<div id="parent-jquery">Replace me via <code>$elm.html()</code></div>

Setup

var inner = document.getElementById('parent-inner');
    var $diffhtml = $('#parent-diffhtml');
    var $jquery = $('#parent-jquery');
    var dd = new diffDOM();
    var contentInit = '<div><b>a</b><p>Init element</p><div></div>\</div>';
    var contentApply = '<div><i>a</i><p>Applied element</p><div><b>test</b></div></div>';
    
    if (Math.floor(Math.random() * 10) >= 0) contentApply = contentInit;
    
    var $contentInit = $(contentInit)
    var $contentApply = $(contentApply)
    
    inner.innerHTML = contentInit;
    $diffhtml.html($(contentInit));
    $jquery.html(contentInit);

Test runner

inner.innerHTML = contentInit;
inner.innerHTML = contentApply;

diff = dd.diff($contentInit[0], $contentApply[0]);
if (diff.length > 0) dd.apply($contentInit[0], diff);
$diffhtml[0].innerHTML = $contentInit[0].innerHTML;

$jquery.html(contentInit);
$jquery.html(contentApply);

Revisions

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

• Revision 1: published by DOMtesterer on December 22, 2014