一站式理解 - prefetch preconnect prerender preload

在前端性能优化方面，有一些小细节，做好了虽然不会大幅提升性能，但是能说明你细心周到，是个暖男，肯定能找到女朋友。

通过link的rel属性，我们能够给浏览器提供一些resource hint, 来帮助浏览器做出一些预测，进而实现体验上的优化。

dns-prefetch

<link rel="dns-prefetch" href="https://fonts.gstatic.com/" >

提前解析域名。只解析域名，不会下载任何资源，因此 href 通常写入第三方域名。写入具体的图片或js资源是没有意义的。

写入本站域名没有任何效果，因为当浏览器解析到这一行代码的时候，本站域名早已经解析完成。

使用场景举例
用户很可能点击某个链接，下载跨域图片。如果当前页面引入了dns-prefetch，当用户真正点链接时，dns的解析早已完成，省去了一些时间。在复杂网络场景下，会有较好的效果。

preconnect

<link rel="preconnect" href="https://css-tricks.com">

提前建立连接。比dns-prefetch多走了两步，除了完成dns解析之外，还完成了TCP握手，TLS握手（https情况下）。

使用场景举例
同dns-prefetch

prefetch

<link rel="prefetch" href="https://css-tricks.com/a.png">

预加载。在浏览器空闲时下载资源。这就是真正的资源下载了，比dns-prefetch多走了好几步。href 请写上具体的资源名称。

使用场景举例
在用户阅读当前页时，提前准备“下一页”内容。

prerender

<link rel="prerender" href="https://css-tricks.com">

提前渲染。非常“重”的一个操作，浏览器会提前完成所有的资源加载，执行，渲染并保存在内存里。在需要时，立刻调出。是一个很耗资源和算力的操作，在SPA下，基本没有应用场景。

需要注意的是，以上操作本身也是会耗费浏览器资源的，所以请按需使用。

preload

容易和prefetch混淆, 这里解释一下

prefetch 是预加载，是对用户接下来很可能会使用到的资源的预先下载。
preload 本质上是影响资源的加载顺序，把可能后置下载的资源前置下载。

使用场景举例
当资源没有直接体现在html中，而是隐藏在css或是js里，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>

加载过程

normal

对字体的下载发生在css下载之后，因为只有当浏览器下载完css并完成解析之后，才能知道字体资源的存在

使用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

同时下载字体和css，因为浏览器提前知道了隐藏资源的存在，做出了最优安排。与未使用preload相比，下载时间减少了。 preload本质上是影响资源的加载顺序。

最后编辑于：2020.06.02 17:52:47