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>

Tests:

Plain JS
var element = document.querySelectorAll('li:not(.active)')[1].style.display = 'none';
jQuery
$('#navbar li:not(.active)').eq(1).hide()
Hybrid
$(document.querySelectorAll('li:not(.active)')[1]).hide();
Hybrid 2
$(document.querySelectorAll('li:not(.active)')).eq(1).hide();

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Plain JS
jQuery
Hybrid
Hybrid 2

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.

Measuring the performance of JavaScript code is crucial in understanding how efficiently your application can execute tasks.

Here are the different approaches tested:

**1. Plain JavaScript**

The first approach uses native JavaScript methods to select and hide elements:
```javascript
var element = document.querySelectorAll('li:not(.active)')[1].style.display = 'none';
```
This method is straightforward but might be slower due to the dynamic nature of the selection.

Pros: No additional libraries required, easy to implement.
Cons: Might be slower due to dynamic selection, no built-in support for hiding elements.

**2. jQuery**

The second approach uses jQuery's `hide()` function to select and hide elements:
```javascript
$('#navbar li:not(.active)').eq(1).hide();
```
jQuery provides a convenient way to manipulate the DOM, making this method faster than native JavaScript.

Pros: Built-in support for hiding elements, easier to implement.
Cons: Additional library required (jQuery), might add overhead due to its complexity.

**3. Hybrid**

The third and fourth approaches combine native JavaScript with jQuery's functionality:
```javascript
$(document.querySelectorAll('li:not(.active)')[1]).hide();
```

```javascript
$(document.querySelectorAll('li:not(.active))).eq(1).hide();
```
These methods take advantage of both the speed and convenience of native JavaScript and jQuery.

Pros: Combines the best of both worlds, reduces overhead.
Cons: Requires additional setup (wrapping native JavaScript code in jQuery syntax), might be harder to read for some developers.

**Performance Results**

The latest benchmark results show that:

* jQuery performs the fastest with an average of 8460.6806640625 executions per second.
* Plain JavaScript comes in second, averaging 23745.12109375 executions per second.
* Hybrid approaches outperform both but are slower than jQuery, with averages of 7594.046875 and 6523.85302734375 for the two variants.

**Conclusion**

In conclusion, when it comes to selecting and hiding elements, using native JavaScript code can be faster than relying on libraries like jQuery. However, jQuery provides a convenient way to manipulate the DOM, making it easier to implement and understand. The hybrid approach offers the best of both worlds by combining the speed of native JavaScript with the convenience of jQuery's functionality.

If you're looking for optimal performance in your application, I would recommend exploring the use of plain JavaScript or leveraging the performance capabilities of modern web browsers through WebAssembly or other optimized libraries.

Related benchmarks:

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

Comparing performance of: Plain JS vs jQuery vs Hybrid vs Hybrid 2

Created: 9 years ago by: Guest

Jump to the latest result

Plain JS

jQuery

Hybrid

Hybrid 2

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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