在昨天的一篇文章《經典面試題-Web前端性能優化方法之延遲加載》中，我們講到的是延遲加載技術，既然有延遲加載，那麼就有預加載，今天這篇文章講述的是預加載如何實現Web性能優化。
在昨天的一篇文章《經典面試題-Web前端性能優化方法之延遲加載》中，我們講到的是延遲加載技術，既然有延遲加載，那麼就有預加載，今天這篇文章講述的是預加載如何實現Web性能優化。
loading
預加載
預加載技術主要是通過預測瀏覽器在未來某個時間需要用到的資源，提前進行加載，在特定的時間段內直接使用即可。作為開發者，肯定比普通用戶更加了解網頁資源的加載順序，因此通過預加載技術來告知瀏覽器Web中需要用到的核心資源，可以提升網頁的訪問速度。
預加載技術包括很多個方面，包括DNS prefetching,Preconnect,Prefetch,Subresource,Prerender等，我們一一來看
DNS prefetching
DNS prefetching顧名思義，就是提前解析DNS。
開發人員可以通過代碼告知瀏覽器儘早的解析特定DNS，當請求該域名下的文件時，就不用再解析DNS，而是可以直接使用該DNS下的文件了。這中方法在使用第三方庫時顯得尤為有效。
使用方法是，在<head>標籤中添加如下一段代碼
DNS預加載
Preconnect
Preconnect類似於DNS prefetching，它會預先建立TCP握手連接，在需要的時候還會建立TLS連接。
在現代瀏覽器中，會盡可能的預測網站所需要的連接，通過提前連接，可以消除在真實請求時的DNS解析，TCP連接的時間。
開發者可以通過代碼去告知瀏覽器哪些資源是可以提前連接的，代碼段如下
Preconnect提前連接
Prefetch
Prefetch是告知瀏覽器在未來某個時候需要用到的資源，可以提前請求並緩存下來，等到真正需要用的時候，可以直接從緩存中獲取。Prefetch可以預拉取圖片，css，js等資源文件。
通過以下代碼我們可以實現一張圖片的預拉取並緩存起來。
Prefetch預拉取
當然，瀏覽器並不是在任何情況下都會去執行預拉取操作，比如在網絡情況不好的情況下不會請求較大的資源，Firefox只會在空閒時去執行Prefetch操作。
Subresource
Subresource是用來指定加載資源的高優先級，使用的方法如下。
Subresource提前加載
Subresource與Prefetch不同，Prefetch指定是未來的頁面需要用到的低優先級的資源，而Subresource指定的是當前頁面需要用到的高優先級的資源。因此，在指定當前頁面中需要用到的資源時，推薦用Subresource，而在後續頁面中用到的資源提前加載推薦用Prefetch。
Prerender
Prerender可以讓瀏覽器提前加載指定頁面上的所有資源。
Prerender我們可以這樣理解：瀏覽器實際上會在後臺開啟一個隱藏的標籤頁，在這個標籤頁中會下載頁面上需要的所有資源，如果用戶進入了指定的鏈接，則這個隱藏的頁面會立馬顯示出來，而用戶是無法辨別這個頁面是之前的隱藏頁面還是重新開啟的頁面。
Prerender預加載
並不是所有的頁面都適合Prerender特性，如果用戶最終未能進入指定的鏈接的頁面，那麼提前加載的很多資源文件會浪費很多的帶寬。
我們可以分析一下一些比較適合使用Prerender特性的頁面：
一個具有分頁展示的圖片集或者文字集，在我們點擊下一頁的時候，可以將下一頁的內容使用Prerender屬性預加載
註冊與登錄頁面，新用戶註冊完成之後一般會選擇去登錄，登錄頁面完成之後會跳轉到主頁面，這兩個過程就比較適合Prerender屬性的預加載
總結
今天這篇文章主要將的是預加載的Web性能優化方式，後面會持續更新其他Web性能優化的文章。
相關推薦
