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