<html lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>A Basic HTML5 Template</title> <meta name="description" content="A simple HTML5 Template for new projects."> <meta name="author" content="SitePoint"> <meta property="og:title" content="A Basic HTML5 Template"> <meta property="og:type" content="website"> <meta property="og:url" content="https://www.sitepoint.com/a-basic-html5-template/"> <meta property="og:description" content="A simple HTML5 Template for new projects."> <meta property="og:image" content="image.png"> <link rel="icon" href="/favicon.ico"> <link rel="icon" href="/favicon.svg" type="image/svg+xml"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <link rel="stylesheet" href="css/styles.css?v=1.0"></head><body> <!-- your content here... --> <script src="js/scripts.js"></script></body></html>document.bodydocument.querySelector('body') document.getElementsByTagName('body')[0]--enable-precise-memory-info flag.
| Test case name | Result |
|---|---|
| document.body | |
| querySelector | |
| getElementsByTagName |
| Test name | Executions per second |
|---|---|
| document.body | 1621233.2 Ops/sec |
| querySelector | 1150332.8 Ops/sec |
| getElementsByTagName | 1051709.2 Ops/sec |
Let's dive into the world of JavaScript microbenchmarks!
What is being tested?
The provided JSON represents two benchmark test cases:
document.bodydocument.querySelector('body')document.getElementsByTagName('body')[0]These three test cases are comparing different ways to access the <body> element in an HTML document.
Options compared:
document.body: A straightforward way to access the <body> element using the DOM API.document.querySelector('body'): A more flexible approach that allows searching for elements by CSS selectors. In this case, it's used to select the first <body> element on the page.document.getElementsByTagName('body')[0]: An older method that uses the getElementsByTagName function to retrieve an array of all <body> elements and then returns the first one.Pros and cons of each approach:
document.body:<body> elements on the page (although this is unlikely in modern web development).document.querySelector('body'):document.body due to the complexity of CSS selector parsing and execution. Also, may not work if there are no <body> elements on the page.document.getElementsByTagName('body')[0]:<body> elements, as it returns an array with at least one element.document.body and potentially slower due to the need to iterate over the array of results.Libraries and special JS features:
There is no specific library mentioned in the provided code. However, note that querySelectorAll is a part of the W3C DOM Standard (2004) and has been supported by most modern browsers since then.
If you wanted to use a library for this benchmark, you could consider using a library like jQuery (which uses CSS selectors internally) or another similar library.
Special JS features:
There are no special JavaScript features mentioned in the provided code. However, if you're interested in exploring other approaches, some modern browsers support additional DOM methods and APIs that might be relevant to this benchmark.
Alternatives:
If you wanted to explore different approaches, here are a few alternatives:
document.createElement('body') instead of document.body. This would create a new <body> element on the fly, which could potentially affect performance.querySelectorAll (if supported) or getElementsByClassName with CSS class names.Keep in mind that these alternative approaches might not be as straightforward or widely supported as the original methods, so proceed with caution!
