前端性能优化之预加载

  网络连接的快慢，是前端性能的瓶颈之一，在这里我们能做些什么呢，下面介绍几个通过浏览器特性来很容易提高资源加载速度的方法：

DNS prefetching

  DNS解析的速度可用通过下面的标签来进行预解析：

<code>&lt;</code><code>link</code> <code>rel</code><code>=</code><code>"dns-prefetch"</code> <code>href</code><code>=</code><code>"//weibo.com"</code><code>&gt;</code>

Preconnect

  和DNS预解析差不多，Preconnect还会做TCP握手和TLS Negotiation：

<code>&lt;</code><code>link</code> <code>rel</code><code>=</code><code>"preconnect"</code> <code>href</code><code>=</code><code>"http://css-tricks.com"</code><code>&gt;</code>

Prefetching

  如果我们猜测用户接下来将要访问哪个具体的资源，那就可以用prefetching来预加载确定的资源了：

<code>&lt;</code><code>link</code> <code>rel</code><code>=</code><code>"prefetch"</code> <code>href</code><code>=</code><code>"image.png"</code><code>&gt;</code>

Prerendering pages

  预先渲染页面，这是更牛的预加载方式了，它的作用就类似打开一个隐藏的tab差不多：

<code>&lt;</code><code>link</code> <code>rel</code><code>=</code><code>"prerender"</code> <code>href</code><code>=</code><code>"http://css-tricks.com"</code><code>&gt;</code>

新特性：Preloading

  和prefetching不同的是，preloading会让浏览器无论如何都下载指定的资源：

<code>&lt;</code><code>link</code> <code>rel</code><code>=</code><code>"preload"</code> <code>href</code><code>=</code><code>"image.png"</code><code>&gt;</code>

合理利用以上标签，可以一定程度上提高用户体验。

本文转自 iampomelo 51CTO博客，原文链接：http://blog.51cto.com/iampomelo/1695163，如需转载请自行联系原作者