Web浏览器如何显示Web数据？

Question

我以前从Mozilla的网站上阅读过这篇文章，并且对于客户端代码的工作原理有一个疑问。

您可能还会听到术语服务器端和客户端代码，特别是在Web开发环境中。客户端代码是在用户计算机上运行的代码 - 当查看网页时，会下载页面的客户端代码，然后运行并由浏览器显示。在这个JavaScript模块中，我们明确地讨论了客户端JavaScript。

当代码被“下载”并由浏览器运行并显示时，它在哪里下载到？它是临时下载还是存储在用户电脑上，还是永久性的？

Answer 1

文件被下载并存储在缓存中并显示。这些文件是HTML，CSS，JS，图片等 服务器端是PHP等等这些都不是下载它们的服务器上只执行

Answer 2

所有浏览器都有他们Store下载脚本中的本地文件系统中的某个目录，样式表，图像等。这些是暂时的，并且可以由用户通过浏览器的相应功能来删除，例如Google Chrome上的“clear browsing data”。

This page explains the location of the temporary files downloaded by Chrome on various systems。

Answer 3

在客户端，HTML，CSS和JavaScript代码以及资源（如图像和视频）将存储在某种内存中，通常是主内存。一旦关闭选项卡或选项卡变为非活动状态，通常会回收该内存。

对图像等资源进行解码后，可能会将其复制到GPU内存中，以便渲染速度更快。 3D代码也可以转换为图形卡指令并临时驻留在图形卡上。

如果内存不足，操作系统可能会将其交换到磁盘。请阅读virtual memory了解更多详情。

浏览器确实在磁盘上有缓存。这通常不会在第一次渲染时使用（因为在渲染页面之前您必须等待磁盘），但会加速未来的请求。作为程序员，您可以设置HTTP Cache-Control和other headers。由浏览器决定何时删除缓存文件。通常情况下，它们在旧陈旧，达到最大高速缓存大小限制或用户手动删除它们时被删除。这是浏览器和用户配置它是否以及如何执行缓存。

Proxy servers也可以缓存。一些大型组织使用它们来减少和控制互联网流量。在这种情况下，代码从服务器下载到代理，然后从代理下载到每个客户端。

HTML5 offline web applications通常存储在磁盘上的时间较长。与浏览器缓存相比，浏览器不应该删除脱机Web应用程序，但当然实际浏览器的行为可能会有所不同。当用户输入到脱机Web应用程序的URL时，它会在发送新版本请求之前从磁盘加载。相反，使用普通浏览器缓存时，资源存在于磁盘上（如果HTTP标头不正确，则为失效）或下载。

Service workers也可以由网站安装以拦截HTTP请求，就像脱机web应用程序一样。他们可以在磁盘上存储和加载代码/资产localStorage。

---

总之，代码的存储取决于很多因素。根据当前计算体系结构的性质，代码将在某个时间处于主内存中。幸运的是，您的Web应用程序很少需要关心代码的实际位置 - 浏览器会自动为您提供该代码。尽管如此，通过配置缓存标题并使用脱机Web应用程序或服务工作者，您可能会获得性能提升，并确保您的网站即使在互联网不可用时也可用。

如果你想知道什么资源在实际的网页缓存（至少在你的设置），您可以使用网络浏览器的开发者工具（在许多系统上使用可达F12 ）。例如，下面是这个非常网页浏览器加载并启用缓存：

注列大小，它说，来自哪个缓存（Chrome提供了一个内存和一个在磁盘上）如果任何一个文件即将到来。