5个 link 标签，突破前端性能瓶颈！

我今天说个前端性能优化比较实用的几行 HTML 代码吧，都是 link 标签。

只需要写到 head 里，一般情况下，可以提高一些 FCP LCP 质量，让页面加载速度更快一点，性能优化的瓶颈时，可以参考一下。

是 5 种 link 属性。

我以前写的笔记，今天整理一下。总体 demo 长这个样，然后我挨个介绍一下怎么用：

<link rel="preconnect" href="https://cdn.example.com">
<link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin>
<link rel="dns-prefetch" href="https://google-analytics.com">

<link rel="prefetch" href="/js/dashboard.js" as="script">
<link rel="prefetch" href="/css/dashboard.css" as="style">
<link rel="prefetch" href="/dashboard" as="document">

<link rel="modulepreload" href="/js/app.js">
<link rel="modulepreload" href="/js/components.js">

一个 gpt-image 生成的对比图，一目了然：

① 预连接重要的域名 Preconnect

首先第一个 link ，rel 属性值是 preconnect ，这个可以告诉浏览器，提前发请求。怎么理解呢？就是提前把连接工作给做了（比如 DNS 解析、TLS 握手等），之后下文如果再请求这个地址的 cdn 文件时，速度会快很多。

注意，这个不要滥用，因为它会占用浏览器资源，最好一个页面里的 preconnect 不多于 4 个。

② 更早开始下载资源 preload

第二个 link ，rel 属性值是 preload ，这个是缓解阻塞渲染的。我们以前使用 wordpress 的时候，是不是经常因为神秘网络力量，在国内加载其内置的几个模板，加载时间会很长哈哈，其实是因为有很多谷歌字体，我们访问不到。从而阻塞了页面加载。

如果我们把一些体积很大的资源，加上这个 rel 属性值，就可以缓解阻塞页面渲染了，它会让浏览器更优先去下载这个文件。视觉上，页面加载会快一点。

注意，as="font" 和 crossorigin 这 2 个必须加！否则会重复加载。

至于 as 怎么用，可以看 https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/rel/preload 这个文档。

③ 预连接可能要用到的域名 dns-prefetc

第三个 link 的 rel 属性值是 dns-prefetc ，这个是什么意思呢？和刚才第一个差不多，但是开销更小一点。至于两者使用区别，那就是 preconnect 是你确定的肯定会马上用到的地址，而 dns-prefetc 则是一些可能访问，也可能不访问的不是很重要的。

我们一般把 cdn （而且是非常重要的 CDN）、API 接口的写成 preconnect ，而把 谷歌统计 、不重要的 cdn 等这种，写成 dns-prefetc 。理解了吧？！

④ 后台下载并缓存 prefetch

这个 rel="prefetch" 可以要求浏览器在后台下载并缓存 JS CSS 等资源。虽然浏览器，它自己也有一定的缓存机制。

但是，如果说我们用户下一步，要去用户中心这个页面了，那么可以把这个页面的一些会用到的资源，使用 prefetch 写一下。这样，预加载，预缓存，下一个页面会快一点。

⑤ 快速下载、缓存、解析 JS 脚本 modulepreload

我们现在前端开发，基本已普及 ES 模块了。

通常，我们直接引入模块，会让浏览器多次往返加载模块。毕竟你引入了 main . js ，但是浏览器真的只知道 main . js ，里面包含的其他的模块，比如 header . js 、link . js 等等等，全然不知。于是一层层请求，一层层下载.... 对于大型项目，耗时会很多。

用了 modulepreload 可以缓解。

当然，它不是一次性全把模块加载完，毕竟这样的话，模块化的意义何在？它是让我们把一些重要的模块提前写出来。比如 app . js 、components . js 两个重要，那么我们就写：

<link rel="modulepreload" href="/js/app.js">
<link rel="modulepreload" href="/js/components.js">

这样浏览器会在最开始，就处理这俩依赖了。

可能听起来有点鸡肋哈，但是在一些性能到达瓶颈的时候，不失是一个好办法。