Benchmark: Selecting - Plain JS vs. jQuery vs. Hybrid

HTML Preparation code:


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>Starter Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="../../dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <link href="../../assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="starter-template.css" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
    <script src="../../assets/js/ie-emulation-modes-warning.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>

    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

    <div class="container">

      <div class="starter-template">
        <h1>Bootstrap starter template</h1>
        <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
      </div>

    </div><!-- /.container -->


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
    <script src="../../dist/js/bootstrap.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
  </body>
</html>

Tests:

Plain JS
document.querySelector('#navbar ul li.active').innerText.trim();
jQuery
$('#navbar ul li.active').text().trim();
Hybrid
$(document.querySelector('#navbar ul li.active')).text().trim();

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Plain JS
jQuery
Hybrid

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one month ago):

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark.

**What is being tested?**

The benchmark tests how long it takes for JavaScript to select and trim the text content of an HTML element using three different approaches:

1. Plain JavaScript (`document.querySelector('#navbar ul li.active').innerText.trim();`)
2. jQuery (`$('#navbar ul li.active').text().trim();`)
3. Hybrid (a mix of both, `$(document.querySelector('#navbar ul li.active')).text().trim();`)

**Options compared**

The three options are:

* **Plain JavaScript**: uses the native `querySelector` and `innerText` properties to select and trim the text content.
* **jQuery**: uses jQuery's `$()` function to select the element and its `text()` method to get the text content, then trims it using the `.trim()` method.
* **Hybrid**: combines elements of both approaches by first selecting the element with `document.querySelector` (like Plain JavaScript), then wrapping it in a jQuery selector (`$(document.querySelector('#navbar ul li.active'))`) and getting the text content with `text()`, before trimming it.

**Pros and Cons**

Here's a brief summary:

* **Plain JavaScript**:
	+ Pros: native performance, no dependencies on external libraries.
	+ Cons: requires explicit selection and traversal of elements, might be slower due to the DOM manipulation overhead.
* **jQuery**:
	+ Pros: faster execution, optimized for common web development tasks. Less code, easier to read.
	+ Cons: relies on an external library, might introduce additional dependencies, can be slower if not properly optimized.
* **Hybrid**:
	+ Pros: balances the benefits of both approaches, avoids some overhead of jQuery while still benefiting from its optimized execution path.
	+ Cons: more complex code, might require more expertise to write and maintain.

**Library**

In this benchmark, jQuery is used as a library to provide faster execution paths. The `$(document.querySelector('#navbar ul li.active')).text().trim();` expression wraps the native selection with a jQuery selector, allowing for optimized execution.

**Special JS feature or syntax**

There are no special JavaScript features or syntaxes used in these expressions. They rely on standard HTML and DOM manipulation techniques.

Overall, this benchmark aims to demonstrate the relative performance of different approaches to selecting and trimming text content in a web application.

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36

Browser/OS: Chrome 69 on Mac OS X 10.14.0

View result in a separate tab

Test name	Executions per second
Plain JS	562463.4 Ops/sec
jQuery	328677.5 Ops/sec
Hybrid	830384.8 Ops/sec

Related benchmarks:

Selecting - Plain JS vs. jQuery vs. Hybrid (version: 0)

Comparing performance of: Plain JS vs jQuery vs Hybrid

Created: 8 years ago by: Guest

Jump to the latest result

Plain JS

jQuery

Hybrid

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one month ago):