prelink

现如今网络越来越快,网页应用也变得越来越受人们欢迎,与此同时,人们对应用响应速度的期望值也越来越高。
怎样提升网站的响应速度,怎样让用户更快的看到想要的内容已经变得越发重要了。
对此,除了开发者们绞尽脑汁优化应用外,浏览器产商们也提供了各种各样方式来帮助开发者预加载资源。

下面是几种在 html head 标签中的配置方法,都是为了更快的让浏览器加载资源而存在的。

preload

preload 让浏览器预先加载资源,但是加载完成后不会立即执行,即不会阻塞页面渲染(window.onload)。
字体、重要图片等资源可以使用此属性加载。

1
2
<link rel="preload" href="style.css" as="style" />
<link rel="preload" href="main.js" as="script" />

preload 使用简单,资源的路径用 href 设置,资源的类型用 as 属性设置。
对于不支持 preload 属性的浏览器会自动忽略该 link 标签。
对跨域的文件进行 preload 的时候,我们必须加上 crossorigin 属性,否则会导致该资源加载多次(因为浏览器加载优先级的机制导致)。

prefetch

prefetch 是告诉浏览器页面可能需要的资源,浏览器不一定会加载这些资源,比如下一屏需要用到的资源(用户不一定会滑动到下一屏)。
等到浏览器空闲的时候去提前加载资源。

1
<link rel="prefetch" href="/path/to/style3-1.css" >

prefetch 资源加载优先级很低,只有等其它资源加载完了,浏览器空闲的时候才会去加载。
prefetch 和 preload 不要重复使用,如果都存在的时候会导致该资源加载多次。

dns-prefetch

dns-prefetch 是可以让浏览器提前解析指定资源的 DNS

1
<link rel="dns-prefetch" href="http://www.epoos.com/static/path/to/style3-2.css" >

对于 http 的网站, a 标签 href 带的域名都自动会预解析,不需要手动在 head 里面加上 a 标签指向的域名的。
对于 https 的网站,可使用 meta 里面 http-equiv 来强制启动功能

1
<meta http-equiv="x-dns-prefetch-control" content="on">

prerender

prerender 可以让浏览器提前加载并解析指定页面的资源,并不仅仅是指定 url 的内容,还包括 url 内容内部引用的其它资源。

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

preconnect

preconnet 的作用是提前和指定资源建立连接。

1
<link rel="preconnect" href="https://www.epoos.com" />

在请求一个资源之前,可能会涉及 DNS 解析、TLS 协商、TCP 握手、重定向等,这段时间可能很短(以前访问过),也可能会很长。
使用 preconnet 能使建立连接的过程提前进行。
和 dns-prefetch 类似,只不过 dns-prefetch 仅仅解析 DNS,而 preconnect 会直接与该资源建立连接。


上面几个预加载机制都有一定的浏览器兼容性。
对于兼容性要求比较高的站点,只可以将其作为补充辅助手段,不可让业务与其强依赖。