Benchmark: Selecting and Hiding - 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>

​x
 
​
<!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

var elements = document.querySelectorAll('li:not(.active)');
for(var i = 0; i < elements.length; i++) {
	elements[i].style.display = 'none';
}

 
var elements = document.querySelectorAll('li:not(.active)');for(var i = 0; i < elements.length; i++) {    elements[i].style.display = 'none';}

jQuery
$('#navbar li:not(.active)').hide();
$('#navbar li:not(.active)').hide();
Hybrid
$(document.querySelectorAll('li:not(.active)')).hide();
$(document.querySelectorAll('li:not(.active)')).hide();

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

Test case name	Result
Plain JS
jQuery
Hybrid

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.102 Safari/537.36

Browser/OS: Chrome 50 on Linux

View result in a separate tab

Test name	Executions per second
Plain JS	39117.4 Ops/sec
jQuery	40262.5 Ops/sec
Hybrid	9507.7 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):

I'll break down the benchmark and explain what's being tested, compared, and pros/cons of each approach.

Benchmark Overview

The benchmark measures the performance of three approaches to hide elements in an HTML list: Plain JavaScript (JS), jQuery, and Hybrid.

Plain JavaScript (JS)

Benchmark Definition: var elements = document.querySelectorAll('li:not(.active)'); for(var i = 0; i < elements.length; i++) { elements[i].style.display = 'none'; }
Description: This code uses the querySelectorAll method to select all <li> elements that don't have a class of active. It then loops through each element and sets its display style property to 'none'.

jQuery

Benchmark Definition: $('#navbar li:not(.active)').hide();
Description: This code uses jQuery's hide() method to select all <li> elements in the #navbar element that don't have a class of active and hide them.

Hybrid (JavaScript + jQuery)

Benchmark Definition: (document.querySelectorAll('li:not(.active)')).hide();
Description: This code uses a combination of JavaScript's querySelectorAll method and jQuery's hide() method to select all <li> elements that don't have a class of active and hide them.

Comparison

The three approaches are compared in terms of performance, measured by the number of executions per second. The results show that:

jQuery outperforms both Plain JavaScript and Hybrid, with an average execution rate of 40262.52 executions per second.
Plain JavaScript performs slower than Hybrid, with an average execution rate of 9507.68 executions per second.

Pros and Cons

Plain JavaScript (JS):
- Pros: No external library dependency, lightweight code.
- Cons: Requires manual DOM manipulation, can be less efficient due to the need for explicit looping.
jQuery:
- Pros: High-performance, easy-to-use API, widely adopted.
- Cons: External library dependency, may introduce additional overhead.
Hybrid (JavaScript + jQuery):
- Pros: Combines the benefits of both approaches, reduces code size and complexity.
- Cons: Requires knowledge of both JavaScript and jQuery, can be more complex to implement.

Inference

Based on the results, it appears that jQuery is the most performant option, likely due to its optimized implementation and widespread adoption. However, the Hybrid approach shows promise by combining the benefits of both Plain JavaScript and jQuery. Ultimately, the choice between these approaches depends on specific use cases, performance requirements, and developer preferences.

As for the device platform (Chrome 50), operating system (Linux), and other factors influencing the benchmark results, they are not directly relevant to the comparison of these three approaches.

LLMs can make mistakes. Check important info.

I'll break down the benchmark and explain what's being tested, compared, and pros/cons of each approach.

**Benchmark Overview**

The benchmark measures the performance of three approaches to hide elements in an HTML list: Plain JavaScript (JS), jQuery, and Hybrid.

**Plain JavaScript (JS)**

* Benchmark Definition: `var elements = document.querySelectorAll('li:not(.active)'); for(var i = 0; i < elements.length; i++) { elements[i].style.display = 'none'; }`
* Description: This code uses the `querySelectorAll` method to select all `<li>` elements that don't have a class of `active`. It then loops through each element and sets its `display` style property to `'none'`.

**jQuery**

* Benchmark Definition: `$('#navbar li:not(.active)').hide();`
* Description: This code uses jQuery's `hide()` method to select all `<li>` elements in the `#navbar` element that don't have a class of `active` and hide them.

**Hybrid (JavaScript + jQuery)**

* Benchmark Definition: `(document.querySelectorAll('li:not(.active)')).hide();`
* Description: This code uses a combination of JavaScript's `querySelectorAll` method and jQuery's `hide()` method to select all `<li>` elements that don't have a class of `active` and hide them.

**Comparison**

The three approaches are compared in terms of performance, measured by the number of executions per second. The results show that:

* jQuery outperforms both Plain JavaScript and Hybrid, with an average execution rate of 40262.52 executions per second.
* Plain JavaScript performs slower than Hybrid, with an average execution rate of 9507.68 executions per second.

**Pros and Cons**

* **Plain JavaScript (JS)**:
	+ Pros: No external library dependency, lightweight code.
	+ Cons: Requires manual DOM manipulation, can be less efficient due to the need for explicit looping.
* **jQuery**:
	+ Pros: High-performance, easy-to-use API, widely adopted.
	+ Cons: External library dependency, may introduce additional overhead.
* **Hybrid (JavaScript + jQuery)**:
	+ Pros: Combines the benefits of both approaches, reduces code size and complexity.
	+ Cons: Requires knowledge of both JavaScript and jQuery, can be more complex to implement.

**Inference**

As for the device platform (Chrome 50), operating system (Linux), and other factors influencing the benchmark results, they are not directly relevant to the comparison of these three approaches.

Related benchmarks:

Selecting and Hiding - 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