<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>var elements = document.querySelectorAll('li:not(.active)');for(var i = 0; i < elements.length; i++) { elements[i].style.display = 'none';}$('#navbar li:not(.active)').each(function() { $(this).hide();});$(document.querySelectorAll('li:not(.active)')).each(function() { $(this).hide();});--enable-precise-memory-info flag.
| Test case name | Result |
|---|---|
| Plain JS | |
| jQuery | |
| Hybrid |
| Test name | Executions per second |
|---|---|
| Plain JS | 19251.1 Ops/sec |
| jQuery | 28603.2 Ops/sec |
| Hybrid | 5798.7 Ops/sec |
Let's dive into the world of benchmarking!
Benchmark Overview
The benchmark measures the performance of three approaches to select and hide elements in HTML: Plain JavaScript, jQuery, and Hybrid.
Options Compared
document.querySelectorAll to select all li elements that do not have the active class, and then loops through each element using a for loop to set its display style to none.$('#navbar li:not(.active)') to select all li elements in the #navbar container that do not have the active class, and then uses .each() to iterate through each element and hide it using .hide().document.querySelectorAll like Plain JavaScript but wraps the loop in a jQuery-style .each() function.Pros and Cons
Library Usage
The benchmark uses jQuery in its Test Name field and also employs a hybrid approach. Specifically, it wraps the loop in a jQuery-style .each() function but uses document.querySelectorAll like Plain JavaScript.
Browser-Specific Results
The latest benchmark results show the performance of each approach on Chrome 52 running on Mac OS X 10.11.3:
Overall, jQuery appears to be the fastest approach in this benchmark, likely due to its optimized and lightweight implementation.
Takeaway
When choosing between these approaches, consider your project's requirements, performance needs, and team expertise. If you need fast execution without dependencies on external libraries, Plain JavaScript might be a good choice. For ease of use and community support, jQuery is a great option. The Hybrid approach offers a balance between the two, but may add complexity to some projects.
