Benchmark: jQuery by id vs Document.getElementById

HTML Preparation code:

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.slim.min.js"></script>
<div class="test"></div>
<div class="test2"></div>

Script Preparation code:

function Selector_Cache() {
    var collection = {};

    function get_from_cache( selector ) {
        if ( undefined === collection[ selector ] ) {
            collection[ selector ] = $( selector );
        }
        return collection[ selector ];
    }
    return { get: get_from_cache };
}

var selectors = new Selector_Cache();

Tests:

jQuery 3.2.1 Slim
var el = selectors.get('#test');
Vanilla JS
var el = document.getElementsByClassName('test');

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
jQuery 3.2.1 Slim
Vanilla JS

Fastest: N/A

Slowest: N/A

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:55.0) Gecko/20100101 Firefox/55.0

Browser/OS: Firefox 55 on Windows 7

View result in a separate tab

Test name	Executions per second
jQuery 3.2.1 Slim	76483060.0 Ops/sec
Vanilla JS	2395570.0 Ops/sec

jQuery by id vs Document.getElementById (version: 0)

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

Comparing performance of: jQuery 3.2.1 Slim vs Vanilla JS

Created: 6 years ago by: Guest

Jump to the latest result

jQuery 3.2.1 Slim

Vanilla JS

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A