Benchmark: attribute selector

HTML Preparation code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="items-wrapper">
    <div class="item">Hans</div>
    <div class="item">Done</div>
    <div class="item">Xaver</div>
    <div class="item">Fredl</div>
    <div class="item" rel="js--items-wrapper__item">Sepp</div>
</div>

<div class="wrapper-x">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus necessitatibus nihil nulla praesentium. A
    accusamus consequuntur, facilis fugit minus, nulla odio qui quod quos repudiandae, sequi similique voluptas
    voluptate voluptates.
</div>

<div class="wrapper-y">
    <div class="test">Hans</div>
</div>
</body>
</html>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script>

Tests:

Vanilla
var vanilla = document.querySelector("[rel='js--items-wrapper__item']");
JQuery
var jquery = $("[rel='js--items-wrapper__item']");

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Vanilla
JQuery

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: 2 years ago)

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

Browser/OS: Firefox 93 on Windows

View result in a separate tab

Test name	Executions per second
Vanilla	1243209.0 Ops/sec
JQuery	385253.0 Ops/sec

attribute selector (version: 0)

Comparing performance of: Vanilla vs JQuery

Created: 5 years ago by: Guest

Jump to the latest result

Vanilla

JQuery

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A