jsPerf.app is an online JavaScript performance benchmark test runner & jsperf.com mirror. It is a complete rewrite in homage to the once excellent jsperf.com now with hopefully a more modern & maintainable codebase .
jsperf.com URLs are mirrored at the same path, e.g:
https://jsperf.com/negative-modulo/2 Can be accessed at:
https://jsperf.app/negative-modulo/2 appendChild vs. DocumentFragment vs. innerHTML (v60) Revision 60 of this benchmark created on May 19, 2014 Description Comparing 4 different ways to dynamically insert new elements into the DOM tree.
Preparation HTML <div id ="test1" > </div >
<div id ="test2" > </div >
<div id ="test3" > </div >
<div id ="test4" > </div >
<script >
function text (node, txt ) {
node.appendChild (document .createTextNode (txt));
return node;
}
function cleanUp (node ) {
node.innerHTML = "" ;
}
var content = [
document .createElement ("hr" ),
text (document .createElement ("b" ), "Links:" ),
document .createTextNode (" " ),
text (document .createElement ("a" ), "Link A" ),
document .createTextNode (" | " ),
text (document .createElement ("a" ), "Link B" ),
document .createTextNode (" | " ),
text (document .createElement ("a" ), "Link C" )
];
</script >
Setup var content = [
document .createElement ("hr" ),
text (document .createElement ("b" ), "Links:" ),
document .createTextNode (" " ),
text (document .createElement ("a" ), "Link A" ),
document .createTextNode (" | " ),
text (document .createElement ("a" ), "Link B" ),
document .createTextNode (" | " ),
text (document .createElement ("a" ), "Link C" )
];
Test runner Ready to run.
Run Quick Run Testing in Test Ops/sec appendChild var div1 = document .getElementById ("test1" );
for (var i = 0 , j = content.length ; i < j; i++) {
div1.appendChild (content[i]);
}
cleanUp (div1);
ready
DocumentFragment var div2 = document .getElementById ("test2" ),
fragment = document .createDocumentFragment ();
for (var i = 0 , j = content.length ; i < j; i++) {
fragment.appendChild (content[i]);
}
div2.appendChild (fragment);
cleanUp (div2);
ready
innerHTML var div3 = document .getElementById ("test3" );
div3.innerHTML += "<hr><b>Links:</b> <a>Link A</a> | <a>Link B</a> | <a>Link C</a>" ;
cleanUp (div3);
ready
“Offline” node method var div4 = document .getElementById ("test4" ),
container = document .createElement ("div" );
for (var i = 0 , j = content.length ; i < j; i++) {
container.appendChild (content[i]);
}
div4.appendChild (container);
cleanUp (div4);
ready
Better innerHTML method var div3 = document .getElementById ("test3" );
var str = '' ;
str += "<hr><b>Links:</b> <a>Link A</a> | <a>Link B</a> | <a>Link C</a>" ;
div3.innerHTML = str;
cleanUp (div3);
ready
Revisions You can edit these tests or add more tests to this page by appending /edit to the URL.
Revision 1 : published by Tom Doan on February 13, 2011 Revision 3 : published on March 24, 2011 Revision 4 : published by Premasagar Rose on March 30, 2011 Revision 5 : published by Dominik Porada on May 25, 2011 Revision 6 : published on June 6, 2011 Revision 7 : published by Dominik Porada on June 7, 2011 Revision 8 : published on July 12, 2011 Revision 9 : published by chris bodar on July 22, 2011 Revision 10 : published by chris bodar on July 22, 2011 Revision 11 : published by chris bodar on July 22, 2011 Revision 12 : published on July 26, 2011 Revision 14 : published on September 5, 2011 Revision 15 : published on May 8, 2012 Revision 18 : published on February 14, 2013 Revision 19 : published by Chris Khoo on February 28, 2013 Revision 20 : published by Anirudh on March 21, 2013 Revision 21 : published on March 26, 2013 Revision 22 : published on March 26, 2013 Revision 23 : published on April 22, 2013 Revision 24 : published on May 20, 2013 Revision 25 : published on July 9, 2013 Revision 26 : published on July 9, 2013 Revision 27 : published on July 16, 2013 Revision 28 : published on July 25, 2013 Revision 29 : published by utyf on July 26, 2013 Revision 30 : published on July 26, 2013 Revision 31 : published by utyf on July 26, 2013 Revision 32 : published on July 28, 2013 Revision 33 : published on August 2, 2013 Revision 34 : published by David on August 14, 2013 Revision 35 : published by bunicu on August 14, 2013 Revision 36 : published by bunicu on August 14, 2013 Revision 37 : published on August 26, 2013 Revision 38 : published on August 28, 2013 Revision 39 : published on September 24, 2013 Revision 41 : published by Oliver Pulges on October 7, 2013 Revision 42 : published on October 7, 2013 Revision 43 : published on October 12, 2013 Revision 44 : published by tomByrer on November 8, 2013 Revision 45 : published by Eric Rowell on November 12, 2013 Revision 46 : published by Eric Rowell on November 12, 2013 Revision 47 : published on November 20, 2013 Revision 48 : published by Honnza on December 2, 2013 Revision 49 : published on December 19, 2013 Revision 50 : published on December 26, 2013 Revision 52 : published on January 28, 2014 Revision 54 : published on February 26, 2014 Revision 55 : published on February 26, 2014 Revision 56 : published on February 26, 2014 Revision 57 : published on March 1, 2014 Revision 58 : published on March 7, 2014 Revision 59 : published on May 10, 2014 Revision 60 : published on May 19, 2014 Revision 61 : published on June 12, 2014 Revision 62 : published on August 16, 2014 Revision 64 : published on October 10, 2014 Revision 65 : published on October 10, 2014