H5前端性能优化之预加载知识的标签

介绍几个通过浏览器特性来很容易提高资源加载速度的方法：

（1）DNS prefetching

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

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

（2）Preconnect

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

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

 

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

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

 

（4）Prerendering pages

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

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

 

（5）新特性：Preloading
和prefetching不同的是，preloading会让浏览器无论如何都下载指定的资源：

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

 

（6）H5音乐预加载 preload=”auto”

<audio src=”music.mp3″ autoplay=”autoplay” loop preload=”auto” id=”sendid2″></audio>

 

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