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

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

Autogenerated LLM Summary (model llama3.2:3b, generated one year 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!

Related benchmarks: