【性能优化】前端之 preconnect、dns-prefetch、preload 特性

小渣渣

需求：在请求 Web 网站的时候需要加载很多资源，网络请求也影响着网页渲染的速度，当用户点击操作的时候再去加载一些资源可能会影响用户体验，如今飞速的互联网发展，带宽和流量早已不在是那么昂贵，如何提前预加载资源或者提前和目标服务器建立链接呢？

Preconnect 预连接

元素属性的关键字preconnect是对浏览器的提示，即用户可能需要来自目标资源源的资源，因此浏览器可以通过抢先启动与该源的连接来改善用户体验。

preconnect 允许浏览器在一个 HTTP 请求正式发给服务器前预先执行一些操作，这包括 DNS 解析，TLS 协商，TCP 握手，这消除了往返延迟并为用户节省了时间。

Preconnect 是优化的重要手段，它可以减少很多请求中的往返路径 —— 在某些情况下可以减少数百或者数千毫秒的延迟。
如下是为 Google Fonts 使用 preconnect 的例子，通过给 fonts.gstatic.com 加入 preconnect 提示，浏览器将立刻发起请求，和 CSS 请求并行执行。在这个场景下，preconnect 从关键路径中消除了三个 RTTs（Round-Trip Time） 并减少了超过半秒的延迟。



语法如下：

登录可见。

文档：https://developer.mozilla.org/en ... nk_types/preconnect

DNS-prefetch 使用 dns 预取

元素属性的关键字dns-prefetch是向浏览器提示用户可能需要来自目标资源源的资源，因此浏览器可以通过抢先执行该源的 DNS 解析来改善用户体验。

DNS prefetching 允许浏览器在用户浏览页面时在后台运行 DNS 的解析。如此一来，DNS 的解析在用户点击一个链接时已经完成，所以可以减少延迟。可以在一个 link 标签的属性中添加 rel="dns-prefetch' 来对指定的 URL 进行 DNS prefetching，我们建议对 Google fonts，Google Analytics 和 CDN 进行处理。

"DNS 请求在带宽方面流量非常小，可是延迟会很高，尤其是在移动设备上。通过 prefetching 指定的 DNS 可以在特定的场景显著的减小延迟，比如用户点击链接的时候。有些时候，甚至可以减小一秒钟的延迟 —— Mozilla Developer Network"

语法如下：

登录可见。

文档：https://developer.mozilla.org/en-US/docs/Web/Performance/dns-prefetch

Preload 预加载

元素属性 的preload值允许您在 HTML 中声明获取请求，指定页面很快需要的资源，您希望在页面生命周期的早期开始加载，在浏览器的主要渲染机制启动之前。这确保它们是更早可用并且不太可能阻塞页面的呈现，从而提高性能。即使名称包含术语load，它也不会加载和执行脚本，而只会安排它以更高的优先级下载和缓存。

Preload 是一个新的控制特定资源如何被加载的新的 Web 标准，这是已经在 2016 年 1 月废弃的 subresource prefetch 的升级版。这个指令可以在 <link> 中使用，比如 <link rel="preload">。一般来说，最好使用 preload 来加载你最重要的资源，比如图像，CSS，JavaScript 和字体文件。这不要与浏览器预加载混淆，浏览器预加载只预先加载在HTML中声明的资源。preload 指令事实上克服了这个限制并且允许预加载在 CSS 和JavaScript 中定义的资源，并允许决定何时应用每个资源。

Preload 与 prefetch 不同的地方就是它专注于当前的页面，并以高优先级加载资源，Prefetch 专注于下一个页面将要加载的资源并以低优先级加载。同时也要注意 preload 并不会阻塞 window 的 onload 事件。

可以预加载许多不同的内容类型。可能的as属性值是：

audio：音频文件，通常用于<audio>.
document: 旨在由<frame>或嵌入的 HTML 文档<iframe>。
embed：要嵌入到<embed>元素中的资源。
fetch：要通过 fetch 或 XHR 请求访问的资源，例如 ArrayBuffer 或 JSON 文件。
font: 字体文件。
image： 图像文件。
object：要嵌入到<object>元素中的资源。
script: JavaScript 文件。
style: CSS 样式表。
track: WebVTT 文件。
worker：一个 JavaScript 网络工作者或共享工作者。
video：视频文件，通常用于<video>.

语法如下：

登录可见。

文档：https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/preload

Zmoli775

跟着Z哥一步一步前进，笔记插眼好习惯。

飞鱼

学习学习