网站在加载外部链接的时候速度总是很慢,比如Google Adsense,字体等。
通过link的rel属性,我们能够给浏览器提供一些resource hint, 来帮助浏览器做出一些预测,进而实现体验上的优化。
dns-prefetch:提前解析域名。只解析域名,不会下载任何资源。
preconnect:提前建立连接。比dns-prefetch多走了两步,除了完成dns解析之外,还完成了TCP握手,TLS握手(https情况下)。
因为IE不支持preconnect,那么我们可以用rel="preconnect dns-prefetch"
prefetch:预加载。在浏览器空闲时下载资源。这就是真正的资源下载了,比dns-prefetch多走了好几步。href 请写上具体的资源名称。
prerender:提前渲染。非常“重”的一个操作,浏览器会提前完成所有的资源加载,执行,渲染并保存在内存里。在需要时,立刻调出。是一个很耗资源和算力的操作,在SPA下,基本没有应用场景。
preload:
prefetch 是预加载,是对用户接下来很可能会使用到的资源的预先下载。
preload 本质上是影响资源的加载顺序,把可能后置下载的资源前置下载(比如CSS里的链接提前下载)。
以Google Adsense为例,那么可以在页面最上面加入以下代码,可以快速打开其他站内页面。