Benchmark: Umbrella old vs Vanilla JS GetID Speed Test

Umbrella old vs Vanilla JS GetID Speed Test (version: 0)

Comparing speed of getting element by id with Umbrella vs Vanilla JS

Comparing performance of: getElementById() vs getElementsByClassName() vs getElementsByTagName() vs querySelector(#id) vs querySelector(.id) vs querySelectorAll(#id) vs querySelectorAll(.id) vs umbrella(#id) vs umbrella(.id) vs umbrella(tag#id) vs umbrella(tag.id) vs umbrella + getElementById vs umbrella + getElementsByClassName vs umbrella + querySelectorAll vs querySelectorAll in function

Created: 4 years ago by: Guest

Jump to the latest result

HTML Preparation code:

<script src="https://cdn.jsdelivr.net/npm/umbrellajs"></script>
<div id="foo" class="foo2"></div>

Tests:

getElementById()
var el = document.getElementById('foo'); var className = el.className;
getElementsByClassName()
var el = document.getElementsByClassName('foo2')[0]; var className = el.className;
getElementsByTagName()
var el = document.getElementsByTagName('div')[0]; var className = el.className;
querySelector(#id)
var el = document.querySelector('#foo'); var className = el.className;
querySelector(.id)
var el = document.querySelector('.foo2'); var className = el.className;
querySelectorAll(#id)
var el = document.querySelectorAll('#foo')[0]; var className = el.className;
querySelectorAll(.id)
var el = document.querySelectorAll('.foo2')[0]; var className = el.className;
umbrella(#id)
var el = u('#foo').nodes[0]; var className = el.className;
umbrella(.id)
var el = u('.foo2').nodes[0]; var className = el.className;
umbrella(tag#id)
var el = u('div#foo').nodes[0]; var className = el.className;
umbrella(tag.id)
var el = u('div.foo2').nodes[0]; var className = el.className;
umbrella + getElementById
var el = u(document.getElementById('foo')).nodes[0]; var className = el.className;
umbrella + getElementsByClassName
var el = u(document.getElementsByClassName('foo2')).nodes[0]; var className = el.className;
umbrella + querySelectorAll
var el = u(document.querySelectorAll('.foo2')).nodes[0]; var className = el.className;
querySelectorAll in function
var el = (function(selector){return document.querySelectorAll(selector);})('.foo2'); var className = el[0].className;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
getElementById()
getElementsByClassName()
getElementsByTagName()
querySelector(#id)
querySelector(.id)
querySelectorAll(#id)
querySelectorAll(.id)
umbrella(#id)
umbrella(.id)
umbrella(tag#id)
umbrella(tag.id)
umbrella + getElementById
umbrella + getElementsByClassName
umbrella + querySelectorAll
querySelectorAll in function

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

A nice JSON payload!

It appears to be a list of browser metrics, specifically Chrome Mobile instances on Android devices (version 12). Each instance has the following fields:

* `RawUAString`: The User-Agent string from the device
* `Browser`: The exact Chrome Mobile version running on the device
* `DevicePlatform`: The platform type (Mobile)
* `OperatingSystem`: The OS version (Android)
* `ExecutionsPerSecond`: The number of executions per second for the corresponding test case
* `TestName`: The name of the test case being executed

If I were to analyze this data, I'd look for:

1. **Browser performance**: Are there any notable differences in execution rates across various test cases?
2. **Device distribution**: Which Android devices are represented? Can we infer any specific hardware characteristics from this data?
3. **Test case optimization**: Are there any correlations between the `TestName` and the execution rate? Could some tests be optimized to run faster on certain devices?

Let me know if you'd like me to dig deeper or provide further insights!

Latest run results:

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

User agent: Mozilla/5.0 (Linux; Android 12; SAMSUNG SM-A715F) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/18.0 Chrome/99.0.4844.88 Mobile Safari/537.36

Browser/OS: Chrome Mobile 99 on Android

View result in a separate tab

Test name	Executions per second
getElementById()	1121478.2 Ops/sec
getElementsByClassName()	907700.4 Ops/sec
getElementsByTagName()	826828.8 Ops/sec
querySelector(#id)	683199.5 Ops/sec
querySelector(.id)	1299537.5 Ops/sec
querySelectorAll(#id)	363322.0 Ops/sec
querySelectorAll(.id)	569824.2 Ops/sec
umbrella(#id)	144484.6 Ops/sec
umbrella(.id)	157129.8 Ops/sec
umbrella(tag#id)	140512.9 Ops/sec
umbrella(tag.id)	151993.4 Ops/sec
umbrella + getElementById	340174.9 Ops/sec
umbrella + getElementsByClassName	193390.5 Ops/sec
umbrella + querySelectorAll	179337.4 Ops/sec
querySelectorAll in function	557181.1 Ops/sec

Related benchmarks:

Umbrella old vs Vanilla JS GetID Speed Test (version: 0)

Comparing speed of getting element by id with Umbrella vs Vanilla JS

Created: 4 years ago by: Guest

Jump to the latest result

getElementById()

getElementsByClassName()

getElementsByTagName()

querySelector(#id)

querySelector(.id)

querySelectorAll(#id)

querySelectorAll(.id)

umbrella(#id)

umbrella(.id)

umbrella(tag#id)

umbrella(tag.id)

umbrella + getElementById

umbrella + getElementsByClassName

umbrella + querySelectorAll

querySelectorAll in function

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