increpare/PuzzleScript — pull request #144 by mechturk (2014-04-17 07:17:10+00:00)
Title: Massive consoleDumpCache performance improvement

As my test case, I used a modified version of PSTG, a non-optimised realtime_interval puzzlescript: https://gist.github.com/anonymous/10959316. Player death is disabled, and verbose_logging is enabled. My profiling test was to hit start and let the game run to completion with no player input.

CPU usage for consoleDumpCache in my test case went from 81% to 1.5%!

Method:
* Create a div per cache dump, give it a unique identifier and set its
innerHTML as the cache contents.
* Append the div as a child to consoletextarea instead of doing consoletextara.innerHTML += cachecontents.

Massive performance boost. Massive.

Apparently a lot of the work of the .innerHTML += x is destroying all the elements before recreating them again. Which is pretty brutal since we're just appending stuff. Adding new stuff as additional child nodes works much better.

I profiled this against PSTG with death disabled and I went from 4.3mins total to 39s total with verbose logging. In fact, as far as I can tell, the performance penalty of having verbose logging enabled is now negligible. Even taking out the times repeated summarisation total time was only 49s total, and this is compared with 4.3mins for the *summarised* .innerHTML += version.

As they say, a picture tells a thousand words, so here's two:

code.innerHTML = code.innerHTML + summarised_message version: consoleDumpCache 81% CPU usage, of which 73% is set innerHTML;
![innerhtml](https://cloud.githubusercontent.com/assets/2713069/2728760/56a2f7a4-c5fb-11e3-9942-138c2b08856a.png)

code.appendChild(cache) version: consoleDumpCache 1.5% CPU usage.
![appendchild](https://cloud.githubusercontent.com/assets/2713069/2728886/449a1fe4-c5fe-11e3-8417-3304e57f75eb.png)

As a bonus, you get a nice tree in the DOM element inspector to browse. I feel like this should be able to be modified so that there's a div/span for each turn, which in will be a nice step towards #78.