innerHTML vs removeChild (v191)

Revision 191 of this benchmark created by hansifer on

Description

what method for empty a element is faster ?

Preparation HTML

<div id='box'></div>

Setup

var box = document.getElementById('box');
    box.innerHTML = '<div class="mv-hide" id="most-visited"><div id="mv-tiles" style="width: 620px;"><div class="mv-row"><div class="mv-tile mv-page" tabindex="1"><iframe id="title-0" src="chrome-search://most-visited/title.html?rid=1&amp;c=777777&amp;f=arial%2Csans-serif&amp;fs=11&amp;ts=&amp;pos=0" class="mv-title" tabindex="-1"></iframe><iframe id="thumb-0" src="chrome-search://most-visited/thumbnail.html?rid=1&amp;c=777777&amp;f=arial%2Csans-serif&amp;fs=11&amp;ts=&amp;pos=0" allowtransparency="true" class="mv-thumb" tabindex="-1"></iframe><div class="mv-mask"></div><div class="mv-x" title="Dont show on this page"></div><img class="mv-fav" src="chrome-search://favicon/size/16@1x/2/1"></div><div class="mv-tile mv-page" tabindex="1"><iframe id="title-1" src="chrome-search://most-visited/title.html?rid=2&amp;c=777777&amp;f=arial%2Csans-serif&amp;fs=11&amp;ts=&amp;pos=1" class="mv-title" tabindex="-1"></iframe><iframe id="thumb-1" src="chrome-search://most-visited/thumbnail.html?rid=2&amp;c=777777&amp;f=arial%2Csans-serif&amp;fs=11&amp;ts=&amp;pos=1" allowtransparency="true" class="mv-thumb" tabindex="-1"></iframe><div class="mv-mask"></div><div class="mv-x" title="Dont show on this page"></div><img class="mv-fav" src="chrome-search://favicon/size/16@1x/2/2"></div><div class="mv-tile mv-page" tabindex="1"><iframe id="title-2" src="chrome-search://most-visited/title.html?rid=3&amp;c=777777&amp;f=arial%2Csans-serif&amp;fs=11&amp;ts=&amp;pos=2" class="mv-title" tabindex="-1"></iframe><iframe id="thumb-2" src="chrome-search://most-visited/thumbnail.html?rid=3&amp;c=777777&amp;f=arial%2Csans-serif&amp;fs=11&amp;ts=&amp;pos=2" allowtransparency="true" class="mv-thumb" tabindex="-1"></iframe><div class="mv-mask"></div><div class="mv-x" title="Dont show on this page"></div><img class="mv-fav" src="chrome-search://favicon/size/16@1x/2/3"></div><div class="mv-tile mv-page" tabindex="1"><iframe id="title-3" src="chrome-search://most-visited/title.html?rid=4&amp;c=777777&amp;f=arial%2Csans-serif&amp;fs=11&amp;ts=&amp;pos=3" class="mv-title" tabindex="-1"></iframe><iframe id="thumb-3" src="chrome-search://most-visited/thumbnail.html?rid=4&amp;c=777777&amp;f=arial%2Csans-serif&amp;fs=11&amp;ts=&amp;pos=3" allowtransparency="true" class="mv-thumb" tabindex="-1"></iframe><div class="mv-mask"></div><div class="mv-x" title="Dont show on this page"></div><img class="mv-fav" src="chrome-search://favicon/size/16@1x/2/4"></div></div><div class="mv-row"><div class="mv-tile mv-page" tabindex="1"><iframe id="title-4" src="chrome-search://most-visited/title.html?rid=5&amp;c=777777&amp;f=arial%2Csans-serif&amp;fs=11&amp;ts=&amp;pos=4" class="mv-title" tabindex="-1"></iframe><iframe id="thumb-4" src="chrome-search://most-visited/thumbnail.html?rid=5&amp;c=777777&amp;f=arial%2Csans-serif&amp;fs=11&amp;ts=&amp;pos=4" allowtransparency="true" class="mv-thumb" tabindex="-1"></iframe><div class="mv-mask"></div><div class="mv-x" title="Dont show on this page"></div><img class="mv-fav" src="chrome-search://favicon/size/16@1x/2/5"></div><div class="mv-tile mv-page" tabindex="1"><iframe id="title-5" src="chrome-search://most-visited/title.html?rid=6&amp;c=777777&amp;f=arial%2Csans-serif&amp;fs=11&amp;ts=&amp;pos=5" class="mv-title" tabindex="-1"></iframe><iframe id="thumb-5" src="chrome-search://most-visited/thumbnail.html?rid=6&amp;c=777777&amp;f=arial%2Csans-serif&amp;fs=11&amp;ts=&amp;pos=5" allowtransparency="true" class="mv-thumb" tabindex="-1"></iframe><div class="mv-mask"></div><div class="mv-x" title="Dont show on this page"></div><img class="mv-fav" src="chrome-search://favicon/size/16@1x/2/6"></div><div class="mv-tile mv-page" tabindex="1"><iframe id="title-6" src="chrome-search://most-visited/title.html?rid=7&amp;c=777777&amp;f=arial%2Csans-serif&amp;fs=11&amp;ts=&amp;pos=6" class="mv-title" tabindex="-1"></iframe><iframe id="thumb-6" src="chrome-search://most-visited/thumbnail.html?rid=7&amp;c=777777&amp;f=arial%2Csans-serif&amp;fs=11&amp;ts=&amp;pos=6" allowtransparency="true" class="mv-thumb" tabindex="-1"></iframe><div class="mv-mask"></div><div class="mv-x" title="Dont show on this page"></div><img class="mv-fav" src="chrome-search://favicon/size/16@1x/2/7"></div><div class="mv-tile mv-page" tabindex="1"><iframe id="title-7" src="chrome-search://most-visited/title.html?rid=8&amp;c=777777&amp;f=arial%2Csans-serif&amp;fs=11&amp;ts=&amp;pos=7" class="mv-title" tabindex="-1"></iframe><iframe id="thumb-7" src="chrome-search://most-visited/thumbnail.html?rid=8&amp;c=777777&amp;f=arial%2Csans-serif&amp;fs=11&amp;ts=&amp;pos=7" allowtransparency="true" class="mv-thumb" tabindex="-1"></iframe><div class="mv-mask"></div><div class="mv-x" title="Dont show on this page"></div><img class="mv-fav" src="chrome-search://favicon/size/16@1x/2/8"></div></div></div><div class="mv-noti-hide" id="mv-noti"><span id="mv-noti-msg">Thumbnail removed.</span><span id="mv-noti-lks"><span id="mv-undo" tabindex="1">Undo</span><span id="mv-restore" tabindex="1">Restore all</span><button class="mv-x" id="mv-noti-x" tabindex="1"></button></span></div><div class="mv-noti-hide" id="mv-noti-error"><span id="mv-noti-msg">Error removing thumbnail; Chrome needs to be online.</span></div></div>'

Test runner

Ready to run.

Testing in
TestOps/sec
removeChildFirst
while (box.firstChild) {
  box.removeChild(box.firstChild);
}
ready
innerHTML
box.innerHTML = '';
ready
removeChildLast
while (box.lastChild) {
  box.removeChild(box.lastChild);
}
ready
removeChildLast with display="none"
while (box.lastChild) {
  if (box.lastChild.style) box.lastChild.style.display = 'none';
  box.removeChild(box.lastChild);
}
ready

Revisions

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