HTML中怎么利用link标签进行预建联以降低延迟-html教程-PHP中文网

preconnect必须置于head最顶部、紧接meta charset后且早于首个link或script，跨域域名须显式添加crossorigin属性（同源也需），chrome并发上限6个，建议控制在3–4个，仅用于首屏必用的https域名。

html中怎么利用link标签进行预建联以降低延迟

preconnect 必须写在最前面，且带 crossorigin

浏览器只在 HTML 解析早期识别 preconnect，一旦开始构建 DOM 或遇到 <script></script> 就不再处理。它必须紧接在 <meta charset> 后、<title></title> 前，否则连接建立被推迟，弱网下可能多耗 300ms+。

所有跨域域名（包括 CDN、字体服务、API 域名）都必须显式加 crossorigin 属性——Safari 和部分旧版 Chrome 会直接忽略不带它的 preconnect 标签，即使同源也得加。

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> ✅
<link rel="preconnect" href="https://cdn.example.com"> ❌（Safari 无视）
<link rel="preconnect" href="https://api.example.com" crossorigin> ✅（哪怕你只用 fetch，也建议提前连）

别超过 4–6 个 preconnect，否则抢主站连接

浏览器对并发 TCP 连接数有硬限制（通常为 6），每个 preconnect 都会占用一个连接槽位。如果预连了太多第三方域名，主站资源（如 main.css、app.js）可能被迫排队，反而拖慢首屏。

只对确定会在当前页发起请求的域名使用：fonts.gstatic.com（字体）、cdn.example.com（静态资源）、api.example.com（关键接口）。不要为 analytics、广告、埋点等非首屏依赖的域名加。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

检查 Network 面板中 Initiator 列，确认哪些域名真发起了请求
用 Lighthouse 的 “Avoid multiple page redirects” 审计项反向验证：若发现大量 DNS/TLS 时间，说明 preconnect 没覆盖到关键域名
多个 preconnect 之间无顺序依赖，但必须全部出现在首个 <script></script> 标签之前

preconnect 后不能立刻发请求，要留出 100ms 空隙

连接建立（DNS + TCP + TLS）需要时间，浏览器不会保证 preconnect 声明后下一毫秒就能复用。如果紧接着就写 <link rel="preload" href="https://cdn.example.com/main.css">，部分请求仍可能走全新连接，失去优化意义。

稳妥做法是在 preconnect 和首个使用该域名的资源之间，插入至少一个其他标签（比如 <meta name="viewport">），或确保它们之间有明显解析间隔。实测中，100ms 是多数场景下连接真正就绪的保守阈值。

错误示范：<link rel="preconnect" ...> <link rel="preload" href="https://cdn.example.com/...">（紧挨着）
正确做法：<link rel="preconnect" ...> <meta name="viewport"> <link rel="preload" ...>
Chrome DevTools 的 Timing 选项卡里，若看到某资源的 “Connection Start” 时间远晚于 preconnect 发起时间，说明没复用成功

preconnect 不是 dns-prefetch 的升级版，二者定位不同

dns-prefetch 只做 DNS 查询，开销极小，适合兼容老浏览器；preconnect 是完整建连，效果更强但有连接数成本。它们不是替代关系，而是互补：现代项目应主用 preconnect，仅对 IE 或 Android 4.x 等已淘汰环境才考虑降级到 dns-prefetch。

别混用：同一域名同时写两者毫无收益，还增加 HTML 体积。也不要用 dns-prefetch 替代 preconnect 来“省连接数”——该省的是域名数量，不是协议层级。

<link rel="preconnect" href="https://cdn.example.com" crossorigin> —— 主力方案
<link rel="dns-prefetch" href="https://cdn.example.com"> —— 仅当明确需支持 Safari 11 以下或 Chrome 60 以下时添加
不加 crossorigin 的 dns-prefetch 在跨域时仍有效，这是它和 preconnect 的关键区别

实际部署中最容易被忽略的一点：preconnect 的域名必须和后续资源请求的 href 协议、主机名、端口完全一致。写成 https://cdn.example.com 却在 preload 中用 http://cdn.example.com，或漏掉端口号（如 :443），连接都不会复用。