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 (Linux; Android 9; TA-1012) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.112 Mobile Safari/537.36

Browser: Chrome Mobile 74

Operating system: Android

Device Platform: Mobile

Date tested: 5 years ago

Test name	Executions per second
impicit elementId	6387.4 Ops/sec
explicit getElementById	7096.2 Ops/sec
id function	7012.6 Ops/sec
id var function	6979.3 Ops/sec
id var arrow function	6949.2 Ops/sec
element var	7655.6 Ops/sec
var element in block scope	7482.4 Ops/sec
let element in block scope	7557.5 Ops/sec
const element in block scope	7533.7 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