<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>document.querySelector('#navbar ul li.active').innerText.trim();$('#navbar ul li.active').text().trim();$(document.querySelector('#navbar ul li.active')).text().trim();--enable-precise-memory-info flag.
| Test case name | Result |
|---|---|
| Plain JS | |
| jQuery | |
| Hybrid |
| Test name | Executions per second |
|---|---|
| Plain JS | 562463.4 Ops/sec |
| jQuery | 328677.5 Ops/sec |
| Hybrid | 830384.8 Ops/sec |
Let's break down the provided benchmark.
What is being tested?
The benchmark tests how long it takes for JavaScript to select and trim the text content of an HTML element using three different approaches:
document.querySelector('#navbar ul li.active').innerText.trim();)$('#navbar ul li.active').text().trim();)$(document.querySelector('#navbar ul li.active')).text().trim();)Options compared
The three options are:
querySelector and innerText properties to select and trim the text content.$() function to select the element and its text() method to get the text content, then trims it using the .trim() method.document.querySelector (like Plain JavaScript), then wrapping it in a jQuery selector ($(document.querySelector('#navbar ul li.active'))) and getting the text content with text(), before trimming it.Pros and Cons
Here's a brief summary:
Library
In this benchmark, jQuery is used as a library to provide faster execution paths. The $(document.querySelector('#navbar ul li.active')).text().trim(); expression wraps the native selection with a jQuery selector, allowing for optimized execution.
Special JS feature or syntax
There are no special JavaScript features or syntaxes used in these expressions. They rely on standard HTML and DOM manipulation techniques.
Overall, this benchmark aims to demonstrate the relative performance of different approaches to selecting and trimming text content in a web application.
