canvas vs div text print (v11)

Revision 11 of this benchmark created on

Preparation HTML

<canvas id="canvas"></canvas>
<div id="div" style="height: 500px; overflow: auto; width: 400px"></div>

Setup

var text = "test text<div>test</div><div style=\"float:left\">left</div><a href=\"#\">a</a>";
    var canvas = document.getElementById("canvas");
    var div = document.getElementById("div");
    var testloop = 0;
    div.innerHTML = "";
    
    var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame;

Teardown


    div.innerHTML = "";

Test runner

Ready to run.

Testing in
TestOps/sec
Canvas
var context = canvas.getContext("2d");
for(var n = 0; n < 50; n++) {
   context.font = "italic "+ (30 + n) +"pt Arial";
   context.fillText(text, 10, 10);
}
ready
Create DIV, place it to DOM (text is textNode)
for(var n = 0; n < 50; n++) {
   var cntx = document.createElement("DIV");
   cntx.style.fontFamily = "Arial";
   cntx.style.fontSize = (30 + n) + "pt";
   cntx.style.fontStyle = "italic";
   cntx.appendChild(document.createTextNode(text));
   div.appendChild(cntx);
}
ready
create DIV, place it to document fragment (text in innerHTML)
for(var n = 0; n < 50; n++) {
   var cntx = document.createElement("DIV");
   cntx.style.fontFamily = "Arial";
   cntx.style.fontSize = (30 + n) + "pt";
   cntx.style.fontStyle = "italic";
   cntx.innerHTML = text;
   div.appendChild(cntx);
}
ready
create DIV, place it to documentFragment, place it to DOM (text is textNode)
var frg = document.createDocumentFragment();
for(var n = 0; n < 50; n++) {
   var cntx = document.createElement("DIV");
   cntx.style.fontFamily = "Arial";
   cntx.style.fontSize = (30 + n) + "pt";
   cntx.style.fontStyle = "italic";
cntx.appendChild(document.createTextNode(text));
   frg.appendChild(cntx);
}
div.appendChild(frg);
ready
create DIV, place it to documentFragment, place it to DOM (text in innerHTML)
var frg = document.createDocumentFragment();
for(var n = 0; n < 50; n++) {
   var cntx = document.createElement("DIV");
   cntx.style.fontFamily = "Arial";
   cntx.style.fontSize = (30 + n) + "pt";
   cntx.style.fontStyle = "italic";
   cntx.innerHTML = text;
   frg.appendChild(cntx);
}
div.appendChild(frg);
ready
innerHTML
var res = "";
for(var n = 0; n < 50; n++) {
   res += "<div style=\"font-family: Arial; font-size: " + (30 + n) + "pt; font-style: italic\">";
   res += text;
   res += "</div>";
}
div.innerHTML = res;
ready
create DIV, place it to documentFragment, place it to DOM (text is textNode) (requestAnimationFrame)
// async test
requestAnimationFrame(function() {
for(var n = 0; n < 50; n++) {
   var cntx = document.createElement("DIV");
   cntx.style.fontFamily = "Arial";
   cntx.style.fontSize = (30 + n) + "pt";
   cntx.style.fontStyle = "italic";
   cntx.appendChild(document.createTextNode(text));
   div.appendChild(cntx);
}
deferred.resolve();
});
ready

Revisions

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