问题标签 [preconnect]

我一直在阅读使用和帮助获取关键资源的性能优势，但我不太清楚的一件事是，当资源与请求它们的页面位于同一域时，这些技术是否仍然提供好处。

例如，我正在优化 abc.com 上的页面，我应该在我的标记中添加<link rel="preconnect" href="abc.com">或吗？<link rel="preload" as="script" href="abc.com/main.js">还是因为当前页面与链接 href 值位于同一域中，所以它不会产生任何影响？

目标：

将 nginx 配置为仅在没有 .html 扩展名的 html 文档上添加标题

先决条件：

无法向文档添加 .html（它们是由另一个工具通过 proxy_pass 动态生成的）并且它们不能与 .html 一起提供

我试过的：

• add_header 指令单独工作，但将标头放在所有资源（css、js 等）上。

• 在服务器上下文中：

• 在 http 上下文中：

但没有一个有效。我的语法或上下文一定是错的......

有人知道如何使它工作吗？

dns-prefetch为了提高页面加载时间，我想使用preconnect外部 javascripts。

如果资源（在我的情况下是外部 javascript）已经在浏览器缓存中会发生什么？是否不必要dns-prefetch地preconnect添加页面加载时间？换句话说：是否dns-prefetch并且preconnect仅在第一页加载时有用？

我的网页向 8 个与 googletagmanager 等第三方服务相关的来源发出预连接提示。

根据我在 StackOverflow 上阅读的一个旧线程，一般建议是将预连接限制为大约 4 到 6 个来源。参考：我们应该使用 Chrome 进行“dns-prefetch 预连接”的域数量是否有限制？

在这种情况下，预连接的顺序是否重要。我应该优先考虑将首先使用的脚本而不是其他脚本吗？

参考：https ://web.dev/preconnect-and-dns-prefetch/

有两种实现预连接提示的方法。

1. 在 HTML 头部

2. 在 HTTP 标头中（例如使用 htaccess 标头添加）

从 web.dev 中，我可以理解第二种类型的实现稍微好一些，因为浏览器不需要等待 html 被解析。支持类型 1 实现的所有浏览器是否也支持类型 2？或者是否有一些浏览器支持一种类型而不是另一种？

PS：根据我有限的分析，我可以发现很多网站都在使用类型 1 对抗类型 2。

想象一下，您有一个提供文档的 Web 服务器和一个提供所有文档的 js 组件块的 cdn：

有 1 个重要的块 main.js 具有预加载链接 rel。

问题：是否可以在 1 个链接标签上进行预连接和预加载 rel？

今天是：

我想做：

瀑布

资源提示（dns-prefetch、preconnect、prefetch、prerender）（顾名思义）是对浏览器的提示。它们仅在浏览器空闲且没有更高优先级的资源时执行。所以它从不保证浏览器使用资源提示。

但是，我如何检查浏览器（在我的情况下为 Chrome）是否确实遵循资源提示？

我知道我可以在开发工具中查看瀑布并检查是否更早加载了内容，但我正在寻找一种更有效的方法，最终可以以编程方式完成。

我看过的另一种方法是 Chrome 的 NetLog。但是，我找不到是否遵循资源提示。