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

Go to the benchmark

Run details:

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:66.0) Gecko/20100101 Firefox/66.0

Browser: Firefox 66

Operating system: Windows

Device Platform: Desktop

Date tested: 5 years ago

Test name	Executions per second
impicit elementId	22301.4 Ops/sec
explicit getElementById	28488.1 Ops/sec
id function	23198.5 Ops/sec
id var function	24085.6 Ops/sec
id var arrow function	25727.0 Ops/sec
element var	32417.2 Ops/sec
var element in block scope	30909.1 Ops/sec
let element in block scope	29645.1 Ops/sec
const element in block scope	32166.2 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