Keeping track of Dom manipulation

When building websites using PHP/Ruby/Python, especially when using an ORM, it is always a good idea to keep an eye on how many database queries a page load produces. Tools exist in frameworks like Symfony and Django that have a visual count when in development mode to help the developer keep a handle on them.

When it comes to building a client side applications using HTML and JavaScript targeting mobiles you no longer have to worry about database queries slowing your application down. You need to start worrying about how many new DOM nodes you are dynamically creating and how many times you touch these nodes.

I’m currently optimising a Phonegap based application for a client and I really wanted to know how many DOM nodes I’m creating to display a page, I had my suspicions that it was high but no idea of the exact number.

Speaking to one of our developers Ben Foxall about this and he mentioned the DOMNodeInserted event in JavaScript and knocked together a quick example script that counts these events.

Ben shared this snipped on Twitter and London based developer Peter Chamberlin replied with a variation of the script that uses the MutationObserver Api

Which Ben then modified slightly to split out the types of modifications being done

Include this script in your project and have a look in your console, you might get a bit of a shock.

Post a Comment

Your email address is never published nor shared. Required fields are marked *

Ready to talk?

Whether you want to create a new digital product or make an existing one even better, we'd love to talk it through.

Get in touch