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

2022-01-13 16:01 59 版权

在网页 <head> 标签里 dns-prefetchpreconnectprefetchpreloadprerender 究竟是做什么的呢?

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

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">

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

参考链接