<body></body>
const canvas = document.createElement("canvas");
canvas.id = "canvas";
document.body.append(canvas);
const canvas = document.createElement("canvas");
canvas.id = "canvas";
document.body.appendChild(canvas);
document.body.innerHTML = "<canvas id='canvas'></canvas>";
const canvas = document.getElementById("canvas");
document.body.innerHTML = "<canvas class='canvas'></canvas>";
const canvas = document.getElementsByClassName("canvas")[0];
document.body.innerHTML = "<canvas id='canvas'></canvas>";
const canvas = document.getElementsByTagName("canvas")[0];
document.body.innerHTML = "<canvas id='canvas'></canvas>";
const canvas = document.body.querySelector("canvas");
document.body.innerHTML = "<canvas id='canvas'></canvas>";
const canvas = document.body.querySelectorAll("canvas")[0];
const canvas = document.createElement("canvas");
canvas.id = "canvas";
document.body.innerHTML = canvas.outerHTML;
document.body.innerHTML = "<canvas id='canvas'></canvas>";
const canvas = document.body.children[document.body.children.length - 1];
document.body.innerHTML = "<canvas id='canvas'></canvas>";
const canvas = document.body.lastChild;
document.body.innerHTML = "<canvas id='canvas'></canvas>";
const canvas = document.body.lastElementChild;
const canvas = document.createElement("canvas");
canvas.id = "canvas";
document.body.innerHTML = "<canvas id='canvas'></canvas>";
--enable-precise-memory-info
flag.
Test case name | Result |
---|---|
With createElement() and append() | |
With createElement() and appendChild() | |
With innerHTML and getElementById() | |
With innerHTML and getElementsByClassName() | |
With innerHTML and getElementsByTagName() | |
With innerHTML and querySelector() | |
With innerHTML and querySelectorAll() | |
With createElement() and outerHTML | |
With innerHTML and children[children.length - 1] | |
With innerHTML and lastChild | |
With innerHTML and lastElementChild | |
With createElement() and innerHTML |
Test name | Executions per second |
---|---|
With createElement() and append() | 1275.3 Ops/sec |
With createElement() and appendChild() | 558.7 Ops/sec |
With innerHTML and getElementById() | 80813.7 Ops/sec |
With innerHTML and getElementsByClassName() | 74097.3 Ops/sec |
With innerHTML and getElementsByTagName() | 77459.3 Ops/sec |
With innerHTML and querySelector() | 77210.5 Ops/sec |
With innerHTML and querySelectorAll() | 68396.0 Ops/sec |
With createElement() and outerHTML | 66976.9 Ops/sec |
With innerHTML and children[children.length - 1] | 69529.8 Ops/sec |
With innerHTML and lastChild | 80354.9 Ops/sec |
With innerHTML and lastElementChild | 77864.2 Ops/sec |
With createElement() and innerHTML | 68205.0 Ops/sec |
Let's break down the provided benchmark definition and test cases.
Benchmark Definition:
The benchmark definition is a simple JavaScript code snippet that creates an HTML element (in this case, a div
element) using different methods to access its child elements.
const div = document.createElement('div');
div.innerHTML = '<p>Hello World!</p>';
console.log(div.querySelector('p'));
console.log(div.querySelector('*')); // global querySelector
console.log(div.querySelector('p')?.textContent); // null if no p tag is found
The benchmark measures the performance of different DOM query methods:
querySelector
: selects a descendant element by its tag name.querySelectorAll
: selects all descendant elements that match the specified CSS selector.lastChild
: accesses the last child node of an element.lastElementChild
: accesses the last element child of an element (specific to HTML elements).children[children.length - 1]
: accesses the last child element of an element.Test Cases: The test cases are variations of the benchmark definition, each using a different method to access the child elements.
querySelector
lastChild
lastElementChild
getElementsByClassName
(not used in this benchmark)querySelectorAll
querySelector
lastElementChild
children[children.length - 1]
innerHTML
and outerHTML
(used for.createElement method)The test cases are run multiple times to gather performance data, with different browsers (in this case, Firefox) and devices.
Performance Data: The provided performance data shows the number of executions per second (ExecutionsPerSecond) for each test case. The highest execution rate indicates the fastest DOM query method.
Here's a brief summary of the top-performing methods:
querySelectorAll
lastElementChild
(on average, 10-20% faster than other methods)innerHTML
and outerHTML
(used for createElement method)Keep in mind that this benchmark is specific to the provided code snippet and may not be representative of all use cases. The performance differences between these methods can vary depending on the context and requirements of your application.
It's also worth noting that the use of querySelectorAll
might lead to unnecessary DOM mutations if used excessively, as it returns a NodeList (a live HTMLCollection) which is a dynamic collection of nodes. In contrast, querySelector
returns a single element or null if no match is found, making it more efficient in terms of memory usage.
In summary, this benchmark provides valuable insights into the performance characteristics of different DOM query methods and can help you choose the most suitable approach for your specific use case.