網頁前端性能提高（1）（V客學院知識分享）

 

  預加載是瀏覽器對未來可能被使用資源的一種暗示，一些資源能夠在當前頁面使用到，一些可能在未來的某些頁面中被使用。做爲開發人員，咱們比瀏覽器更加了解咱們的應用，因此咱們能夠對咱們的核心資源使用該技術。

在前端性能優化裏，咱們首先會聯想到文件的合併、壓縮，文件緩存和開啓服務器端的 gzip 壓縮等，這使得頁面加載更快，用戶能夠儘快使用咱們的 Web 應用來達到他們的目標。

那麼資源預加載是另外一個性能優化技術，咱們可使用該技術來預先告知瀏覽器某些資源可能在未來會被使用到。

 

這種作法曾經被稱爲 prebrowsing，但這並非一項單一的技術，能夠細分爲幾個不一樣的技術：DNS-prefetch、subresource 和標準的 prefetch、preconnect、prerender。

　　DNS 預解析 DNS-Prefetch

　　經過 DNS 預解析來告訴瀏覽器將來咱們可能從某個特定的 URL 獲取資源，當瀏覽器真正使用到該域中的某個資源時就能夠儘快地完成 DNS 解析。例如，咱們未來可能從 example.com 獲取圖片或音頻資源，那麼能夠在文檔頂部的 標籤中加入如下內容：

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

　　

　　

　　當咱們從該 URL 請求一個資源時，就再也不須要等待 DNS 的解析過程。該技術對使用第三方資源特別有用。

　　在 Harry Roberts 的文章中提到：

　經過簡單的一行代碼就能夠告知那些兼容的瀏覽器進行 DNS 預解析，這意味着當瀏覽器真正請求該域中的某個資源時，DNS 的解析就已經完成了。

　　這彷佛是一個很是微小的性能優化，顯得也並不是那麼重要，但事實並不是如此 – Chrome 一直都作了相似的優化。當在瀏覽器的地址欄中輸入 URL 的一小段時，Chrome 就自動完成了 DNS 預解析(甚至頁面預渲染)，從而爲每一個請求節省了相當重要的時間。

　　預鏈接 Preconnect

　　與 DNS 預解析相似，preconnect 不只完成 DNS 預解析，同時還將進行 TCP 握手和創建傳輸層協議。能夠這樣使用：

  

<link rel="preconnect" href="http://www.aseoe.com/"> 

　　

　　在 Ilya Grigorik 的文章中有更詳細的介紹：

　　現代瀏覽器都試着預測網站未來須要哪些鏈接，而後預先創建 socket 鏈接，從而消除昂貴的 DNS 查找、TCP 握手和 TLS 往返開銷。然而，瀏覽器還不夠聰明，並不能準確預測每一個網站的全部預連接目標。好在，在 Firefox 39 和 Chrome 46 中咱們可使用 preconnect 告訴瀏覽器咱們須要進行哪些預鏈接。

　　預獲取 Prefetching

　　若是咱們肯定某個資源未來必定會被使用到，咱們可讓瀏覽器預先請求該資源並放入瀏覽器緩存中。例如，一個圖片和腳本或任何能夠被瀏覽器緩存的資源：

 

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

 

　　

 

　　與 DNS 預解析不一樣，預獲取真正請求並下載了資源，並儲存在緩存中。但預獲取還依賴於一些條件，某些預獲取可能會被瀏覽器忽略，例如從一個很是緩慢的網絡中獲取一個龐大的字體文件。而且，Firefox 只會在瀏覽器閒置時進行資源預獲取。

　　在 Bram Stein 的帖子中說到，這對 webfonts 性能提高很是明顯。目前，字體文件必須等到 DOM 和 CSS 構建完成以後纔開始下載，使用預獲取就能夠輕鬆繞過該瓶頸。

　　注意：要測試資源的預獲取有點困難，但在 Chrome 和 Firefox 的網絡面板中都有資源預獲取的記錄。還須要記住，預獲取的資源沒有同源策略的限制。

　　Subresources

　　這是另外一個預獲取方式，這種方式指定的預獲取資源具備最高的優先級，在全部 prefetch項以前進行：

      

<link rel="subresource" href="styles.css"> 

　　

　　根據 Chrome 文檔：

　　rel=prefetch 爲未來的頁面提供了一種低優先級的資源預加載方式，而 rel=subresource 爲當前頁面提供了一種高優先級的資源預加載。

　　因此，若是資源是當前頁面必須的，或者資源須要儘快可用，那麼最好使用 subresource 而不是 prefetch。

　　預渲染 Prerender

　　這是一個核武器，由於 prerender 能夠預先加載文檔的全部資源：

<link rel="prerender" href="http://www.aseoe.com/"> 

　　

　　Steve Souders 在他的一篇文章中寫到：

　　這相似於在一個隱藏的 tab 頁中打開了某個連接 – 將下載全部資源、建立 DOM 結構、完成頁面佈局、應用 CSS 樣式和執行 JavaScript 腳本等。當用戶真正訪問該連接時，隱藏的頁面就切換爲可見，使頁面看起來就是瞬間加載完成同樣。Google 搜索在其即時搜索頁面中已經應用該技術多年了，微軟也宣稱將在 IE11 中支持該特性。

　　須要注意的是不要濫用該特性，當你知道用戶必定會點擊某個連接時才能夠進行預渲染，不然瀏覽器將無條件地下載全部預渲染須要的資源。

　　更多相關討論：

　　全部預加載技術都存在一個潛在的風險：對資源預測錯誤，而預加載的開銷(搶佔 CPU 資源，消耗電池，浪費帶寬等)是高昂的，因此必須謹慎行事。雖然很難肯定用戶下一步將訪問哪些資源，但高可信的場景確實存在：

　　若是用戶完成一個帶有明顯結果的搜索，那麼結果頁面極可能會被加載

　　若是用戶進入到登錄頁面，那麼登錄成功的頁面極可能會被加載

　　若是用戶閱讀一個多頁的文章或訪問一個分頁的結果集，那麼下一頁極可能會被加載

　　最後，使用 Page Visibility API 能夠防止頁面真正可見前被執行。

　　Preload

　　preload 是一個新規範，與 prefetch 不一樣(可能被忽略)的是，瀏覽器必定會預加載該資源：

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

　　

　　雖然該規範尚未被全部瀏覽器兼容，但其背後的思想仍是很是有意思的。

 

（PHP開發、web前端、UI設計、VR開發專業培訓機構--V客IT學院版權全部，轉載請註明出處，謝謝合做！）