canvas-vs-dom-multiple

JavaScript performance comparison

Test case created by JamieKudla

Preparation code

<style type="text/css">
  #tests {
    width: 30000px;
  }
  .detection {
    display: inline-block;
    background-color: pink;
    width: 1px;
    height: 5px;
    margin-right: 1px;
  }
</style>

<div id="tests">
  <h2>Test 1</h2>
  <div id="test1"></div>
  <h2>Test 2</h2>
  <canvas id="test2" width="30000" height="5"></canvas>
</div>
      
<script>
Benchmark.prototype.setup = function() {
  const test1 = document.getElementById('test1');
  const test2 = document.getElementById('test2');
  
  test1.innerHTML = '';
  const ctx = test2.getContext('2d');
  ctx.clearRect(0, 0, test2.width, test2.height);

};
</script>

Preparation code output

<style type="text/css"> #tests { width: 30000px; } .detection { display: inline-block; background-color: pink; width: 1px; height: 5px; margin-right: 1px; } </style> <div id="tests"> <h2>Test 1</h2> <div id="test1"></div> <h2>Test 2</h2> <canvas id="test2" width="30000" height="5"></canvas> </div>

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
HTML Canvas
const ctx = test2.getContext('2d');
ctx.fillStyle = 'pink';

for (let i = 0; i <= 10000; i++) {
  ctx.fillRect(i * 2, 0, 1, 5);
}
pending…
DOM
for (let i = 0; i <= 10000; i++) {
  const detection = document.createElement('div');
  detection.className = 'detection';
  test1.appendChild(detection);
}
pending…

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

0 Comments

Test 1

Test 2