Fe-interview: [css] 第177天 你有使用过preload、preconnect、prefetch这些属性吗？说说它们都有什么作用？

[haizhilin2013]

第177天 你有使用过preload、preconnect、prefetch这些属性吗？说说它们都有什么作用？

[encountermm]

• Preload: 当我们在 link 标签中使用 preload 时，它会提前请求资源。主要用于获取当前路由中使用的高优先级资源。

• Preconnect: 解决 DNS 和 TCP 握手问题

• Prefetch: 提前获取资源将其置于缓存中，使用资源时从缓存中获取而不是发出另一个请求。

参考链接

[vkboo]

补充下

• dns-prefetch: 提前解析DNS，使用资源时省去DNS的解析时间

<!-- Prefetch DNS for external assets -->
 <link rel="dns-prefetch" href="//fonts.googleapis.com">
 <link rel="dns-prefetch" href="//www.google-analytics.com"> 
 <link rel="dns-prefetch" href="//opensource.keycdn.com">
 <link rel="dns-prefetch" href="//cdn.domain.com">

• prerender:Prerendering 和 prefetching 非常相似，它们都优化了可能导航到的下一页上的资源的加载，区别是 prerendering 在后台渲染了整个页面，整个页面所有的资源

<link rel="prerender" href="https://www.keycdn.com">

参考链接

[qhdxwdm]

preload
元素的 rel 属性的属性值preload能够让你在你的HTML页面中元素内部书写一些声明式的资源获取请求，可以指明哪些资源是在页面加载完成后即刻需要的。
试想我们网站使用了一种特殊字体，我们在css里面定义了字体的url。那么直到浏览器开始解析CSS了才会识别出来需要加载这个资源。
如果我们提前让浏览器下载好这个资源呢？那么执行CSS的时候就可以直接用了。就像这样：
<link rel="preload" href="fonts/cicle_fina-webfont.woff" as="font" type="font/woff" crossorigin="anonymous">

如上所示，我们使用这样的语法：
rel="preolad"声明这是一个preload
href指明资源的位置
as指明资源类型（这是为了让浏览器精确设置优先级，设置正确的CSP、Accept头部）
crossorigin 指明使用的跨域设置
preload和onload事件
添加preload声明之后，浏览器初次加载的资源变多了，但preload并不会阻塞onload事件的触发
prefetch
prefetch是对浏览器的暗示，暗示将来可能需要某些资源，但由代理决定是否加载以及什么时候加载这些资源。
efetch跟preload不同在于，用户从A页面进入B页面，preload的会失效，而prefetch的内容可以在B页面使用。

preconnet
浏览器要建立一个连接，一般需要经过DNS查找，TCP三次握手和TLS协商（如果是https的话），这些过程都是需要相当的耗时的，所以preconnet，就是一项使浏览器能够预先建立一个连接，等真正需要加载资源的时候就能够直接请求了。
而一般形式就是

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

浏览器会进行以下步骤：

解释href的属性值，如果是合法的URL，然后继续判断URL的协议是否是http或者https否则就结束处理
如果当前页面host不同于href属性中的host,crossorigin其实被设置为anonymous(就是不带cookie了)，如果希望带上cookie等信息可以加上crossorign属性,corssorign就等同于设置为use-credentials