htmloptimizationbrowserdom-nodememory-footprint

Big memory footprint of domNode document representation

I have some relatively small HTML document - just couple of dozens table rows, with a few columns, one of them has text type info, another contains minimalistic form with submit button, i.e. form/button in each row of that column. Nothing special. CURL reports that my total HTML document weights approx 26 KB. However when I check document memory footprint in a Firefox browser I get this picture :

enter image description here

Meaning that domNode representation of whole document is 1 MB ! This means that overhead of domNode representation of full document compared to plain HTML output size is about 40x ! Question is - What's so special about domNode type ? Why browser needs such amount of additional overhead data ?

Solution

  • I'm afraid your comparison is incorrect.
    It's like if one asked "Why the blueprints of this car weights 1.5 kg but the car itself weights 1500 kg? Overhead is 1000x!"

    HTML code is just a high-level blueprint for HTML interpreters (e. g. web browsers).
    Browser parses the code and creates Document Object Model (DOM) where each node is an object and have some properties. That requires memory.

    Please look at the snippet below, or even better, open Firefox console and type document.
    You'll see a lot of stuff (even behind empty <html></html>).

    console.log(document)
    .as-console-wrapper {max-height:100% !important; top:0}