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
This is the code for each test
This is the target area where the tests do their rendering