Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Test text content
(version: 0)
Comparing performance of:
innerText vs textContent
Created:
5 years ago
by:
Guest
Jump to the latest result
Script Preparation code:
var a = document.createElement('div');
Tests:
innerText
a.innerText = "toto";
textContent
a.textContent = "toto"
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
innerText
textContent
Fastest:
N/A
Slowest:
N/A
Latest run results:
No previous run results
This benchmark does not have any results yet. Be the first one
to run it!
Autogenerated LLM Summary
(model
llama3.1:latest
, generated one year ago):
Let's break down the provided JSON and benchmark results to understand what is being tested. **Benchmark Definition** The benchmark definition provides information about the test environment: * **Name**: The name of the benchmark, which is "Test text content". * **Description**: A brief description of the test, which is not provided. * **Script Preparation Code**: A JavaScript code snippet that prepares the test environment by creating a new HTML div element using `document.createElement('div')`. * **Html Preparation Code**: An empty string, indicating no additional HTML preparation is needed. **Individual Test Cases** The benchmark consists of two individual test cases: 1. **innerText** * **Benchmark Definition**: The JavaScript code snippet that sets the text content of the created div element using `a.innerText = "toto";`. * **Test Name**: The name of this test case, which is "innerText". 2. **textContent** * **Benchmark Definition**: The JavaScript code snippet that sets the text content of the created div element using `a.textContent = "toto"`. * **Test Name**: The name of this test case, which is "textContent". **Latest Benchmark Result** The benchmark results show two different execution rates for each test case: 1. **textContent** * **ExecutionsPerSecond**: 4305461.0 2. **innerText** * **ExecutionsPerSecond**: 1457748.0 Now, let's analyze what is being tested and the pros and cons of each approach. **What is being tested?** The benchmark tests the performance difference between setting text content using `textContent` vs `innerText`. In both cases, a div element is created, and its text content is set to "toto". **Options compared:** 1. **textContent**: This property is used to set the text content of an HTML element. 2. **innerText**: This property is also used to set the text content of an HTML element. **Pros and cons:** * Both `textContent` and `innerText` achieve the same goal, but with different approaches: + `textContent` sets the text content while keeping any existing child nodes (e.g., tags). + `innerText`, on the other hand, removes any existing child nodes before setting the new text content. * In this specific test case, using `textContent` is faster than using `innerText`. * The performance difference might be attributed to how each property handles existing child nodes. **Other considerations:** * The test environment is a Chrome 89 browser on Windows 10. * The benchmark results are based on the number of executions per second (ExecutionsPerSecond). **Library and special JS feature or syntax:** No external libraries or special JavaScript features or syntax are used in this benchmark. **Alternatives:** If you want to compare performance with other properties, consider adding test cases for: * `innerHTML`: Sets the HTML content of an element. * `outerHTML`: Returns the outer HTML of an element. * `nodeValue`: Sets the node value (text content) of a single node. * Other properties that set or get text content in different ways. These alternative tests would help you understand how each property performs and which one is most suitable for your specific use case.
Related benchmarks:
textContent vs innerText
createElement vs createDocumentFragment
createElement vs createDocumentFragment 1
Test 123123123
Comments
Confirm delete:
Do you really want to delete benchmark?