When a webpage is loaded on the client side, various elements like HTML, CSS, JavaScript, images, and videos are stored in memory, typically in the main RAM. This memory is usually released when you close the tab or when it becomes inactive.
Images and other assets may be moved to the GPU memory for faster rendering after being decoded. Additionally, 3D code can be translated into instructions for the graphics card and temporarily reside there.
If memory space is limited, the operating system might swap data out to disk. To learn more about this process, you can read up on virtual memory.
Browsers also have a cache on disk, which speeds up future requests but is not utilized during the initial rendering of a page. As a developer, you can set HTTP headers such as Cache-Control to control caching behavior. The browser decides when to delete cache files based on factors like staleness, age, size limits, or user actions.
Proxy servers used by organizations can also cache content to reduce Internet traffic. These servers download code from the original server once and then distribute it to multiple clients.
Offline web applications based on HTML5 are stored on disk for longer periods compared to regular browser caches. When accessed, they load from disk before checking for updates. Service workers, another feature that can intercept HTTP requests, can store and retrieve code/assets using localStorage.
In conclusion, the storage location of code varies depending on several factors. While current computing architectures ensure that code will eventually reside in main memory, browsers handle most of this automatically. By managing caching, utilizing offline web apps, or implementing service workers, website performance can be optimized and availability ensured even without an active Internet connection.
To check which resources are cached in a specific website setup, developers can use the developer tools of their web browser (accessible with F12 on many systems). This allows you to view details like cache sizes and locations, as shown in this example from Chrome:
https://i.sstatic.net/oqaO9.png
Note the Size column indicating the source of the file (memory or disk cache) and whether it's cached or not.