HTML中如何通过link标签提高页面加载速度-html教程-PHP中文网

link标签需精准使用：preload必须紧贴、带正确as属性且早于所有样式和脚本；preconnect须顶部声明并配crossorigin，1秒内触发fetch；prefetch专用于跨页资源，路径须根相对或绝对，as="document"才有效预取html。

html中如何通过link标签提高页面加载速度

link 标签不是加得越多越快，而是用对位置、选对类型、配对正确参数，才能真正压低首屏时间。错一个条件，preload 可能变 fetch，preconnect 可能白建连，prefetch 可能抢带宽。

浏览器解析到 <link rel="preload"> 就立刻发请求，但只在里生效，且必须早于所有 <link rel="stylesheet"> 和 <script></script>。放在 <title></title> 后面或动态插入，等于没写。

as 属性不能省：漏写 as="font"，字体请求 Priority 降为 Low，加载完也不应用；写成 as="script" 却引用的是 CSS，会触发 CORS 错误
as="font" 必须同步加 crossorigin（空值即可），哪怕字体和 HTML 同源
as="style" 要手动绑定 onload：onload="this.onload=null;this.rel='stylesheet'"，否则只下载不生效
别对 <img src> 做 preload——直接用 fetchpriority="high" 更简单有效

rel="preconnect" 真实减少 HTTPS 域名的 TTFB（200–600ms），但它不是“加了就管用”的开关。Chrome 和 Safari 对连接复用极其苛刻，晚 1 秒发起 fetch()，连接就被回收。

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

必须带 crossorigin（空属性值，即 crossorigin，不是 crossorigin="" 或 crossorigin="anonymous"）
必须放在最顶部，早于第一个 <meta> 以外的任何资源声明（包括 <title></title> 后的 <link>）
JS 必须在 preconnect 后 1 秒内调用 fetch("https://api.example.com/...")，React useEffect(() => {}, []) 或 Vue onMounted 是安全区间
服务端必须返回 Access-Control-Allow-Origin 等 CORS 头，否则浏览器拒绝复用预连接

rel="prerender" 在 Chrome v110+ 已默认禁用，Firefox/Safari 从未支持，现在写它纯属占位。真正可用的是 prefetch，但它只对“下一页可能访问的资源”起作用，不是给当前页提速的。

必须指定 as="document" 才能正确预取 HTML，否则按 as="fetch" 处理，绕过缓存策略
路径必须是根相对或绝对路径（如 /product/123），带查询参数（/product?id=123）或 hash 的链接会失效
不要和 preload 混用：后者只为当前页，跳转后丢弃；前者才是为“下一页”准备的
验证方式：Network 面板筛选 Initiator: prefetch，Priority 应为 Low，跳转后目标页状态码应为 200 (from memory cache) 或 304

把 <link rel="stylesheet"> 放在是底线，不是可选项。浏览器需要 CSSOM 才能构建渲染树，放错位置会导致 FOUC 或强制重绘。

禁止在 CSS 文件中用 @import：它阻塞后续样式加载，比 <link> 多一次网络往返，FCP 易延迟 300ms+
关键 CSS 可内联，非关键 CSS 用 media 属性延迟加载（如 media="(prefers-color-scheme: dark)"）
CDN 引入的公共库（如 Bootstrap）要确保响应头含 Cache-Control: public, max-age=31536000，否则长期缓存失效
HTML 中引用的静态资源路径必须稳定：用哈希（如 main.a1b2c3.css）且由构建工具自动注入，避免手写 v=1.2.3 参数破坏强缓存