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

var elements = $('#navbar li:not(.active)');
elements.each(function() {
	$(this).hide();
});

 
var elements = $('#navbar li:not(.active)');elements.each(function() {    $(this).hide();});

Hybrid

var elements = $(document.querySelectorAll('li:not(.active)'));
elements.each(function() {
	$(this).hide();
});

 
var elements = $(document.querySelectorAll('li:not(.active)'));elements.each(function() {    $(this).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	37542.2 Ops/sec
jQuery	30858.4 Ops/sec
Hybrid	6626.4 Ops/sec

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

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:

Plain JS: Using native JavaScript functions document.querySelectorAll and style.display.
jQuery: Using jQuery's querySelectorAll and each methods.
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

Plain JS:
- Pros: No external dependencies, simple syntax.
- Cons: Requires explicit DOM manipulation, may be slower due to lack of optimization.
jQuery:
- Pros: Optimized for performance, easy to use, widely adopted.
- Cons: Additional dependency, may not be suitable for all projects.
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:

Vanilla ES6+: Using modern JavaScript features like Array.prototype.filter and CSS transitions.
React or Angular: Using a framework-specific approach, such as React's useRef hook or Angular's ViewContainerRef.
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.

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.

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: 8 years ago by: Guest

Jump to the latest result