From what I understand, one could cache 100 web pages (obviously, 2mb is average, but there are much smaller and much larger than that) in about 200mb. 1GB could cache literally 500 web pages.
How come web browsers use so much ram then?
In: 3000
The HTML and JS scripts might just be a few megabyte, but those are just instructions that have to be converted to something useful first. The HTML needs to create the Document Object Model and the Javascript gets compiled to executable machine code. The JS code will also fetch data from an endpoint and create more in-memory objects.
If you use your browsers development tools and take a look at the heap memory you’ll see that this empty thread already uses like 100 MB in total.
It is no different than a 1KB code piece which can allocate as many memory as you have. Browsers need to parse the individual files that belong to the website (html, css js etc.) to make sense of it and create structures for it’s own use. Plus most modern browsers spawn an entirely new browser application for each new tab to make sure that when a website crashes, only that tab is crashed.
A web browser is to a web page what a cook is to a recipe.
Even if the recipe holds on a 4”×6” card and you could fill a hundred of them in a small box, the cook needs a whole kitchen, with food pantry, refrigerator, stove, oven, utensils, pots, pans…, and has to use a different kitchen for each recipe.
Besides, it may sound counterintuitive, but unlike, say, disk space, ram is meant to be used as much as possible
You don’t get an advantage clearing ram to have “available memory”, more likely you lose efficiency flushing ram unnecessarily
So programs (not just browsers) cache their procedses to ram since they can retrieve it much more efficiently than reloading from disk. And system will flush unused cache when other processes need it
Finally, that ram usage is not webpages being cached but memory used by the browser to work (rendering, analyzing, moving stuff around, code, etc)
1. The code the page runs will request additional resources that can fill up your RAM. An application can be delivered in 5 kb, but end up loading 100 mb in external resources.
2. Webpages are received in HTML: that means nothing to a computer, it needs to be parsed & processed into something that makes sense. Chrome, and other browsers, will keep a lot of this cached.
3. “One-use” resources are not explicitly one use: a “one-use” piece of code or resource will be cached to RAM and run again if you hit “reload page”. This pattern exists because, should you navigate to another page on the same site, you might encounter the same code. You can speed up page delivery by just using the old results.
4. Rendering [drawing]: turning the browsers code into an image takes a significant amount of RAM. Because of the way HTML is designed and used, it’s actually extremely difficult to determine “what exactly needs to be drawn at minimum”. So, all webpages are completely drawn and you just have a window/perspective on that image.
When you open a webpage, it’s like opening up a book and putting each page on a table. Even if the book isn’t very big, you need a big table to spread out each individual page so you can see everything clearly. Web pages have many things going on at one time – pictures, videos, animations, html5 things, not to mention they need to remember things you’ve clicked on in the past, and maybe things like what you submitted in a form. ALL of these things need a degree of memory to work correctly, just like you need space on a table to spread out the pages from that book.
So even if a single web page source isn’t big, it needs extra memory to handle all the things that can be happening on that page, and to make sure everything runs smoothly.
Edit: A lot of code written today is done so using existing code most of which isn’t used. There’s still a lot of waste. I’d encourage you to watch the “30 million line problem” on youtube when you’re older.
To give a slightly different answer, I’ll also point out that in addition to the “html is a recipe” fact, modern browsers have a lot of overhead due to the fact that they essentially function as a sandbox or hypervisor for each individual tab you have open. There is a lot of security that goes into trying to prevent malicious websites from being able to see anything more than their tiny sandbox.
Imagine you’re building a treehouse. The instructions are a booklet of a hundred pages that you can bend and fit in a pocket. A treehouse and everything else you need to build it (tools, wood, nails, etc.) are much bigger.
The HTML code (what you call a webpage) is instructions to your browsers what to do. RAM and other resources is what browsers and a computer use to give you a finished page.
Same reason a tiny program can consume tons of RAM. Telling a computer *what to do* doesn’t take as much resources as actually doing those things.
Compare the size of your shopping list (if you still use those), and the size of the bags you load in your car after you’re done shopping.
Popular web pages these days are basically just full programs running inside a browser. If this web page plays a video, your browser now needs to load a bunch of media codecs. If the web page shows 3D graphics, the browser now needs to load a lot of 3D graphics libraries
Another major factor that I haven’t seen mentioned here yet is simply sloppy programing. No one gives a rip about conservation of memory anymore when they can just blame the user for not having enough memory. Old code, unused code and bad programing practices just take up lots of space.
Keep in mind The entire Super Mario Brothers game was only 31kb, or 0.031 megabytes.
Latest Answers