在前端性能优化方面，有一些小细节，做好了虽然不会大幅提升性能，但是能说明你细心周到，是个暖男，肯定能找到女朋友。
通过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本质上是影响资源的加载顺序。
网友评论