<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 element = document.querySelectorAll('li:not(.active)')[1].style.display = 'none';$('#navbar li:not(.active)').eq(1).hide()$(document.querySelectorAll('li:not(.active)')[1]).hide();$(document.querySelectorAll('li:not(.active)')).eq(1).hide();--enable-precise-memory-info flag.
| Test case name | Result |
|---|---|
| Plain JS | |
| jQuery | |
| Hybrid | |
| Hybrid 2 |
| Test name | Executions per second |
|---|---|
| Plain JS | 8460.7 Ops/sec |
| jQuery | 23745.1 Ops/sec |
| Hybrid | 7594.0 Ops/sec |
| Hybrid 2 | 6523.9 Ops/sec |
Measuring the performance of JavaScript code is crucial in understanding how efficiently your application can execute tasks.
Here are the different approaches tested:
1. Plain JavaScript
The first approach uses native JavaScript methods to select and hide elements:
var element = document.querySelectorAll('li:not(.active)')[1].style.display = 'none';
This method is straightforward but might be slower due to the dynamic nature of the selection.
Pros: No additional libraries required, easy to implement. Cons: Might be slower due to dynamic selection, no built-in support for hiding elements.
2. jQuery
The second approach uses jQuery's hide() function to select and hide elements:
$('#navbar li:not(.active)').eq(1).hide();
jQuery provides a convenient way to manipulate the DOM, making this method faster than native JavaScript.
Pros: Built-in support for hiding elements, easier to implement. Cons: Additional library required (jQuery), might add overhead due to its complexity.
3. Hybrid
The third and fourth approaches combine native JavaScript with jQuery's functionality:
$(document.querySelectorAll('li:not(.active)')[1]).hide();
$(document.querySelectorAll('li:not(.active))).eq(1).hide();
These methods take advantage of both the speed and convenience of native JavaScript and jQuery.
Pros: Combines the best of both worlds, reduces overhead. Cons: Requires additional setup (wrapping native JavaScript code in jQuery syntax), might be harder to read for some developers.
Performance Results
The latest benchmark results show that:
Conclusion
In conclusion, when it comes to selecting and hiding elements, using native JavaScript code can be faster than relying on libraries like jQuery. However, jQuery provides a convenient way to manipulate the DOM, making it easier to implement and understand. The hybrid approach offers the best of both worlds by combining the speed of native JavaScript with the convenience of jQuery's functionality.
If you're looking for optimal performance in your application, I would recommend exploring the use of plain JavaScript or leveraging the performance capabilities of modern web browsers through WebAssembly or other optimized libraries.
