HTML Preparation code:
AخA
 
1
<body></body>
Tests:
  • With createElement() and append()

     
    const canvas = document.createElement("canvas");
    canvas.id = "canvas";
    document.body.append(canvas);
  • With createElement() and appendChild()

     
    const canvas = document.createElement("canvas");
    canvas.id = "canvas";
    document.body.appendChild(canvas);
  • With innerHTML and getElementById()

     
    document.body.innerHTML = "<canvas id='canvas'></canvas>";
    const canvas = document.getElementById("canvas");
  • With innerHTML and getElementsByClassName()

     
    document.body.innerHTML = "<canvas class='canvas'></canvas>";
    const canvas = document.getElementsByClassName("canvas")[0];
  • With innerHTML and getElementsByTagName()

     
    document.body.innerHTML = "<canvas id='canvas'></canvas>";
    const canvas = document.getElementsByTagName("canvas")[0];
  • With innerHTML and querySelector()

     
    document.body.innerHTML = "<canvas id='canvas'></canvas>";
    const canvas = document.body.querySelector("canvas");
  • With innerHTML and querySelectorAll()

     
    document.body.innerHTML = "<canvas id='canvas'></canvas>";
    const canvas = document.body.querySelectorAll("canvas")[0];
  • With createElement() and outerHTML

     
    const canvas = document.createElement("canvas");
    canvas.id = "canvas";
    document.body.innerHTML = canvas.outerHTML;
  • With innerHTML and children[children.length - 1]

     
    document.body.innerHTML = "<canvas id='canvas'></canvas>";
    const canvas = document.body.children[document.body.children.length - 1];
  • With innerHTML and lastChild

     
    document.body.innerHTML = "<canvas id='canvas'></canvas>";
    const canvas = document.body.lastChild;
  • With innerHTML and lastElementChild

     
    document.body.innerHTML = "<canvas id='canvas'></canvas>";
    const canvas = document.body.lastElementChild;
  • With createElement() and innerHTML

     
    const canvas = document.createElement("canvas");
    canvas.id = "canvas";
    document.body.innerHTML = "<canvas id='canvas'></canvas>";
Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

  • Test case name Result
    With createElement() and append()
    With createElement() and appendChild()
    With innerHTML and getElementById()
    With innerHTML and getElementsByClassName()
    With innerHTML and getElementsByTagName()
    With innerHTML and querySelector()
    With innerHTML and querySelectorAll()
    With createElement() and outerHTML
    With innerHTML and children[children.length - 1]
    With innerHTML and lastChild
    With innerHTML and lastElementChild
    With createElement() and innerHTML

    Fastest: N/A

    Slowest: N/A

Latest run results:
Run details: (Test run date: 7 months ago)
Mozilla/5.0 (X11; Linux x86_64; rv:130.0) Gecko/20100101 Firefox/130.0
Firefox 130 on Linux
View result in a separate tab
Test name Executions per second
With createElement() and append() 1275.3 Ops/sec
With createElement() and appendChild() 558.7 Ops/sec
With innerHTML and getElementById() 80813.7 Ops/sec
With innerHTML and getElementsByClassName() 74097.3 Ops/sec
With innerHTML and getElementsByTagName() 77459.3 Ops/sec
With innerHTML and querySelector() 77210.5 Ops/sec
With innerHTML and querySelectorAll() 68396.0 Ops/sec
With createElement() and outerHTML 66976.9 Ops/sec
With innerHTML and children[children.length - 1] 69529.8 Ops/sec
With innerHTML and lastChild 80354.9 Ops/sec
With innerHTML and lastElementChild 77864.2 Ops/sec
With createElement() and innerHTML 68205.0 Ops/sec