I'm checking memory consumption of a particular tab in Chrome via its Task Manager. It shows me rather huge amount of RAM used:
Yet, when I take a heap snapshot in Developer Tools, its shown size is several times less:
How can that be?
Not every single bit of memory that a browser allocates is used by ECMAScript objects allocated on the heap. There are also ECMAScript objects allocated on the stack, the ECMAScript runtime itself, the downloaded resources (HTML, CSS, ECMAScript, SVG, PNG, GIF, JPEG, …), the DOM objects, the display tree, display buffers, caches, the browser itself, etc.
Also, dumping the heap will only dump live objects, not garbage, and compact the heap, so even the "live" heap alone will be larger than the heap dump, since the live heap also contains dead objects that haven't been garbage-collected yet, as well as "holes" of free memory.
tl;dr: The heap dump only contains live objects packed tightly together. The real heap also contains dead objects and holes, plus, there's lots of things other than the ECMAScript heap.