介紹幾個通過瀏覽器特性來很容易提高資源加載速度的方法:
(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>
恩,合理利用以上標簽,可以一定程度上提高用戶體驗。