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>

 

恩,合理利用以上標簽,可以一定程度上提高用戶體驗。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM