clone.js

//results
//1000 massive nodes with 32 subnodes, a lot of attributes
//deepclone: 50ms
//createFromJSOjb: 150ms

function createNodes() {
    var div = document.createElement('div');
    div.innerHTML = '<div class=" thing id-t3_5fwc30 odd  gilded link " id="thing_t3_5fwc30" data-fullname="t3_5fwc30" data-type="link" data-author="Hawke45" data-author-fullname="t2_bnjaz" data-subreddit="pics" data-subreddit-fullname="t5_2qh0u" data-timestamp="1480595816000" data-url="https://i.reddituploads.com/b45b1452a8414f38a0b498007e5bcd3f?fit=max&amp;h=1536&amp;w=1536&amp;s=cd98d1163f90c23f1f5ec11083507bb8" data-domain="i.reddituploads.com" data-rank="1" data-context="listing">' +
        '<p class="parent"></p><span class="rank">1</span><div class="midcol unvoted"><div class="arrow up login-required access-required" data-event-action="upvote" role="button" aria-label="Голосовать «за»" tabindex="0"></div><div class="score dislikes">10391</div><div class="score unvoted">10392</div><div class="score likes">10393</div><div class="arrow down login-required access-required" data-event-action="downvote" role="button" aria-label="Голосовать «против»" tabindex="0"></div></div><a class="thumbnail may-blank outbound " data-event-action="thumbnail" href="https://i.reddituploads.com/b45b1452a8414f38a0b498007e5bcd3f?fit=max&amp;h=1536&amp;w=1536&amp;s=cd98d1163f90c23f1f5ec11083507bb8" data-href-url="https://i.reddituploads.com/b45b1452a8414f38a0b498007e5bcd3f?fit=max&amp;h=1536&amp;w=1536&amp;s=cd98d1163f90c23f1f5ec11083507bb8" data-outbound-url="https://out.reddit.com/t3_5fwc30?url=https%3A%2F%2Fi.reddituploads.com%2Fb45b1452a8414f38a0b498007e5bcd3f%3Ffit%3Dmax%26h%3D1536%26w%3D1536%26s%3Dcd98d1163f90c23f1f5ec11083507bb8&amp;token=AQAASnBAWKY6nHpCOhYN78GP9wEEBgf2-1GiLbSHe0zmuFBXURgv&amp;app_name=reddit.com" data-outbound-expiration="1480618058000" rel=""><img src="//b.thumbs.redditmedia.com/esmS0WPlZ8jAI0lOxc4sdVvkVLWt6k-A1if7hLas4yg.jpg" width="70" height="52" alt=""></a><div class="entry unvoted"><p class="title"><a class="title may-blank outbound " data-event-action="title" href="https://i.reddituploads.com/b45b1452a8414f38a0b498007e5bcd3f?fit=max&amp;h=1536&amp;w=1536&amp;s=cd98d1163f90c23f1f5ec11083507bb8" tabindex="1" data-href-url="https://i.reddituploads.com/b45b1452a8414f38a0b498007e5bcd3f?fit=max&amp;h=1536&amp;w=1536&amp;s=cd98d1163f90c23f1f5ec11083507bb8" data-outbound-url="https://out.reddit.com/t3_5fwc30?url=https%3A%2F%2Fi.reddituploads.com%2Fb45b1452a8414f38a0b498007e5bcd3f%3Ffit%3Dmax%26h%3D1536%26w%3D1536%26s%3Dcd98d1163f90c23f1f5ec11083507bb8&amp;token=AQAASnBAWKY6nHpCOhYN78GP9wEEBgf2-1GiLbSHe0zmuFBXURgv&amp;app_name=reddit.com" data-outbound-expiration="1480618058000" rel="">Picture i took last night of the Philadelphia City hall, felt like i was in Gotham</a> <span class="domain">(<a href="/domain/i.reddituploads.com/">i.reddituploads.com</a>)</span></p><div class="expando-button collapsed video"></div><p class="tagline ">отправлено <time title="Thu Dec 1 12:36:56 2016 UTC" datetime="2016-12-01T12:36:56+00:00" class="live-timestamp">5 часов назад</time> автор <a href="https://www.reddit.com/user/Hawke45" class="author may-blank id-t2_bnjaz">Hawke45</a><span class="userattrs"></span> в <a href="https://www.reddit.com/r/pics/" class="subreddit hover may-blank">/r/pics</a></p><ul class="flat-list buttons"><li class="first"><a href="https://www.reddit.com/r/pics/comments/5fwc30/picture_i_took_last_night_of_the_philadelphia/" data-event-action="comments" class="bylink comments may-blank" rel="nofollow">981 комментарий</a></li><li class="share"><a class="post-sharing-button" href="javascript: void 0;">поделиться</a></li></ul><div class="reportform report-t3_5fwc30"></div><div class="expando expando-uninitialized" style="display: none" data-cachedhtml=" <div class=&quot;media-preview&quot; id=&quot;media-preview-5fwc30&quot; style=&quot;max-width: 1024px&quot;> <div class=&quot;media-preview-content&quot;> <a href=&quot;https://i.reddituploads.com/b45b1452a8414f38a0b498007e5bcd3f?fit=max&amp;amp;h=1536&amp;amp;w=1536&amp;amp;s=cd98d1163f90c23f1f5ec11083507bb8&quot; class=&quot;may-blank&quot;> <img class=&quot;preview&quot; src=&quot;https://i.redditmedia.com/AenT9ow4A4kKx4HDOqoo5nNweRVjvAkfOpIFfIAtoQY.jpg?w=1024&amp;amp;s=31ffd30dd436981594870be89868650e&quot; width=&quot;1024&quot; height=&quot;767&quot;> </a> </div> </div> "><span class="error">loading...</span></div></div><div class="child"></div><div class="clearleft"></div></div>';
    return div;
}

function toTree(dom) {
    var divObj = {};
    divObj.tag = dom.tagName;
    if (dom.attributes) {
        var attrs = [];
        for (var i = 0; i < dom.attributes.length; i++) {
            var attr = dom.attributes[i];
            attrs.push(attr.name, attr.value)
        }
        divObj.attrs = attrs;
    }
    if (dom instanceof Text) {
        divObj.text = dom.textContent;
    }
    if (dom.childNodes) {
        var children = [];
        for (var i = 0; i < dom.childNodes.length; i++) {
            var child = toTree(dom.childNodes[i]);
            children.push(child);
        }
        divObj.children = children;
    }
    return divObj;
}

function create(node) {
    if (node.tag) {
        var dom = document.createElement(node.tag);
        for (var i = 0; i < node.attrs.length; i += 2) {
            var attr = node.attrs[i];
            var value = node.attrs[i + 1];
            dom.setAttribute(attr, value);
        }
        for (var i = 0; i < node.children.length; i++) {
            var child = node.children[i];
            dom.appendChild(create(child));
        }
    } else {
        dom = document.createTextNode(node.text);
    }
    return dom;
}

function deepClone() {
    var node = origNodes.cloneNode(true);
    origNodes.childNodes[0].childNodes[2].childNodes[0];
    origNodes.childNodes[0].childNodes[4].childNodes[3].childNodes[1].childNodes[0];
    return node;
}

function traverse(dom) {
    if (dom instanceof HTMLElement) {
        var len = dom.childNodes.length;
        for (var i = 0; i < len; i++) {
            traverse(dom.childNodes[i]);
        }
    }
}


var origNodes = createNodes();
var tree = toTree(origNodes);
console.log(tree);

console.time('perf');
var node = document.createElement('div');
for (var i = 0; i < 1000; i++) {
    // node.appendChild(deepClone());
    node.appendChild(create(tree));
}
console.timeEnd('perf');