网页加载速度优化详解：dns-prefetch、preconnect、prefetch/preload、prerender

2022-01-13 16:01 276 版权

版权声明：本文为  iTool.co 网站原创/翻译，遵循  CC BY-SA 4.0  版权协议，转载请附上原文出处链接及本声明。
原文链接：https://itool.co/blogs/2

在网页 <head> 标签里 dns-prefetch、preconnect、prefetch、preload、prerender 究竟是做什么的呢？

这些标签，其实都是为了优化网页加载速度的。虽然相对如今动辄百兆千兆的网速来讲，这些优化对网页加载速度提升并不明显，但是对于那些网络条件不好的用户来说，一点点的优化就能带来明显的舒适。所以一个优秀的前端，更应该把握细节。

dns-prefetch 预解析

<link rel="dns-prefetch" href="//example.com">

作用：只预解析域名的DNS，不加载任何资源，href属性就是要解析的域名（不用填写具体资源的地址）。一个网页可以同时包含多个 dns-prefetch，建议尽可能把所有用到的域名都加上。

使用场景：当网页中包含跨域资源（js、css、图片、统计代码、广告代码等），dns-prefetch 会加速对加载这些资源，节省时间。

preconnect 预连接

<link rel="preconnect" href="//example.com">
<link rel="preconnect" href="//cdn.example.com" crossorigin>

作用：提前建立连接。除了完成 dns-prefetch 的解析工作外，还完成了TCP握手、TLS握手（https情况下）。但是也不加载任何资源。

prefetch / preload 预加载

prefetch

<link rel="prefetch" href="//example.com/next-page.html" as="html" crossorigin="use-credentials">
<link rel="prefetch" href="/library.js" as="script">

作用：prefetch 预加载。href 属性就是要解析的具体资源。当浏览器空闲时，预加载资源。

使用场景：用户阅读当前页时，预加载用户可能点击的“下一页”内容。（这个需要预判，但是用户也可能不会看下一页）

preload

使用了 preload 的网页

<!DOCTYPE html>
<html>
<head>
    <link rel="preload" href="https://fonts.gstatic.com/s/sofia/v8/8QIHdirahM3j_su5uI0Orbjl.woff2" as="font"
        crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Title</h1>
</body>
</html>

作用：preload 预加载。href 属性就是要解析的具体资源。

prefetch 是对接下来很可能会用到的资源预先下载。

preload 是影响资源加载顺序，把顺序靠后下载的资源提前下载。

使用场景：当资源没有直接体现在html中，而是隐藏在css或是js里，preload可以提前告知浏览器隐藏资源的存在，以便浏览器做出最优的安排。对字体的下载发生在css下载之后，因为只有当浏览器下载完css并完成解析之后，才能知道字体资源的存在。使用了preload后，同时下载字体和css，因为浏览器提前知道了隐藏资源的存在，做出了最优安排。与未使用preload相比，下载时间减少了。 preload本质上是影响资源的加载顺序。

存在隐藏资源的样式 style.css

@font-face {
    font-family: myFirstFont;
    src: url('https://fonts.gstatic.com/s/sofia/v8/8QIHdirahM3j_su5uI0Orbjl.woff2');
}

h1 {
    font-family: myFirstFont;
}

未使用 preload 的网页

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Title</h1>
</body>
</html>

prerender 预渲染

<link rel="prerender" href="//example.com/next-page.html">

作用：预渲染。浏览器会完成所有资源下载、执行、渲染并保存在内存里，等待随时调出。

参考链接