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 element = document.querySelectorAll('li:not(.active)')[1].style.display = 'none';
var element = document.querySelectorAll('li:not(.active)')[1].style.display = 'none';
jQuery
$('#navbar li:not(.active)')[1].hide();
$('#navbar li:not(.active)')[1].hide();
Hybrid
$(document.querySelectorAll('li:not(.active)')[1]).hide();
$(document.querySelectorAll('li:not(.active)')[1]).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	53082.6 Ops/sec
jQuery	0.0 Ops/sec
Hybrid	29987.1 Ops/sec

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

Let's dive into the world of JavaScript microbenchmarks.

What is being tested?

MeasureThat.net provides an online platform for creating and running JavaScript microbenchmarks. The provided JSON data represents three individual test cases:

Plain JS: This test case measures the performance of plain JavaScript (i.e., vanilla JavaScript without any external libraries) when hiding a list item with the display property.
jQuery: This test case measures the performance of jQuery, a popular JavaScript library, when hiding a list item using the $ function and the hide() method.
Hybrid: This test case measures the performance of a hybrid approach that combines elements of both plain JavaScript and jQuery. In this case, it uses the .querySelectorAll() method to select the list items and then applies the display property using plain JavaScript.

Options compared

The three test cases compare different approaches to hiding a list item:

Plain JS: Uses only vanilla JavaScript.
jQuery: Uses jQuery's $ function and hide() method.
Hybrid: Combines elements of both plain JavaScript and jQuery, using .querySelectorAll() to select the list items and applying the display property using plain JavaScript.

Pros and Cons

Here are some pros and cons of each approach:

Plain JS:
- Pros: Simple, lightweight, and no dependencies.
- Cons: May not be as efficient or convenient as other approaches.
jQuery:
- Pros: Convenient, widely adopted, and well-maintained.
- Cons: Adds extra dependencies and may introduce overhead due to its asynchronous nature.
Hybrid:
- Pros: Combines the benefits of both plain JS and jQuery.
- Cons: May require additional setup or configuration.

Other considerations

When choosing an approach, consider factors like:

Performance: If speed is critical, plain JS might be a better choice. However, if simplicity and convenience are more important, jQuery could be a good option.
Complexity: If you're working on a small project with limited resources, plain JS or Hybrid might be more suitable. For larger projects or those requiring more advanced functionality, jQuery's extensive library of plugins and tools might be beneficial.
Maintainability: If you plan to maintain the codebase in the future, a well-documented approach like Hybrid could make it easier to understand and modify.

Benchmark results

The latest benchmark result shows that:

Plain JS outperforms both jQuery and Hybrid, executing at approximately 53082 executions per second on Chrome 50.
Hybrid performs significantly better than jQuery, but with a lower execution rate (29987 executions per second) compared to plain JS.
jQuery falls behind both other approaches, with an execution rate of 0.0.

Keep in mind that these results are specific to this particular benchmark and may not generalize to all scenarios or browsers.

In summary, the choice between plain JavaScript, jQuery, and a hybrid approach depends on your project's specific requirements, performance considerations, and personal preferences. MeasureThat.net provides valuable insights into the relative efficiency of each approach, helping you make informed decisions for your next project.

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks.

**What is being tested?**

MeasureThat.net provides an online platform for creating and running JavaScript microbenchmarks. The provided JSON data represents three individual test cases:

1. **Plain JS**: This test case measures the performance of plain JavaScript (i.e., vanilla JavaScript without any external libraries) when hiding a list item with the `display` property.
2. **jQuery**: This test case measures the performance of jQuery, a popular JavaScript library, when hiding a list item using the `$` function and the `hide()` method.
3. **Hybrid**: This test case measures the performance of a hybrid approach that combines elements of both plain JavaScript and jQuery. In this case, it uses the `.querySelectorAll()` method to select the list items and then applies the `display` property using plain JavaScript.

**Options compared**

The three test cases compare different approaches to hiding a list item:

* Plain JS: Uses only vanilla JavaScript.
* jQuery: Uses jQuery's `$` function and `hide()` method.
* Hybrid: Combines elements of both plain JavaScript and jQuery, using `.querySelectorAll()` to select the list items and applying the `display` property using plain JavaScript.

**Pros and Cons**

Here are some pros and cons of each approach:

* Plain JS:
	+ Pros: Simple, lightweight, and no dependencies.
	+ Cons: May not be as efficient or convenient as other approaches.
* jQuery:
	+ Pros: Convenient, widely adopted, and well-maintained.
	+ Cons: Adds extra dependencies and may introduce overhead due to its asynchronous nature.
* Hybrid:
	+ Pros: Combines the benefits of both plain JS and jQuery.
	+ Cons: May require additional setup or configuration.

**Other considerations**

When choosing an approach, consider factors like:

* Performance: If speed is critical, plain JS might be a better choice. However, if simplicity and convenience are more important, jQuery could be a good option.
* Complexity: If you're working on a small project with limited resources, plain JS or Hybrid might be more suitable. For larger projects or those requiring more advanced functionality, jQuery's extensive library of plugins and tools might be beneficial.
* Maintainability: If you plan to maintain the codebase in the future, a well-documented approach like Hybrid could make it easier to understand and modify.

**Benchmark results**

The latest benchmark result shows that:

* Plain JS outperforms both jQuery and Hybrid, executing at approximately 53082 executions per second on Chrome 50.
* Hybrid performs significantly better than jQuery, but with a lower execution rate (29987 executions per second) compared to plain JS.
* jQuery falls behind both other approaches, with an execution rate of 0.0.

Keep in mind that these results are specific to this particular benchmark and may not generalize to all scenarios or browsers.

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

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 6 months ago):