我有一个使用一些大型库的应用程序。有近 200 个 js 和 css 文件正在加载。事情就是这样发生的。首先，它加载第一个 html 上列出的 30 个。比运行一些之后。它们触发加载自己所需的文件。该库启动后，我运行一个回调，该回调启动加载自己文件的其他库。
因此，在首次加载时，网络活动在开始下载 50 个其他文件之前几乎会停止几次。网站打开时间几乎是20秒。但这主要是因为库负载之间存在很大的差距。
由于我有所有 200 个文件的列表，因此我有什么方法可以要求浏览器开始下载所有这些文件，并且只在需要时运行。这样它就可以在一开始下载所有这些库。
我的第一个方法是我想也许我可以将文件列表添加到第一个 html 文件的 HTTP 标头中。我寻找 https://en.wikipedia.org/wiki/List_of_HTTP_header_fields，但看不到可以发送将在此html文件中使用的文件列表。谷歌也没有为我提供任何其他解决方案，至少我找不到它。
更新：
这些文件都在CDN，我无法更改资产的标头，我只能更改初始html文件标头。
如果您使用的是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 等)添加一小时或一周的过期时间，具体取决于内容类型。
首先，如何将其缓存。这来自服务器。基本上，设置一个Expires，ETag，Cache-Control或某种组合来配置它应该停留多长时间。无论它如何加载，如果它有这些标头之一，它都会留下来。请注意，它不能保证会持续存在(尤其是在移动设备上，磁盘空间更宝贵)，但大多数人都会。
至于预加载它们，可能没有必要。如果它们都加载并被缓存，那么后续运行可能不必等待，您可能会很好。这样，它们将以正确的顺序加载，并且仅在您需要时才运行。
如果您仍然希望它们立即全部下拉并且您有一个列表，您可以将它们分别添加为<script>标签。您可以将此列表呈现为服务器端的脚本标记，也可以拉取列表并使用一些 JavaScript 动态添加脚本标记。
如果这些脚本标签具有加载时依赖关系(即，必须在 A 或 B 失败之前启动 B 等)，则需要确保它们以正确的顺序排列。
如果它们具有onload功能，那么您必须以某种方式将其包装起来，以便它仅在您想要时才触发。
我找到的解决方案是预加载，它允许提前加载文件。
我不得不在我的 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 连接，预连接也可能有所帮助。