前端性能優化之預加載

  網絡連接配接的快慢，是前端性能的瓶頸之一，在這裡我們能做些什麼呢，下面介紹幾個通過浏覽器特性來很容易提高資源加載速度的方法：

DNS prefetching

  DNS解析的速度可用通過下面的标簽來進行預解析：

<code>&lt;</code><code>link</code> <code>rel</code><code>=</code><code>"dns-prefetch"</code> <code>href</code><code>=</code><code>"//weibo.com"</code><code>&gt;</code>

Preconnect

  和DNS預解析差不多，Preconnect還會做TCP握手和TLS Negotiation：

<code>&lt;</code><code>link</code> <code>rel</code><code>=</code><code>"preconnect"</code> <code>href</code><code>=</code><code>"http://css-tricks.com"</code><code>&gt;</code>

Prefetching

  如果我們猜測使用者接下來将要通路哪個具體的資源，那就可以用prefetching來預加載确定的資源了：

<code>&lt;</code><code>link</code> <code>rel</code><code>=</code><code>"prefetch"</code> <code>href</code><code>=</code><code>"image.png"</code><code>&gt;</code>

Prerendering pages

  預先渲染頁面，這是更牛的預加載方式了，它的作用就類似打開一個隐藏的tab差不多：

<code>&lt;</code><code>link</code> <code>rel</code><code>=</code><code>"prerender"</code> <code>href</code><code>=</code><code>"http://css-tricks.com"</code><code>&gt;</code>

新特性：Preloading

  和prefetching不同的是，preloading會讓浏覽器無論如何都下載下傳指定的資源：

<code>&lt;</code><code>link</code> <code>rel</code><code>=</code><code>"preload"</code> <code>href</code><code>=</code><code>"image.png"</code><code>&gt;</code>

合理利用以上标簽，可以一定程度上提高使用者體驗。

本文轉自 iampomelo 51CTO部落格，原文連結：http://blog.51cto.com/iampomelo/1695163，如需轉載請自行聯系原作者