預加載器(pre-loader)可以說是提高瀏覽器性能最重要的舉措。Mozilla官方發(fā)布數(shù)據(jù)，通過預加載器技術網(wǎng)頁的加載性能提升了19%，Chrome測試了Alexa排名前2000名網(wǎng)站，性能有20%的提升。

成都創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設、高性價比襄陽網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式襄陽網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設找我們，業(yè)務覆蓋襄陽地區(qū)。費用合理售后完善，10余年實體公司更值得信賴。

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

首先需要了解瀏覽器是如何加載網(wǎng)頁的

一個網(wǎng)頁的加載依賴于腳本文件、CSS樣式文件。讓我們看看瀏覽器加載網(wǎng)頁的過程。

首先，瀏覽器下載HTML并開始解析。如果瀏覽器發(fā)現(xiàn)外部CSS資源鏈接則發(fā)送下載請求。瀏覽器可以在下載CSS資源的同時，并行解析HTML文件，但是，一旦發(fā)現(xiàn)有腳本文件的引用，則必須等待腳本文件完成下載并且執(zhí)行后才能繼續(xù)解析。腳本文件完成下載并且執(zhí)行后，瀏覽器可以繼續(xù)解析HTML工作，如果遇到非阻塞資源i.e.圖片瀏覽器會發(fā)送下載請求并且繼續(xù)解析。

即使瀏覽器可以并行執(zhí)行多個請求，但是無法與針對腳本文件的操作并行執(zhí)行。

可以通過IE7打開鏈接中的網(wǎng)頁進行測試。我們可以看到，網(wǎng)頁head標簽內(nèi)包含2個樣式文件和2個腳本文件。在body中，包含3個圖片、1個腳本文件。

通過瀑布流我們可以查看資源加載的過程：

腳本文件的下載和執(zhí)行，會阻斷其他資源文件的下載，無疑將大大降低瀏覽器性能。

預加載器如何提高網(wǎng)絡利用率

2008年，IE、WebKit和Mozilla都實現(xiàn)了預加載器功能，來提升網(wǎng)絡的利用率，改善腳本文件對其他資源文件的阻塞現(xiàn)狀。

當瀏覽器被腳本文件阻塞時，另一個輕量級的解析器會繼續(xù)瀏覽剩余的標記，尋找需要下載的資源i.e.樣式文件，腳本文件，圖片等。

一旦發(fā)現(xiàn)，預加載器既可以在后臺開始接收這些資源，等待主解析器完成當前的腳本操作，其他資源已經(jīng)完成下載，這樣就減輕了腳本阻塞帶來的性能損耗。

下面這個瀑布流是使用IE8打開鏈接中網(wǎng)頁的結果，性能有顯著的提升：IE8=7S>IE7=14S。

預加載功能仍然是各大瀏覽器廠商樂此不疲的實驗領域。很多瀏覽器嘗試設置資源下載的優(yōu)先級。例如，Safari降低了不作用于當前視圖區(qū)域樣式文件的優(yōu)先級。Chrome則設置腳本文件的優(yōu)先級高于圖片，即使腳本文件位于HTML底部。

預加載器的陷阱

預加載器只能檢索HTML標簽中的URL，無法檢測到使用腳本代碼添加的URL，直至腳本代碼執(zhí)行時才可以獲取這類資源。

我曾經(jīng)遇到過一個通過javascript判斷當前Window寬度，進而決策加載CSS樣式文件的例子。預加載器無法識別此類資源。

<script>

varfile=window.innerWidth<1000?"mobile.css":"desktop.css";

document.write('

href="css/'+file+'"/>');</script>

上面這段代碼可以輕松的騙過IE9的預加載機制，在下面的瀑布流中我們可以看到，加載圖片占用了所有的連接，直至第一個圖片加載完成后，CSS文件才開始下載。

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

當前，有幾種方式來控制預加載器的加載順序（使用javacript隱藏資源文件既是其中一種），同時，W3CResourcepriorities中也提供兩個特性來影響預加載器。

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

postpone:資源在對最終用戶可見之后才開始下載。i.e.標簽的display屬性被設置為none。

預加載VS預讀取

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

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

Chrome允許我們預先通知瀏覽器加載未來會用到的資源，被聲明的資源將以較高的優(yōu)先級被下載

(Chromium源碼中提到，被標記為subresource的資源下載的優(yōu)先級低于樣式文件和腳本文件，但不低于圖片加載優(yōu)先級)

還有標記可以通知瀏覽器哪些文件是較低級別的預讀取文件。

預讀取未來將被使用的獨立資源文件。

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

總結

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

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

IE8/9/10

Firefox

Chrome(incAndroid)

Safari(inciOS)

Android2.3

bruceLawson(Opera公司總裁)也宣布OperaMini同樣支持預加載。

網(wǎng)頁名稱：如何通過預加載器提升網(wǎng)頁加載速度
本文路徑：http://chinadenli.net/article44/sccsee.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供企業(yè)建站、關鍵詞優(yōu)化、網(wǎng)站建設、建站公司、網(wǎng)頁設計公司、網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)