前端性能优化之预加载

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


DNS prefetching

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

<link rel="dns-prefetch" href="//weibo.com">


Preconnect

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

<link rel="preconnect" href="http://css-tricks.com">


Prefetching

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

<link rel="prefetch" href="image.png">


Prerendering pages

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

<link rel="prerender" href="http://css-tricks.com">


新特性:Preloading

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

<link rel="preload" href="image.png">


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

你可能感兴趣的:(前端,性能优化,预加载)