CSS anim listener V MutationObserver

Guy Thomas 2016 - brudinie@gmail.com

There are two functions tested in this jsbin. The first function "domInsertionListener" uses CSS3 animation to listen for dom element insertion. The second function "domMutationObserver" uses the MutationObserver API

The purpose of this jsbin is to test the performance of each approach. It does this by generating some html dynamically with the desired element right at the end of the html (a span element). It's at the end of the html because the mutation observer has to itterate through each element that has been inserted. Suprisingly, the mutation observer is still faster than the CSS animation technique, even though it has to cycle through a lot of nodes.

Code for both functions taken from https://davidwalsh.name/detect-node-insertion and https://davidwalsh.name/mutationobserver-api

Execution Times

Appended HTML