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 (Android 9; Mobile; rv:66.0) Gecko/66.0 Firefox/66.0

Browser: Firefox Mobile 66

Operating system: Android

Device Platform: Mobile

Date tested: 5 years ago

Test name	Executions per second
impicit elementId	140109.1 Ops/sec
explicit getElementById	260190.1 Ops/sec
id function	258450.2 Ops/sec
id var function	258950.0 Ops/sec
id var arrow function	252935.2 Ops/sec
element var	407709.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