如何将 rel="preconnect" 添加到链接以外的标签？答案

【问题标题】：How to add rel="preconnect" to tags other than link?如何将 rel="preconnect" 添加到链接以外的标签？
【发布时间】：2019-07-20 20:31:23
【问题描述】：

我正在使用 Chrome 开发工具来审核我网站的主页。它为我主页中的 facebook、twitter 和 linkedin 共享按钮提供了“预连接到所需来源”的机会之一。

我在https://developers.google.com/web/fundamentals/performance/resource-prioritization阅读了关于preconnect和dns-prefetch的google文章，但发现语法仅适用于链接标签，如下：

但在我的主页中，连接到社交网站的分享按钮是这样的：

<div class="fb-like" data-href="https://www.facebook.com/xxxx" data- 
send="false" data-layout="button_count" data-width="90" data-show- 
faces="true"></div>

或者这个：

<a href="https://twitter.com/share" class="twitter-share-button" data- 
 count="none">Tweet</a>

或者这个：

<script src="https://platform.linkedin.com/in.js" type="text/javascript"> 
</script>
                        <script type="IN/Share"></script>

在这种情况下，如何在 html 代码中添加 preconnect 或 dns-prefetch 提示？好像这些提示只对link标签有效？

谢谢

【问题讨论】：

标签： html google-chrome-devtools hint

【解决方案1】：

我假设您正在使用审核面板审核您的页面，并且您正在查看 Preload key requests 审核。

如果您点击预加载密钥请求审核，您应该会看到一个展开的表格，其中包含建议您预加载的确切网址。

获取这些 URL 并将 <link> 标记添加到预加载这些请求的 HTML 的 <head>。

<!doctype html>
<html>
  <head>
    <link rel="preload" as="script" href="facebook.js">
    <link rel="preload" as="script" href="linkedin.js">

您需要注意每个资源的文件类型并相应地更新as 属性。如果文件是样式表，则需要设置as="style"。如果是脚本则需要设置as="script"。

【讨论】：