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 elements = document.querySelectorAll('li:not(.active)'); for(var i = 0; i < elements.length; i++) { elements[i].style.display = 'none'; }
jQuery
var elements = $('#navbar li:not(.active)'); elements.each(function() { $(this).hide(); });
Hybrid
var elements = $(document.querySelectorAll('li:not(.active)')); elements.each(function() { $(this).hide(); });

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

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 different approaches to selecting and hiding elements in a webpage can provide valuable insights into the efficiency of various JavaScript libraries.

**Benchmark Definition**

The benchmark is designed to test three approaches:

1. **Plain JS**: Using native JavaScript functions `document.querySelectorAll` and `style.display`.
2. **jQuery**: Using jQuery's `querySelectorAll` and `each` methods.
3. **Hybrid**: Combining both native JavaScript and jQuery.

**Options Compared**

The options being compared are the performance characteristics of each approach, specifically:

* **Number of executions per second**: The rate at which the code can execute without consuming too much CPU time.

**Pros and Cons of Each Approach**

1. **Plain JS**:
	* Pros: No external dependencies, simple syntax.
	* Cons: Requires explicit DOM manipulation, may be slower due to lack of optimization.
2. **jQuery**:
	* Pros: Optimized for performance, easy to use, widely adopted.
	* Cons: Additional dependency, may not be suitable for all projects.
3. **Hybrid**:
	* Pros: Combines the benefits of both worlds (native JavaScript and jQuery).
	* Cons: May introduce additional complexity, depends on the implementation.

**Library Used in Test Case**

In the provided test case, `jQuery` is used as a library to provide additional functionality for DOM manipulation. Its purpose is to simplify the process of selecting elements and hiding them, while also providing some level of optimization.

**Special JavaScript Features or Syntax**

None of the benchmark definitions utilize any special JavaScript features or syntax that would affect the performance comparison.

**Other Alternatives**

Other alternatives to these approaches include:

1. **Vanilla ES6+**: Using modern JavaScript features like `Array.prototype.filter` and CSS transitions.
2. **React or Angular**: Using a framework-specific approach, such as React's `useRef` hook or Angular's `ViewContainerRef`.
3. **Custom implementation**: Creating an entirely custom solution for DOM manipulation and hiding elements.

These alternatives may offer better performance, easier maintenance, or other benefits depending on the specific use case. However, they also introduce additional complexity and may not be suitable for all projects.

In conclusion, measuring the performance of different approaches to selecting and hiding elements can provide valuable insights into the efficiency of various JavaScript libraries and techniques. The benchmark results demonstrate that **Plain JS** performs better than **jQuery**, while the **Hybrid** approach falls in between. However, the choice of approach ultimately depends on the specific requirements and constraints of the project.

Related benchmarks:

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

Comparing performance of: Plain JS vs jQuery vs Hybrid

Created: 9 years ago by: Guest

Jump to the latest result

Plain JS

jQuery

Hybrid

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):