Blog // jQuery.append() is Slow

By Destin Moulton on March 22, 2017

    Initial Benchmark

    I was playing around with WolfCage, the Wolfram Cellular Automata Generator that I built a year ago and I noticed that generating the board was ridiculously slow. I did a few benchmarks and found that the average time to generate a board is just over one second (~1086ms). The board has 11,325 cells (151 x 75). That is just over 10 cells per millisecond. D'oh!

    Identifying the Bottleneck

    I started looking through the code, trying to figure out the bottleneck. Each row is generated via a loop that calls a function to build the HTML for a cell based on its row and column position. The last call in that function is a jQuery append() -- putting the individual cell's HTML onto the board. This was being performed on every iteration.

    Solution

    I changed the function to return the HTML. I concatenate the whole board and do the $.append() after the row is built. After this change, the average run time to generate a board is 170ms. This is a ~6x increase!

    Reminds me of a quote by Steve McConnell:

    "The problem with quick and dirty...is that dirty remains long after quick has been forgotten."

    UPDATE: I decided to get rid of jQuery completely and I rebuilt WolfCage using vanilla js.