如何要求浏览器缓存文件以备将来使用
How to ask browser to cache files for future use
我有一个正在使用一些大型库的应用程序。加载了将近 200 个 js 和 css 个文件。事情就是这样。首先，它加载第一个 html 中列出的 30 个。比运行ning后的一些。他们触发加载自己需要的文件。在该库启动后，我 运行 一个回调启动其他库加载自己的文件。
所以在第一次加载网络中 activity 在开始下载 50 个其他文件之前几乎停止了几次。而且网站打开时间差不多20秒。但这主要是因为库加载之间存在较大差距。
因为我有所有 200 个文件的列表，有什么方法可以让浏览器开始下载所有这些文件，并且只在需要时才 运行。所以它会在一开始就下载所有这些库。
我的第一个方法是我认为也许我可以将文件列表添加到第一个 html 文件的 HTTP header。我查找了 https://en.wikipedia.org/wiki/List_of_HTTP_header_fields，但没有找到可以发送将用于此 html 文件的文件列表的文件。 google 也没有提供任何其他解决方案，至少我找不到它。
更新：
这些文件都在CDN，我无法更改资产的headers，我只能更改我的初始html文件headers。
第一位，如何将其缓存。这来自服务器。基本上，设置 Expires、ETag、Cache-Control 或一些组合来配置它应该停留多长时间。不管它是如何加载的，如果它有其中之一 headers，它就会一直存在。请注意，不能保证它会一直存在（尤其是在移动设备上，磁盘 space 更有价值），但大多数会。
至于pre-loading他们，可能就没有必要了。如果它们都加载并被缓存，那么后续的 运行 可能不必等待，你可能会很好。这样，它们将以正确的顺序加载，并且仅在您需要时 运行。
如果您仍然希望它们立即全部下拉并且您有它们的列表，您可以将它们分别添加为 <script> 标签。您可以将此列表呈现为脚本标签 server-side，或者拉取列表并使用一些 JavaScript 动态添加脚本标签。
如果这些脚本标签具有 load-time 依赖性（即 B 必须在 A 或 B 失败之前启动，等等），您需要确保它们的顺序正确。
如果它们具有 onload 功能，那么您必须以某种方式将其包装起来，以便它仅在您需要时触发。
如果您使用 apache，则需要在 .htaccess 中使用名为 mod_expires 的插件。
简而言之，浏览器会要求服务器获取文件，然后浏览器响应文件和过期时间。如果浏览器将再次获取相同的文件，它将决定文件是否足够旧以实际发出获取新文件的请求，否则它将使用缓存的版本。
要实现此功能，您的 .htaccess 应如下所示：
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 week”
ExpiresByType image/jpeg "access 1 week"
ExpiresByType image/gif "access 1 week"
ExpiresByType image/png "access 1 week"
ExpiresByType image/svg "access 1 week"
ExpiresByType image/svg+xml "access 1 week"
ExpiresByType text/css "access 1 hour"
ExpiresByType text/x-javascript "access 1 hour"
ExpiresByType text/javascript "access 1 hour"
ExpiresByType application/javascript "access 1 hour”
ExpiresByType application/x-javascript "access 1 hour”
ExpiresByType application/pdf "access 1 week"
ExpiresByType application/x-shockwave-flash "access 1 week"
ExpiresByType image/x-icon "access 1 week"
</IfModule>
上述规则，根据内容类型为 png、jpg、jpeg、javascript 等内容类型添加一小时或一周的有效期。
我找到的解决方案是预加载，它允许提前加载文件。
我必须将标签添加到我的 html 文件中：
<link rel="preload" href="https://example.com/style.css" as="style">
<link rel="preload" href="https://example.com/example.js" as="script">
<link rel="preload" href="https://example.com/example.woff2" as="font" type="font/woff2" crossorigin>
更多信息：https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content
这里：https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/
预加载浏览器支持：https://caniuse.com/#feat=link-rel-preload
如果您想预先启动 SSL 连接，Preconnect 可能也会有所帮助。
我有一个正在使用一些大型库的应用程序。加载了将近 200 个 js 和 css 个文件。事情就是这样。首先，它加载第一个 html 中列出的 30 个。比运行ning后的一些。他们触发加载自己需要的文件。在该库启动后，我 运行 一个回调启动其他库加载自己的文件。
所以在第一次加载网络中 activity 在开始下载 50 个其他文件之前几乎停止了几次。而且网站打开时间差不多20秒。但这主要是因为库加载之间存在较大差距。
因为我有所有 200 个文件的列表，有什么方法可以让浏览器开始下载所有这些文件，并且只在需要时才 运行。所以它会在一开始就下载所有这些库。
我的第一个方法是我认为也许我可以将文件列表添加到第一个 html 文件的 HTTP header。我查找了 https://en.wikipedia.org/wiki/List_of_HTTP_header_fields，但没有找到可以发送将用于此 html 文件的文件列表的文件。 google 也没有提供任何其他解决方案，至少我找不到它。
更新：
这些文件都在CDN，我无法更改资产的headers，我只能更改我的初始html文件headers。
第一位，如何将其缓存。这来自服务器。基本上，设置 Expires、ETag、Cache-Control 或一些组合来配置它应该停留多长时间。不管它是如何加载的，如果它有其中之一 headers，它就会一直存在。请注意，不能保证它会一直存在（尤其是在移动设备上，磁盘 space 更有价值），但大多数会。
至于pre-loading他们，可能就没有必要了。如果它们都加载并被缓存，那么后续的 运行 可能不必等待，你可能会很好。这样，它们将以正确的顺序加载，并且仅在您需要时 运行。
如果您仍然希望它们立即全部下拉并且您有它们的列表，您可以将它们分别添加为 <script> 标签。您可以将此列表呈现为脚本标签 server-side，或者拉取列表并使用一些 JavaScript 动态添加脚本标签。
如果这些脚本标签具有 load-time 依赖性（即 B 必须在 A 或 B 失败之前启动，等等），您需要确保它们的顺序正确。
如果它们具有 onload 功能，那么您必须以某种方式将其包装起来，以便它仅在您需要时触发。
如果您使用 apache，则需要在 .htaccess 中使用名为 mod_expires 的插件。
简而言之，浏览器会要求服务器获取文件，然后浏览器响应文件和过期时间。如果浏览器将再次获取相同的文件，它将决定文件是否足够旧以实际发出获取新文件的请求，否则它将使用缓存的版本。
要实现此功能，您的 .htaccess 应如下所示：
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 week”
ExpiresByType image/jpeg "access 1 week"
ExpiresByType image/gif "access 1 week"
ExpiresByType image/png "access 1 week"
ExpiresByType image/svg "access 1 week"
ExpiresByType image/svg+xml "access 1 week"
ExpiresByType text/css "access 1 hour"
ExpiresByType text/x-javascript "access 1 hour"
ExpiresByType text/javascript "access 1 hour"
ExpiresByType application/javascript "access 1 hour”
ExpiresByType application/x-javascript "access 1 hour”
ExpiresByType application/pdf "access 1 week"
ExpiresByType application/x-shockwave-flash "access 1 week"
ExpiresByType image/x-icon "access 1 week"
</IfModule>
上述规则，根据内容类型为 png、jpg、jpeg、javascript 等内容类型添加一小时或一周的有效期。
我找到的解决方案是预加载，它允许提前加载文件。
我必须将标签添加到我的 html 文件中：
<link rel="preload" href="https://example.com/style.css" as="style">
<link rel="preload" href="https://example.com/example.js" as="script">
<link rel="preload" href="https://example.com/example.woff2" as="font" type="font/woff2" crossorigin>
更多信息：https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content
这里：https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/
预加载浏览器支持：https://caniuse.com/#feat=link-rel-preload
如果您想预先启动 SSL 连接，Preconnect 可能也会有所帮助。