Question

我想为下一个视图预取CSS文件。但是，浏览器预取的CSS文件不起作用。这是我的用法：

<link rel="prefetch" href="/modules/style/common.css">

chromeDev中的Network显示：

当我放弃使用prefetch并直接导入CSS文件时，css规则工作：

<link rel="stylesheet" type="text/css" href="/modules/style/common.css">

这次chromeDev中的Network显示：

我可以观察到的差异是标有红色框的type。谁能告诉我如何解决这个问题？我用谷歌搜索但没有答案。

Answer 1

预取提示仅用于预取下一页所需的资源。假设您有2页。

帖子需要post.css个文件。索引页面“知道”用户将导航到帖子页面。因此，索引页面“告诉”浏览器预取post.css。

<link rel="prefetch" href="/css/post.css">

但是，帖子页面应该告诉浏览器无论如何都要使用它。

<link rel="stylesheet" type="text/css" href="/css/post.css">

由于post.css已经被预取，浏览器将从缓存中提供它。

顺便说一句，我正在开发一个开源项目（https://github.com/sirko-io/engine），该项目分析用户在网站上的导航方式，因此可以预先确定下一页所需的资源。该项目的目的是在有意义时自动添加预取提示。