Benchmark: document.head vs document.getElementsByTagName("head")[0]

HTML Preparation code:

<html>
<head id="myHead">
<title>My title</title>
</head>
<body><p id="demo"></p>
</body>
</html>

Tests:

1
var css = document.head || document.getElementsByTagName("head")[0];
2
var css = document.head;
3
var css = document.getElementsByTagName("head")[0];

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
1
2
3

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/129.0.0.0 Safari/537.36 Edg/129.0.0.0

Browser/OS: Chrome 129 on Windows

View result in a separate tab

Test name	Executions per second
1	47448372.0 Ops/sec
2	38367028.0 Ops/sec
3	7259132.5 Ops/sec

Autogenerated LLM Summary (model gemma2:9b, generated one year ago):

LLMs can make mistakes. Check important info.

This benchmark tests the performance of different ways to access the `<head>` element in an HTML document using JavaScript.

**Options Compared:**

* **`document.head`:** This is the preferred and most modern method for accessing the `<head>` element directly.

* **`document.getElementsByTagName("head")[0]`:**  This method uses `getElementsByTagName` to retrieve all elements with the tag name "head" and then selects the first one (assuming there's only one). This can be slower than using `document.head` because it involves more DOM traversal.

**Pros and Cons:**

* **`document.head`:**
    *  **Pros:**  Simple, efficient, directly accesses the `<head>` element. Supported by all modern browsers.
    *  **Cons:** None significant.

* **`document.getElementsByTagName("head")[0]`:**
    * **Pros:**  Works in older browsers that might not support `document.head`.
    * **Cons:** More complex, potentially slower due to DOM traversal.

**Other Considerations:**

The benchmark results show that `document.head` is significantly faster than `document.getElementsByTagName("head")[0]`, confirming that it's the preferred method.

**Alternatives:**  While not directly related to this benchmark, in most cases, you don't need to manipulate the `<head>` element directly. If you're working with stylesheets or scripts, consider using:

* **`<link>` and `<script>` tags:** These tags are placed within the `<head>` section for automatic handling of CSS and JavaScript loading.

Let me know if you have any other questions!

Related benchmarks:

document.head vs document.getElementsByTagName("head")[0] (version: 0)

Comparing performance of: 1 vs 2 vs 3

Created: 8 years ago by: Guest

Jump to the latest result

1

2

3

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gemma2:9b, generated one year ago):