Benchmark: 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

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 (version: 3)

more realistic test wint multiple divs referenced multiple times

Comparing performance of: impicit elementId vs explicit getElementById vs id function vs id var function vs id var arrow function vs element var vs var element in block scope vs let element in block scope vs const element in block scope

Created: 5 years ago by: Registered User

Jump to the latest result

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';

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
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

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 29 days ago):

LLMs can make mistakes. Check important info.

Based on the provided benchmark results, it appears that the execution speed of accessing an HTML element by its `id` attribute is faster in JavaScript compared to accessing it using the `var`, `let`, or `const` keywords.

Here's a summary of the results:

* `const element in block scope`: 32166 executions per second
* `var element in block scope`: 30909 executions per second
* `let element in block scope`: 29645 executions per second

This suggests that using `const` to declare a variable for an HTML element is slightly faster than using `var`, while `let` has a slower execution speed.

The results also show that accessing the element by its `id` attribute directly, without using any of the variables declared with `var`, `let`, or `const`, has the fastest execution speed (28488 executions per second).

Here's an example code snippet to demonstrate this:
```javascript
// Direct access to element by id
document.getElementById('myElement');

// Using const to declare a variable for an HTML element
const myConstElement = document.getElementById('myElement');
console.log(myConstElement);

// Using var to declare a variable for an HTML element
var myVarElement = document.getElementById('myElement');
console.log(myVarElement);

// Using let to declare a variable for an HTML element
let myLetElement = document.getElementById('myElement');
console.log(myLetElement);
```
Note that the actual performance difference may vary depending on the specific use case and the complexity of the code being executed.

Latest run results:

Run details: (Test run date: 5 years ago)

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

Browser/OS: Firefox 66 on Windows

View result in a separate tab

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

Related benchmarks:

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 (version: 3)

more realistic test wint multiple divs referenced multiple times

Comparing performance of: impicit elementId vs explicit getElementById vs id function vs id var function vs id var arrow function vs element var vs var element in block scope vs let element in block scope vs const element in block scope

Created: 5 years ago by: Registered User

Jump to the latest result

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

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 29 days ago):