共創萬物智聯時代
以技術研發為導向 助力企業加速數字化轉型
共創萬物智聯時代
以技術研發為導向 助力企業加速數字化轉型
概述：
預加載器(Pre-loader)可以說是提高瀏覽器性能最重要的舉措。那么，南寧網站建設站長們有疑問了，什么是預加載器？它是如何提升瀏覽器性能的？首先需要了解瀏覽器是如何加載網頁的一個網頁的加載依賴于腳本文件、CSS樣式文件。讓我們看看瀏覽器加載網頁的過程。首先，瀏
預加載器(Pre-loader)可以說是提高瀏覽器性能最重要的舉措。那么，南寧網站建設站長們有疑問了，什么是預加載器？它是如何提升瀏覽器性能的？
首先需要了解瀏覽器是如何加載網頁的
一個網頁的加載依賴于腳本文件、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，直至腳本代碼執行時才可以獲取這類資源。
我曾經遇到過一個通過java script判斷當前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 同樣支持預加載。
我有類似需求，立即定制
