Note: This site is currently "Under construction". I'm migrating to a new version of my site building software. Lots of things are in a state of disrepair as a result (for example, footnote links aren't working). It's all part of the process of building in public. Most things should still be readable though.

Comparing innerHTML And appendChild Page Rendering Speed

I'm building an ASCII avatar for my Twitch stream. Think VTuber, but 2 dimensional. The avatar is made from a table that lets me set styles for each character individually. I built this page to compare rendering methods.

I've been using the "Table appendChild (Text)" approach. Based off these results I'm switching to a _span__ based approach.

You can run the tests yourself here. More details and the test code are below.

Test
(ms)

(The tests are not async. The page will be unresponsive for a bit. Up to 10 seconds on my machine)

Notes

  • Each test produces a 40x60 grid of individual characters either in a table cell or a span tag. That results in 2,400 changes per update (which is based off the size of my avatar)

  • Each render function is called 50 times

  • Two classes are applied to each position representing a foreground and background color.

  • A "." character is added to each position.

  • Each test name includes either "(Text)" or "(HTML)" at the end. This indicates the method that was used to insert the "." characters into their positions (i.e. either "innerText" or "innerHTML").

  • The "appendChild" tests assemble a single table or div in the function then make a single "appendChild" call to the parent element in the DOM to insert it at the end of the function

  • The appendChildren tests insert the table or div at the start of the function call. Elements are then added into the DOM underneath it

  • The innerHTML tests create a single string of HTML as text and insert it into the parent element via innerHTML

  • The "Cell Update" tests produce a single table or grid of spans before the tests are run. Each test run clears the contents from the grid while leaving it intact and then refills the content

  • Using requestAnimationFrame might have some impact on the results. Checking that is left as an exercise for the reader

  • The source code for the tests and the output testing ground are below

The Tests

This is the code for each test

Testing Ground

This is the target area where the tests do their rendering