日韩黑丝制服一区视频播放|日韩欧美人妻丝袜视频在线观看|九九影院一级蜜桃|亚洲中文在线导航|青草草视频在线观看|婷婷五月色伊人网站|日本一区二区在线|国产AV一二三四区毛片|正在播放久草视频|亚洲色图精品一区

搜索
分享

通過預(yù)加載器提升網(wǎng)頁加載速度

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

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

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

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

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

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

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

通過預(yù)加載器提升網(wǎng)頁加載速度

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

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

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

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

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

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

通過預(yù)加載器提升網(wǎng)頁加載速度

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

　預(yù)加載器的陷阱

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

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

<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的預(yù)加載機(jī)制，在下面的瀑布流中我們可以看到，加載圖片占用了所有的連接，直至第一個圖片加載完成后，CSS文件才開始下載。

通過預(yù)加載器提升網(wǎng)頁加載速度

　影響預(yù)加載器的加載順序的因素

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

　　lazyload : 直至沒有被標(biāo)記為lazyload 資源下載完畢后才下載被標(biāo)記資源。

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

　預(yù)加載VS預(yù)讀取

　　預(yù)讀?。≒re-fetching）可以通知瀏覽器哪些資源可能會在未來的某一時機(jī)，在當(dāng)前頁面或者其他頁面中使用。

　　下面是預(yù)讀取的一個簡單的應(yīng)用，通知瀏覽器為將要訪問的其他站點(diǎn)加載資源：

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

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

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

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

　　還有標(biāo)記可以通知瀏覽器哪些文件是較低級別的預(yù)讀取文件。

　　預(yù)讀取未來將被使用的獨(dú)立資源文件。

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

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

<link rel="prerender" >

　總結(jié)

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

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

　　Bruce Lawson（Opera公司總裁）也宣布Opera Mini 同樣支持預(yù)加載。

    本站是提供個人知識管理的網(wǎng)絡(luò)存儲空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn)。請注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購買等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請點(diǎn)擊一鍵舉報。
    轉(zhuǎn)藏 分享 獻(xiàn)花（0）

    0條評論

    發(fā)表

    請遵守用戶 評論公約

    類似文章 更多