Skip to content

Instantly share code, notes, and snippets.

@alexmaday

alexmaday/gist:ae7859c6b290bdb2fe2859b4a3a53bf5

Forked from oliverfernandez/gist:5619180
Created October 11, 2017 20:18
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save alexmaday/ae7859c6b290bdb2fe2859b4a3a53bf5 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save alexmaday/ae7859c6b290bdb2fe2859b4a3a53bf5 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Oliver Fernandez created this gist May 21, 2013.
    52 changes: 52 additions & 0 deletions gistfile1.txt
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,52 @@
    var mainNodeInner = document.createElement('div'),
    mainNodeInnerPlus = document.createElement('div'),
    mainNodeAppend = document.createElement('div'),
    sampleHTML = '<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>',
    testHTML = '',
    numSamples = 1000,
    before = null,
    after = null;

    //SET UP
    for (i = 0; i < numSamples; i++) {
    testHTML += sampleHTML;
    }


    //INNER HTML +=
    mainNodeInnerPlus.innerHTML = testHTML;

    before = new Date().getTime();
    mainNodeInnerPlus.innerHTML += sampleHTML;
    after = new Date().getTime();

    console.log("TIME INNER HTML +=: " + (after - before) + " ms");
    console.log("Num childs after: " + mainNodeInnerPlus.childElementCount);

    console.log(' ');

    //INNER HTML =
    var allHTML = testHTML + sampleHTML;

    before = new Date().getTime();
    mainNodeInner.innerHTML = allHTML;
    after = new Date().getTime();

    console.log("TIME INNER HTML =: " + (after - before) + " ms");
    console.log("Num childs after: " + mainNodeInner.childElementCount);

    console.log(' ');

    //APPEND CHILD
    mainNodeAppend.innerHTML = testHTML;

    before = new Date().getTime();
    var sampleNode = document.createElement('div');
    sampleNode.innerHTML = sampleHTML;

    while(sampleNode.hasChildNodes()) {
    mainNodeAppend.appendChild(sampleNode.firstChild);
    }
    after = new Date().getTime();
    console.log("TIME APPEND CHILD: " + (after - before) + " ms");
    console.log("Num childs after: " + mainNodeAppend.childElementCount);