Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
Feature Requests
FAQ
Register
Log In
textContent vs append v11
(version: 0)
Benchmark.js
Comparing performance of:
append vs textContent
Created:
2 years ago
by:
Guest
Go to the latest result
HTML Preparation code:
<div id='one'></div>
Tests:
append
let theDiv = document.getElementById('one'), theDivText = document.createTextNode("one"); theDiv.textContent = ''; theDiv.append(theDivText);
textContent
let theDiv = document.getElementById('one'), theDivText = document.createTextNode("one"); theDiv.textContent = ''; theDiv.textContent = 'one';
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
append
textContent
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; rv:134.0) Gecko/20100101 Firefox/134.0
Browser/OS:
Firefox 134 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=584231" width="100%" height="500px"></iframe>
append
342K/s
textContent
266K/s
View exact numbers
Test name
Executions per second
✓
append
341,730 Ops/sec
textContent
265,582 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's dive into the world of MeasureThat.net and analyze the provided benchmark. **What is tested?** The provided benchmark tests two different approaches to update the text content of an HTML element: `textContent` and `append`. The test creates an HTML element, appends a new text node to it using either method, and then clears the original text content before measuring the execution time for each approach. **Options compared** Two options are being compared: 1. **textContent**: This method updates the text content of the element by assigning a new string value to `textContent`. It is an HTML5 feature that allows updating the innerHTML of an element without having to parse or manipulate its structure. 2. **append**: This method appends a new child node to the element's children, effectively adding a new text node to the end of the element's content. **Pros and cons** **textContent** Pros: * Faster execution time: `textContent` updates the innerHTML of an element, which is a single operation in the DOM. It also doesn't require parsing or manipulating the element's structure. * More efficient: Updating the text content directly affects the rendered HTML, reducing the number of DOM operations required. Cons: * Less intuitive for some developers: Some might find it harder to understand why updating `textContent` is faster than using `append`. **append** Pros: * More explicit: Appending a new child node provides a clear understanding of what's being added to the element. * Flexibility: This approach allows developers to add multiple child nodes if needed. Cons: * Slower execution time: Updating the DOM structure by appending a new child node can lead to slower performance compared to `textContent`. * More complex: Updating the child nodes requires more parsing and manipulation of the DOM structure. **Library usage** In this benchmark, none of the libraries are explicitly mentioned. However, it's likely that MeasureThat.net uses internal JavaScript libraries or implementations for the browser engines being tested (e.g., Blink for Chrome). **Special JS features or syntax** There is no special JavaScript feature or syntax used in this benchmark other than the `textContent` and `append` methods themselves. **Other alternatives** While not explicitly mentioned, other approaches to update element text content could be: * Using a library like jQuery or a custom implementation of `innerHTML`. * Creating a new text node using `document.createTextNode()` and updating its parent's child nodes. * Using a templating engine like Handlebars or Mustache. Keep in mind that these alternatives might have different performance characteristics, and the specific use case may influence the choice of approach.
Related benchmarks
append vs appendChild + createTextNode
appendChild vs append
Set textContent vs append
Comments
Confirm delete:
Do you really want to delete benchmark?