前端性能優化之預加載

  網絡鏈接的快慢,是前端性能的瓶頸之一,在這裏咱們能作些什麼呢,下面介紹幾個經過瀏覽器特性來很容易提升資源加載速度的方法:css


DNS prefetchinghtml

  DNS解析的速度可用經過下面的標籤來進行預解析:前端

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


Preconnect瀏覽器

  和DNS預解析差很少,Preconnect還會作TCP握手和TLS Negotiation:網絡

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


Prefetching前端性能

  若是咱們猜想用戶接下來將要訪問哪一個具體的資源,那就能夠用prefetching來預加載肯定的資源了:ide

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


Prerendering pages性能

  預先渲染頁面,這是更牛的預加載方式了,它的做用就相似打開一個隱藏的tab差很少:fetch

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


新特性:Preloadingspa

  和prefetching不一樣的是,preloading會讓瀏覽器不管如何都下載指定的資源:

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


合理利用以上標籤,能夠必定程度上提升用戶體驗。

相關文章
相關標籤/搜索