Resource Hint 介绍

发表于
字数统计 876 | 阅读时长 3

Resource Hint 是什么？

简而言之。辅助浏览器用来做资源优化的 指令。

为什么需要这些 指令 呢？

浏览器已经长大成人了，已经懂得如何做优化了。但是具体到每个应用，各有不同，要具体方案具体分析。
这就是指令的目的。

一些常见的指令：

  • dns-prefetch
  • preconnect
  • prefetch
  • preload
  • prerender

这些指令通常写在 head 标签的 meta 里, 形式如下：

1
<link rel="xxx" href="yyy">

但也会有些不同。下面做详细介绍。

Resource Hint 分类介绍

先介绍 dns-prefetch 和 preconnect。在介绍这两者之前， 先看一下这张图：

image

dns-prefetch 是用来解决 DNS Lookup 的问题。dns-preconnect 解决 DNS Lookup + Initial connection + SSL 问题。

dns-prefetch

image

dns-prefech 支持很广泛。从 ie9 到现代浏览器，都支持此特性。由于支持比较早，使用方法也比较多：

  1. 服务端返回 X-DNS-Prefetch-Control
  2. 在页面 head 部分添加 meta 标签。
1
2
3
4
5
6
7
<a href="http://a.com"> A) Default HTTPS: No prefetching </a>
<meta http-equiv="x-dns-prefetch-control" content="on">
<a href="http://b.com"> B) Manual opt-in: Prefetch domain resolution. </a>
<meta http-equiv="x-dns-prefetch-control" content="off">
<a href="http://c.com"> C) Manual opt-out: Don't prefetch domain resolution </a>
<meta http-equiv="x-dns-prefetch-control" content="on">
<a href="http://d.com"> D) Already opted out: Don't prefetch domain resolution. </a>
  1. 手动指定。
1
<link rel="dns-prefetch" href="hostname">

注意， chrome 71 似乎不再支持 dns-prefetch 。测试用例见 dns-prefetch 测试用例。

preconnect

image

preconnect 的作用已经介绍。使用方法也比较简单：

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

在解决了网络的问题之后, 我们再来看加载的问题：

preload

重要资源越早加载越好。

image

通常浏览器加载时散列状的，或者说是一块一块并发的。
image

preload 却可以形成如下的效果：

image

什么是重要资源呢，在可控范围内，我认为所有用到的资源都可以是重要资源。当然也可以按优先级来区分。要具体问题具体分析。

更多参考 w3c preload。

1
preload 并不属于 w3c 的 resource hint，但是目标确是一致的。所以拿到了这里统一分析。

prefetch

接下来可能会用到的资源偷偷加载。

image。

需要特别说明的是，webpack 支持了 preload 和 prefetch 功能。

比如我们需要在点击的时候异步加载一个组件：

1
2
3
$('#test').click(() => {
  (name) =>  import(/* webpackPrefetch: true */'src/component/${name}')
})

以往的异步加载是点击时，拉取对应的资源。而通过该指令可以在浏览器空闲时偷偷拉取资源。

prerender

干脆偷偷加载一个新页面得了。
image

使用方法：

1
<link rel="prerender" src="some-url">

chrome 的 prerender 并不会直接渲染页面。在各个浏览器测试功能都比较鸡肋。参考Intent to Deprecate and Remove: Prerender。

总结

  • 所有的这些指令，都不会占用你的渲染进程。而是浏览器提供的额外 bonus。
  • preconnect 比 dns-prefetch 做的更进一步，优先选用 preconnect。
  • preload 和 prefetch 配合 webpack 使用更佳。
  • prerender 功能有些鸡肋。慎用。

参考链接

ISSUE

有问题？来 github 一起讨论。