<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)').hide();var elements = document.querySelectorAll('li:not(.active)');$(elements).hide();--enable-precise-memory-info flag.
| Test case name | Result |
|---|---|
| Plain JS | |
| jQuery | |
| Hybrid |
| Test name | Executions per second |
|---|---|
| Plain JS | 37106.2 Ops/sec |
| jQuery | 39959.6 Ops/sec |
| Hybrid | 8872.7 Ops/sec |
I'll break down the test cases and explain what's being tested, along with their pros and cons.
Test Cases:
The test cases measure the performance of three different approaches to hide HTML elements:
var elements = document.querySelectorAll('li:not(.active)'); for(var i = 0; i < elements.length; i++) { elements[i].style.display = 'none'; }$('#navbar li:not(.active)').hide();var elements = document.querySelectorAll('li:not(.active)'); $(elements).hide();What's being tested:
Options compared:
The test compares the performance of three different approaches:
document.querySelectorAll and manual loop)$())document.querySelectorAll for element selection and then calling hide() on the resulting jQuery object)Pros and Cons:
document.querySelectorAll for element selection and then leveraging jQuery's optimized hide method.Library usage:
In this test case, jQuery is used in all three approaches. The library provides an efficient way to select elements and manipulate their styles, making it a convenient choice for many developers.
Special JS feature or syntax:
None of the test cases explicitly use any special JavaScript features or syntax that's not widely supported. However, it's worth noting that document.querySelectorAll is a relatively modern API (introduced in HTML5) and may not be supported by older browsers.
Overall, this test case aims to provide a simple yet informative benchmarking exercise for developers considering different approaches to hiding elements in their applications.
