HTML怎么做preconnect预连接_html link preconnect预连接方法【大全】-html教程-PHP中文网

preconnect 标签必须置于最顶部、紧接后，且需写对协议+域名格式、正确使用crossorigin属性，否则无效；动态插入、放或含路径/参数的href均不触发连接。

html怎么做preconnect预连接_html link preconnect预连接方法【大全】

preconnect 标签只有写对位置、写对格式、写对域名，浏览器才会真正执行连接；写错一行，等于没写。

preconnect 必须放在最顶部，且不能动态插入

浏览器解析 HTML 是从上到下流式进行的，preconnect 要在解析到第一个 <script></script> 或 <link rel="stylesheet"> 之前就被看到，否则可能错过空闲连接窗口。Chrome 会立即发起 DNS + TCP + TLS 握手，但这个动作只发生在标签被 HTML 解析器“看见”的那一刻。

正确位置：紧接在 <meta charset> 后，越靠前越好，例如：

  <meta charset="utf-8"><link rel="preconnect" href="https://fonts.gstatic.com"><link rel="preconnect" href="https://cdn.example.com" crossorigin><link rel="stylesheet" href="/main.css">

动态插入无效：document.head.appendChild() 添加的 <link rel="preconnect"> 标签，浏览器完全无视
放在里或注释之后，同样不生效

href 值必须是协议+域名，不能带路径或查询参数

href 不是 URL，而是“连接目标标识符”。浏览器只取协议和域名部分做连接准备，其余一概截断或报错。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

合法写法：https://fonts.googleapis.com、https://cdn.jsdelivr.net、https://api.example.com
非法写法：https://fonts.googleapis.com/css（含路径）、https://cdn.example.com/?v=1（含查询参数）、//fonts.gstatic.com（协议相对地址，不支持）
HTTP 域名会被忽略：http://example.com 在现代 Chrome 中不会触发任何连接行为

crossorigin 属性不是可选开关，该加不加会导致连接白建

是否加 crossorigin，取决于后续资源请求是否带凭据（credentials）。如果目标资源响应头含 Access-Control-Allow-Origin，而你没加 crossorigin，浏览器会建一个“无凭据连接”，后续带凭据的请求（如字体、fetch 调用）无法复用它——等于预连接失败。

必须加：https://fonts.googleapis.com 和 https://fonts.gstatic.com（Google Fonts 字体需 CORS）
建议加：https://api.example.com（如果你的前端用 fetch(..., { credentials: 'include' })）
通常不加：https://cdn.jsdelivr.net（公开静态资源，一般不需要凭据）
禁止写成：crossorigin="" —— 这是非法 HTML，属性值为空字符串会被浏览器忽略

别超 3–4 个，同一域名重复写只认第一个

Chrome 当前限制并发 preconnect 数为 6 个（含所有域名），每个连接还占用 TLS 握手 CPU 和网络资源。加太多不仅没收益，反而挤占真实资源请求的连接池。

优先级排序：只保留首屏必用的跨域域名，比如字体服务、CDN 主域、首屏 API 域名
同域名多次声明：<link rel="preconnect" href="https://cdn.example.com"> 写两次，第二个被丢弃
旧版 Safari（preconnect，不报错也不生效，可搭配 <link rel="dns-prefetch"> 降级
如果目标域名 TLS 证书异常（如过期、域名不匹配），Chrome 控制台会报 net::ERR_CERT_COMMON_NAME_INVALID，且不会重试

最容易被跳过的点是：以为写了就一定生效，其实只要 href 多了一个斜杠、crossorigin 少了引号、或者放到了 <link rel="stylesheet"> 后面两行，整个预连接就失效了。验证时别只看 Network 面板有没有请求，要进 Timing 查 “Connection Start” 是否显著提前。