如何通過預載入器提升網頁載入速度

powertoolsteam發表於2014-01-16
網頁

　　預載入器（Pre-loader）可以說是提高瀏覽器效能最重要的舉措。Mozilla 官方釋出資料，通過預載入器技術網頁的載入效能提升了19%，Chrome測試了 Alexa 排名前2000名網站，效能有20%的提升。

　　它並不是一門新技術，有人認為只有 Chrome 才具備這個功能。也有人認為它是有史以來提升瀏覽器效能最有效的方法。如果你第一次接觸預載入器，也許心中已經有了無數個問號。什麼是預載入器？它是如何提升瀏覽器效能的？

　首先需要了解瀏覽器是如何載入網頁的

　　一個網頁的載入依賴於指令碼檔案、CSS樣式檔案。讓我們看看瀏覽器載入網頁的過程。

  • 首先，瀏覽器下載 HTML 並開始解析。如果瀏覽器發現外部CSS資源連結則傳送下載請求。
  • 瀏覽器可以在下載CSS資源的同時，並行解析HTML檔案，但是，一旦發現有指令碼檔案的引用，則必須等待指令碼檔案完成下載並且執行後才能繼續解析。
  • 指令碼檔案完成下載並且執行後，瀏覽器可以繼續解析HTML工作，如果遇到非阻塞資源 i.e. 圖片瀏覽器會傳送下載請求並且繼續解析。

　　即使瀏覽器可以並行執行多個請求，但是無法與針對指令碼檔案的操作並行執行。

　　可以通過IE7開啟連結中的網頁進行測試。我們可以看到，網頁head標籤內包含2個樣式檔案和2個指令碼檔案。在body中，包含3個圖片、1個指令碼檔案。

　　通過瀑布流我們可以檢視資源載入的過程：

通過預載入器提升網頁載入速度

　　指令碼檔案的下載和執行，會阻斷其他資原始檔的下載，無疑將大大降低瀏覽器效能。

　預載入器如何提高網路利用率

　　2008 年，IE、WebKit和Mozilla都實現了預載入器功能，來提升網路的利用率，改善指令碼檔案對其他資原始檔的阻塞現狀。

　　當瀏覽器被指令碼檔案阻塞時，另一個輕量級的解析器會繼續瀏覽剩餘的標記，尋找需要下載的資源i.e. 樣式檔案， 指令碼檔案，圖片 等。

　　一旦發現，預載入器既可以在後臺開始接收這些資源，等待主解析器完成當前的指令碼操作，其他資源已經完成下載，這樣就減輕了指令碼阻塞帶來的效能損耗。

　　下面這個瀑布流是使用IE8開啟連結中網頁的結果，效能有顯著的提升：IE8=7S > IE7=14S。

通過預載入器提升網頁載入速度

　　預載入功能仍然是各大瀏覽器廠商樂此不疲的實驗領域。很多瀏覽器嘗試設定資源下載的優先順序。例如，Safari降低了不作用於當前檢視區域樣式檔案的優先順序。Chrome 則設定指令碼檔案的優先順序高於圖片，即使指令碼檔案位於HTML底部。

　預載入器的陷阱

　　預載入器只能檢索HTML標籤中的URL，無法檢測到使用指令碼程式碼新增的URL，直至指令碼程式碼執行時才可以獲取這類資源。

　　我曾經遇到過一個通過javascript判斷當前Window寬度，進而決策載入CSS樣式檔案的例子。預載入器無法識別此類資源。

<html>
<head>
 <script>
 var file = window.innerWidth < 1000 ? "mobile.css" : "desktop.css";
 document.write('<link rel="stylesheet" type="text/css" href="css/' + file + '"/>');
 </script>
 </head>
 <body>
 <img src="img/gallery-img1.jpg" />
 <img src="img/gallery-img2.jpg" />
 <img src="img/gallery-img3.jpg" />
 <img src="img/gallery-img4.jpg" />
 <img src="img/gallery-img5.jpg" />
 <img src="img/gallery-img6.jpg" />
 </body>
</html>

　　上面這段程式碼可以輕鬆的騙過IE9的預載入機制，在下面的瀑布流中我們可以看到，載入圖片佔用了所有的連線，直至第一個圖片載入完成後，CSS檔案才開始下載。

通過預載入器提升網頁載入速度

　影響預載入器的載入順序的因素

　　當前，有幾種方式來控制預載入器的載入順序（使用javacript隱藏資原始檔既是其中一種），同時，W3C Resource Priorities 中也提供兩個特性來影響預載入器。

　　lazyload : 直至沒有被標記為lazyload 資源下載完畢後才下載被標記資源。

　　postpone: 資源在對終端使用者可見之後才開始下載。i.e. 標籤的display屬性被設定為 none。

　預載入VS預讀取

　　預讀取（Pre-fetching）可以通知瀏覽器哪些資源可能會在未來的某一時機，在當前頁面或者其他頁面中使用。

　　下面是預讀取的一個簡單的應用，通知瀏覽器為將要訪問的其他站點載入資源：

<link rel="dns-prefetch" href="other.hostname.com">

　　Chrome允許我們預先通知瀏覽器載入未來會用到的資源，被宣告的資源將以較高的優先順序被下載。

<link rel="subresource" href="/some_other_resource.js">

（Chromium 原始碼中提到，被標記為subresource的資源下載的優先順序低於樣式檔案和指令碼檔案，但不低於圖片載入優先順序）

　　還有標記可以通知瀏覽器哪些檔案是較低階別的預讀取檔案。

　　預讀取未來將被使用的獨立資原始檔。

<link rel="prefetch" href="/some_other_resource.jpeg">

　　通過預讀取方式，在後臺渲染整個頁面。

<link rel="prerender" href="//domain.com/next_page.html">

　總結

　　預載入不是一門新技術，它對提高瀏覽器效能具有紀念意義，我們不需要做任何操作既可以使用預載入。

　　它廣泛應用，我測試了以下瀏覽器，都具有預載入功能：

  • IE8 / 9 / 10
  • Firefox
  • Chrome (inc Android)
  • Safari (inc iOS)
  • Android 2.3

　　Bruce Lawson（Opera公司總裁）也宣佈Opera Mini 同樣支援預載入。

相關文章