I regularly keep an eye on the size of my DOM using $(*).length however it is not as accurate as I would like it to be. Is there another method I can use? I want to, in effect, count every character that exists within my HTML document (dynamically created from the client or served from the server).

Why?

When I use jquery ui it dynamically adds/removes to the document weight. When writing an application that requires few page reloads, I am afraid of legacy data stacking up. It is true that we are talking about bytes, but legacy changes to the DOM can add an extra 25% or more to the DOM. For example, using jquery tabs and creating dynamic buttons or tables - these buttons/tables might not be required and thus sit but hidden from view. It does not take long to double the size of the originally web served version of the page too... leading to a larger cache size and eventually effect performance...

I have worked with software teams where small issues turned big over 18months and eventually led to replacing what was well liked/accepted service with a newer, lesser accepted but also less fat/complicated service. Alot of the issues were unfortunately sourced by management as focus/bonus/energy was directed at newer features and almost zero effort towards bugs. I want to avoid problems such as this where possible going forward... and thus, I want to make sure that I remove legacy code from my page.

I believe I keep an eye and clean up during menu changes, but I would feel happier if I could "measure" the DOM between menu option changes (thus, "weigh in and weigh out" and compare the difference at the start/end of a menu option).

Ideas? Hopefully there is a simple answer and not having to walk thru the DOM.

Thanks...