100,000 DOM Updates

02 August 2013

Click the table of zeroes once. Note that the text input field remains responsive even as we run 100,000 updates on the DOM for each click. The colors of the table show the render batching boundaries. Note, I would not try this on a mobile device ;)

The following is all the code we need to write a batching render with a flush in milliseconds set by rate. We've intentionally set a relatively small buffer size, as we increase the buffer size the table will update in larger and larger chunks.

(defn render-loop [rate]
 (let [in (chan 1000)]
 (go (loop [refresh (timeout rate) queue []]
 (let [[v c] (alts! [refresh in])]
 (condp = c
 refresh (do (render! queue)
 (recur (timeout rate) []))
 in (recur refresh (conj queue v))))))
 in))

Fun stuff.