Run results for: implicit vs explicit element by id vs id function vs element var ( elementid.innerHTML vs document.getElementById('elementid').innerHTML vs idfunction('elementid').innerHTML ) - edit 3

more realistic test wint multiple divs referenced multiple times

Run details:

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.140 Safari/537.36 Edge/18.17763

Browser: Edge 18.17763

Operating system: Windows

Device Platform: Desktop

Date tested: 5 years ago

Test name	Executions per second
impicit elementId	96262.1 Ops/sec
explicit getElementById	229931.9 Ops/sec
id function	226864.3 Ops/sec
id var function	225417.5 Ops/sec
id var arrow function	221523.3 Ops/sec
element var	260343.8 Ops/sec

HTML Preparation code:

<html>
  <head>
    <title>implicit vs explicit element by id vs id function vs element var ( elementid.innerHTML vs document.getElementById('elementid').innerHTML vs idfunction('elementid').innerHTML )</title>
  </head>
  <body>
    <div id="header">
      <h1>implicit vs explicit element by id vs id function vs element var ( elementid.innerHTML vs document.getElementById('elementid').innerHTML vs idfunction('elementid').innerHTML )</h1>
    </div>
    <div id="tgt1">
    </div>
    <div id="tgt2">
    </div>
    <div id="tgt3">
    </div>
  </body>
</html>

Script Preparation code:

function funcFnId (el) { return document.getElementById(el); };
var fnId = function (el) { return document.getElementById(el); };
var arrowFnId = el => document.getElementById(el);
var divTgt1 = document.getElementById('tgt1');
var divTgt2 = document.getElementById('tgt2');
var divTgt3 = document.getElementById('tgt3');

Tests:

impicit elementId
tgt1.innerHTML = 'sometext1'; tgt2.innerHTML = 'sometext2'; tgt3.innerHTML = 'sometext3'; tgt1.innerHTML = 'sometext4'; tgt2.innerHTML = 'sometext5'; tgt3.innerHTML = 'sometext6'; tgt1.innerHTML = 'sometext7'; tgt2.innerHTML = 'sometext8'; tgt3.innerHTML = 'sometext9';
explicit getElementById
document.getElementById('tgt1').innerHTML = 'sometext1'; document.getElementById('tgt2').innerHTML = 'sometext2'; document.getElementById('tgt3').innerHTML = 'sometext3'; document.getElementById('tgt1').innerHTML = 'sometext4'; document.getElementById('tgt2').innerHTML = 'sometext5'; document.getElementById('tgt3').innerHTML = 'sometext6'; document.getElementById('tgt1').innerHTML = 'sometext7'; document.getElementById('tgt2').innerHTML = 'sometext8'; document.getElementById('tgt3').innerHTML = 'sometext9';
id function
funcFnId('tgt1').innerHTML = 'sometext1'; funcFnId('tgt2').innerHTML = 'sometext2'; funcFnId('tgt3').innerHTML = 'sometext3'; funcFnId('tgt1').innerHTML = 'sometext4'; funcFnId('tgt2').innerHTML = 'sometext5'; funcFnId('tgt3').innerHTML = 'sometext6'; funcFnId('tgt1').innerHTML = 'sometext7'; funcFnId('tgt2').innerHTML = 'sometext8'; funcFnId('tgt3').innerHTML = 'sometext9';
id var function
fnId('tgt1').innerHTML = 'sometext1'; fnId('tgt2').innerHTML = 'sometext2'; fnId('tgt3').innerHTML = 'sometext3'; fnId('tgt1').innerHTML = 'sometext4'; fnId('tgt2').innerHTML = 'sometext5'; fnId('tgt3').innerHTML = 'sometext6'; fnId('tgt1').innerHTML = 'sometext7'; fnId('tgt2').innerHTML = 'sometext8'; fnId('tgt3').innerHTML = 'sometext9';
id var arrow function
arrowFnId('tgt1').innerHTML = 'sometext1'; arrowFnId('tgt2').innerHTML = 'sometext2'; arrowFnId('tgt3').innerHTML = 'sometext3'; arrowFnId('tgt1').innerHTML = 'sometext4'; arrowFnId('tgt2').innerHTML = 'sometext5'; arrowFnId('tgt3').innerHTML = 'sometext6'; arrowFnId('tgt1').innerHTML = 'sometext7'; arrowFnId('tgt2').innerHTML = 'sometext8'; arrowFnId('tgt3').innerHTML = 'sometext9';
element var
divTgt1.innerHTML = 'sometext1'; divTgt2.innerHTML = 'sometext2'; divTgt3.innerHTML = 'sometext3'; divTgt1.innerHTML = 'sometext4'; divTgt2.innerHTML = 'sometext5'; divTgt3.innerHTML = 'sometext6'; divTgt1.innerHTML = 'sometext7'; divTgt2.innerHTML = 'sometext8'; divTgt3.innerHTML = 'sometext9';
var element in block scope
var myDivTgt1 = document.getElementById('tgt1'); var myDivTgt2 = document.getElementById('tgt2'); var myDivTgt3 = document.getElementById('tgt3'); myDivTgt1.innerHTML = 'sometext1'; myDivTgt2.innerHTML = 'sometext2'; myDivTgt3.innerHTML = 'sometext3'; myDivTgt1.innerHTML = 'sometext4'; myDivTgt2.innerHTML = 'sometext5'; myDivTgt3.innerHTML = 'sometext6'; myDivTgt1.innerHTML = 'sometext7'; myDivTgt2.innerHTML = 'sometext8'; myDivTgt3.innerHTML = 'sometext9';
let element in block scope
let myDivTgt1 = document.getElementById('tgt1'); let myDivTgt2 = document.getElementById('tgt2'); let myDivTgt3 = document.getElementById('tgt3'); myDivTgt1.innerHTML = 'sometext1'; myDivTgt2.innerHTML = 'sometext2'; myDivTgt3.innerHTML = 'sometext3'; myDivTgt1.innerHTML = 'sometext4'; myDivTgt2.innerHTML = 'sometext5'; myDivTgt3.innerHTML = 'sometext6'; myDivTgt1.innerHTML = 'sometext7'; myDivTgt2.innerHTML = 'sometext8'; myDivTgt3.innerHTML = 'sometext9';
const element in block scope
const myDivTgt1 = document.getElementById('tgt1'); const myDivTgt2 = document.getElementById('tgt2'); const myDivTgt3 = document.getElementById('tgt3'); myDivTgt1.innerHTML = 'sometext1'; myDivTgt2.innerHTML = 'sometext2'; myDivTgt3.innerHTML = 'sometext3'; myDivTgt1.innerHTML = 'sometext4'; myDivTgt2.innerHTML = 'sometext5'; myDivTgt3.innerHTML = 'sometext6'; myDivTgt1.innerHTML = 'sometext7'; myDivTgt2.innerHTML = 'sometext8'; myDivTgt3.innerHTML = 'sometext9';

Run results for: implicit vs explicit element by id vs id function vs element var ( elementid.innerHTML vs document.getElementById('elementid').innerHTML vs idfunction('elementid').innerHTML ) - edit 3

more realistic test wint multiple divs referenced multiple times

impicit elementId

explicit getElementById

id function

id var function

id var arrow function

element var

var element in block scope

let element in block scope

const element in block scope