问题标签 [link-prefetch]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
html - 对属于同一文档的资源使用链接预取是否很好？
我在徘徊。假设我有一个很大的单页网站。说它在某个时候有一个非常大的图像。我希望浏览器给它某种下载优先级。这种情况下，使用Link prefetching好不好？或者，我应该只对属于其他文档/页面的资源使用链接预取吗？
reactjs - 如何在 Safari 中预取外部 HTML 页面？
我目前正在使用 nextJS (with react) 并且它工作得很好。我还使用数据预取链接来预取应用程序中的链接，它工作得很棒。
我需要预取几个使用 nextJs 创建但作为单独应用程序运行的页面。我尝试使用 rel=prefetch / rel=next 标签，这些标签在 chrome 和 firefox 上运行良好，但看起来 safari 不支持预取标签。
然后我尝试使用npmjs 包，但即使这样也不能强制 safari 使用磁盘缓存中的页面。有趣的是，我可以在 safari 的网络选项卡中看到预取（通过 fetch）调用（在页面加载时），但是当我单击目标 html 链接时，它仍然从网络而不是从磁盘缓存获取数据。
我还尝试使用服务工作人员缓存 api 方法来查看这是否会强制 safari 从缓存中呈现页面，我可以看到 fetch 调用正在发生，但是当我单击目标 URL 时，safari 没有使用缓存中的数据。
是否有一种解决方法可以在所有浏览器中实现此要求？
vue.js - Vue PWA Precache 清单与 HTML 预取链接
我想知道，当使用 CLI 构建 Vue PWA 应用程序并让所有配置为默认值时，我构建的应用程序是：
- 使用 HTML 预取链接在初始加载时预取所有块
- 使用 Workbox 的 PWA 机制预缓存所有块
这两种机制如何相互作用，我应该禁用两者之一吗？
谢谢！
index.html 中的预取机制<HEAD>：
预缓存清单在service-worker.js：
state - 强制 Gatsby 预取链接页面
在我的应用程序中，我将状态存储在一个全局对象中（类似于，但不是 Redux）。当用户浏览网站时，我希望这种状态持续存在。Gatsby 智能地尝试为它在页面上找到的链接预取页面内容，但有时当导航到特定路线时，页面从服务器获取，窗口重新加载，我失去了我的状态。
更多上下文：我已经Link为应用程序中的每个链接使用了 Gatsby 组件，如果需要以编程方式更改路由，我正在使用 Gatsbynavigate函数。我尝试将状态存储在 中location.state，但如果页面未预取，这也会被擦除。
有什么方法可以强制 Gatsby 预取路由，这样我就不会丢失我的应用程序状态？
更新：
添加我的代码片段gatsby-ssr.js以防万一可能相关：
html - 链接预取是否跨子域工作？
当从一个简单的登陆页面点击到一个重量级的单页应用程序时，我一直在尝试使用这样的东西来提高性能：
当我的登录页面位于子域上时，它似乎没有明显的性能提升。说，https://subdomain.example.com。
当我单击链接访问时https://example.com，我仍然在 Chrome 网络选项卡中看到很长的延迟，因为app.js并app.css已加载：
这是禁用预取的相同资源：
总共需要大致相同的时间。
使用预取缓存加载的资产之一的请求标头：
一般的：
回复：
要求：
我的问题是：如果 Chrome 表明使用了预取缓存，那么为什么会有大量的内容下载时间？
Chrome 似乎有不同种类的缓存：预取缓存、磁盘缓存和内存缓存。磁盘缓存和内存缓存非常快（5ms 和 0ms 加载时间）。然而，有时 300 毫秒的下载时间，预取缓存毫无用处。我能从技术上解释为什么会发生这种情况吗？这是 Chrome 的错误吗？我在 Chrome 79.0.3945.117 上。
javascript - 在 Chrome 中为图像使用“预取”链接
假设以下代码段：
Firefox 71，离线使用Web Developer Tools，然后按下按钮，图像加载完美。正如开发人员工具中的“网络”选项卡显示预取的图像一样，我期望如此。
Chrome 79，使用网络开发工具离线，然后按下按钮，图像不加载。我也很怀疑，因为“网络”选项卡显示了奇怪的预取条目。
大多数资源，尤其是caniuse.com，都注意到图像的跨浏览器支持prefetch，没有已知问题。所以我必须在某个地方进行推理。
以下是请求在 Chrome 中的样子：
并且预取请求扩展：
我究竟做错了什么？
facebook-opengraph - Google Keep 如何获取链接预览？
我的网站（刚刚从攻击中恢复）在 Google Keep 中是这样获取的。但是使用 Facebook Open Graph Debugger 进行测试，它们看起来很正常。那么有没有办法知道 GK 使用什么机制来获取链接预览？
angular - 角度不同路线的链接视图
有人可以指导我解决角度问题。我有一个需要在 Angular 8 中开发的场景，对于每个不同的 URL（路由），我们需要不同的链接预览，例如我正在分享一些示例。
javascript - 链接预取无法正常工作，导航时再次获取脚本
我有一个简单的标记。
在这里，我预取了第二个脚本script2.js。它已成功预取，但是当我单击第 2 页链接时，我有我的脚本标签script2.js，再次下载了 script2 它没有从预取缓存中获取它。
这是page2.html
html - 在正文而不是标题中包含预取链接
我想在我的 WordPress 页面 mydomain.com/plan 中包含 page_id = 25 ：
根据这个我们需要将它包含在 header.php 文件中：
问题：如果我包含在页面正文中，预取仍然有效吗？
这样我就可以将其包含在 WordPress 页面中，而不是编辑 header.php 文件。