Benchmark: DOM manipulation vs innerhtml long - 2

HTML Preparation code:

<div id="root"></div>

Tests:

innerHTML
let root = document.querySelector('#root') root.innerHTML = `<div id="4/4b809ca8-b600-a286-62b6-83a6a5fc4310" style="left: 0px; top: 0px; white-space: nowrap;"> 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 </div>`
DOM manipulation innerText
let root = document.querySelector('#root') let itemBox = document.createElement('div') itemBox.id = "4/4b809ca8-b600-a286-62b6-83a6a5fc4310" itemBox.style = "left: 0px; top: 0px; white-space: nowrap;" for (let i=0; i<100;i++) { let itemSpan = document.createElement('span') itemSpan.className = "testing"; itemSpan.innerText = i; itemBox.appendChild(itemSpan); } root.appendChild(itemBox)
DOM manipulation innerHTML
let root = document.querySelector('#root') let itemBox = document.createElement('div') itemBox.id = "4/4b809ca8-b600-a286-62b6-83a6a5fc4310" itemBox.style = "left: 0px; top: 0px; white-space: nowrap;" for (let i=0; i<100;i++) { let itemSpan = document.createElement('span') itemSpan.className = "testing"; itemSpan.innerHTML = i; itemBox.appendChild(itemSpan); } root.appendChild(itemBox)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
innerHTML
DOM manipulation innerText
DOM manipulation innerHTML

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 3 years ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.93 Safari/537.36

Browser/OS: Chrome 90 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
innerHTML	2663.8 Ops/sec
DOM manipulation innerText	3812.5 Ops/sec
DOM manipulation innerHTML	1641.6 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 2 months ago):

LLMs can make mistakes. Check important info.

I'll do my best to provide a helpful answer.

It seems like you're presenting benchmark results for two different DOM manipulation scenarios: `innerText` and `innerHTML`. The results show the number of executions per second (FPS) for each test, as well as some metadata about the browser, device platform, operating system, and raw UA string.

To summarize:

1. **DOM manipulation innerText**: This test involves appending 100 elements with `innerText` set to a unique value using a loop. The results show that Chrome 90 on a Mac OS X 10.15.7 desktop achieved approximately 3812 FPS.
2. **innerHTML**: This test also involves creating and appending elements, but uses the `innerHTML` property instead of `innerText`. The results indicate that Chrome 90 on the same machine reached around 2663 FPS.
3. **DOM manipulation innerHTML**: A third test with a similar setup to the first one, but using `innerHTML` again, yielded an even lower FPS of approximately 1641.

These results suggest that there might be some performance differences between using `innerText` and `innerHTML` for DOM manipulation, depending on your specific use case. However, please note that these are just benchmark results from a single test environment and may not be representative of all scenarios or browsers.

If you have any further questions or would like to discuss the implications of these results, feel free to ask!

Related benchmarks:

DOM manipulation vs innerhtml long - 2 (version: 0)

Comparing performance of: innerHTML vs DOM manipulation innerText vs DOM manipulation innerHTML

Created: 3 years ago by: Guest

Jump to the latest result

innerHTML

DOM manipulation innerText

DOM manipulation innerHTML

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 2 months ago):