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

Question

我之前在Mozilla的网站上看过这个，我对客户端代码的工作方式有疑问。

  

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

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

Answer 1

下载文件并将其存储在缓存中并显示。这些文件是html，css，JS，图像等。 服务器端是php等，这些都没有下载，只在服务器上执行

Answer 2

所有浏览器在本地文件系统的某处都有一个目录，它存储下载的脚本，样式表，图像等。这些是临时的，并且可以由用户通过浏览器的相应功能删除，例如， 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代码以及图像和视频等资源将存在于某种内存中，通常是主RAM。一旦关闭选项卡或选项卡变为非活动状态，通常会回收此内存。

在解码图像等资源后，可以将它们复制到GPU内存中，以便更快地渲染它们。 3D代码也可以转换为图形卡指令并临时驻留在图形卡上。

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

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

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

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

网站也可以安装

Service workers来拦截HTTP请求，就像离线Web应用程序一样。他们可以使用localStorage在磁盘上存储和加载代码/资产。

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

如果您想知道在实际网站中缓存了哪些资源（至少在您的设置中），您可以使用Web浏览器的开发人员工具（在许多系统上可以通过 F12 访问）。例如，这是在Chrome上加载启用缓存的页面：

请注意列大小，它表示来自哪个缓存（Chrome在内存中有一个，在磁盘上有一个），如果有文件到来的话。