歡迎來(lái)到合肥浪訊網(wǎng)絡(luò)科技有限公司官網(wǎng)
咨詢服務(wù)熱線：400-099-8848
咨詢服務(wù)熱線：400-099-8848
電子商務(wù)網(wǎng)站的運(yùn)營(yíng)，我們需要留意什么？ |
| 發(fā)布時(shí)間：2016-07-10 文章來(lái)源： 瀏覽次數(shù)：3192 |
預(yù)加載器(Pre-loader)可以說(shuō)是進(jìn)步瀏覽器機(jī)能最重要的舉措。Mozilla 官方發(fā)布數(shù)據(jù)，通過(guò)預(yù)加載器技術(shù)網(wǎng)頁(yè)的加載機(jī)能晉升了19%，Chrome測(cè)試了 Alexa 排名前2000名網(wǎng)站，機(jī)能有20%的晉升。 它并不是一門新技術(shù)，有人以為只有 Chrome 才具備這個(gè)功能。也有人以為它是有史以來(lái)晉升瀏覽器機(jī)能最有效的方法。假如你第一次接觸預(yù)加載器，也許心中已經(jīng)有了無(wú)數(shù)個(gè)問(wèn)號(hào)。什么是預(yù)加載器？它是如何晉升瀏覽器機(jī)能的？ 首先需要了解瀏覽器是如何加載網(wǎng)頁(yè)的 一個(gè)網(wǎng)頁(yè)的加載依靠于腳本文件、CSS樣式文件。讓我們看看瀏覽器加載網(wǎng)頁(yè)的過(guò)程。 首先，瀏覽器下載 HTML 并開(kāi)始解析。假如瀏覽器發(fā)現(xiàn)外部CSS資源鏈接則發(fā)送下載哀求。 瀏覽器可以在下載CSS資源的同時(shí)，并行解析HTML文件，但是，一旦發(fā)現(xiàn)有腳本文件的引用，則必需等待腳本文件完成下載并且執(zhí)行后才能繼承解析。 腳本文件完成下載并且執(zhí)行后，瀏覽器可以繼承解析HTML工作，假如碰到非梗阻資源 i.e. 圖片瀏覽器會(huì)發(fā)送下載哀求并且繼承解析。即使瀏覽器可以并行執(zhí)行多個(gè)哀求，但是無(wú)法與針對(duì)腳本文件的操縱并行執(zhí)行�？梢酝ㄟ^(guò)IE7打開(kāi)鏈接中的網(wǎng)頁(yè)進(jìn)行測(cè)試。我們可以看到，網(wǎng)頁(yè)head標(biāo)簽內(nèi)包含2個(gè)樣式文件和2個(gè)腳本文件。在body 中，包含3個(gè)圖片、1個(gè)腳本文件。 通過(guò)瀑布流我們可以查看資源加載的過(guò)程：
腳本文件的下載和執(zhí)行，會(huì)阻斷其他資源文件的下載，無(wú)疑將大大降低瀏覽器機(jī)能。 預(yù)加載器如何進(jìn)步網(wǎng)絡(luò)利用率 2008 年，IE、WebKit和Mozilla都實(shí)現(xiàn)了預(yù)加載器功能，來(lái)晉升網(wǎng)絡(luò)的利用率，改善腳本文件對(duì)其他資源文件的梗阻現(xiàn)狀。當(dāng)瀏覽器被腳本文件梗阻時(shí)，另一個(gè)輕量級(jí)的解析器會(huì)繼承瀏覽剩余的標(biāo)記，尋找需要下載的資源i.e. 樣式文件， 腳本文件，圖片 等。一旦發(fā)現(xiàn)，預(yù)加載器既可以在后臺(tái)開(kāi)始接收這些資源，等待主解析器完成當(dāng)前的腳本操縱，其他資源已經(jīng)完成下載，這樣就減輕了腳本梗阻帶來(lái)的機(jī)能損耗。 下面這個(gè)瀑布流是使用IE8打開(kāi)鏈接中網(wǎng)頁(yè)的結(jié)果，機(jī)能有明顯的晉升：IE8=7S > IE7=14S。
預(yù)加載功能仍舊是各大瀏覽器廠商樂(lè)此不疲的實(shí)驗(yàn)領(lǐng)域。良多瀏覽器嘗試設(shè)置資源下載的優(yōu)先級(jí)。例如，Safari降低了不作用于當(dāng)前視圖區(qū)域樣式文件的優(yōu)先級(jí)。Chrome 則設(shè)置腳本文件的優(yōu)先級(jí)高于圖片，即使腳本文件位于HTML底部。 預(yù)加載器的陷阱 預(yù)加載器只能檢索HTML標(biāo)簽中的URL，無(wú)法檢測(cè)到使用腳本代碼添加的URL，直至腳本代碼執(zhí)行時(shí)才可以獲取這類資源。 我曾經(jīng)碰到過(guò)一個(gè)通過(guò)javascript判定當(dāng)前Window寬度，進(jìn)而決議計(jì)劃加載CSS樣式文件的例子。預(yù)加載器無(wú)法識(shí)別此類資源。
上面這段代碼可以輕松的騙過(guò)IE9的預(yù)加載機(jī)制，在下面的瀑布流中我們可以看到，加載圖片占用了所有的連接，直至第一個(gè)圖片加載完成后，CSS文件才開(kāi)始下載。
影響預(yù)加載器的加載順序的因素 當(dāng)前，有幾種方式來(lái)控制預(yù)加載器的加載順序（使用javacript躲藏資源文件既是其中一種），同時(shí)，W3C Resource Priorities 中也提供兩個(gè)特性來(lái)影響預(yù)加載器。 lazyload : 直至沒(méi)有被標(biāo)記為lazyload 資源下載完畢后才下載被標(biāo)記資源。 postpone: 資源在對(duì)終極用戶可見(jiàn)之后才開(kāi)始下載。i.e. 標(biāo)簽的display屬性被設(shè)置為 none。 預(yù)加載VS預(yù)讀取 預(yù)讀�。≒re-fetching）可以通知瀏覽器哪些資源可能會(huì)在未來(lái)的某一時(shí)機(jī)，在當(dāng)前頁(yè)面或者其他頁(yè)面中使用。 下面是預(yù)讀取的一個(gè)簡(jiǎn)樸的應(yīng)用，通知瀏覽器為將要訪問(wèn)的其他站點(diǎn)加載資源：
Chrome答應(yīng)我們預(yù)先通知瀏覽器加載未來(lái)會(huì)用到的資源，被聲明的資源將以較高的優(yōu)先級(jí)被下載
(Chromium 源碼中提到，被標(biāo)記為subresource的資源下載的優(yōu)先級(jí)低于樣式文件和腳本文件，但不低于圖片加載優(yōu)先級(jí))，還有標(biāo)記可以通知瀏覽器哪些文件是較初級(jí)別的預(yù)讀取文件。 預(yù)讀取未來(lái)將被使用的獨(dú)立資源文件。
通過(guò)預(yù)讀取方式，在后臺(tái)渲染整個(gè)頁(yè)面。
總結(jié) 預(yù)加載不是一門新技術(shù)，它對(duì)進(jìn)步瀏覽器機(jī)能具有紀(jì)念意義，我們不需要做任何操縱既可以使用預(yù)加載。它廣泛應(yīng)用，我測(cè)試了以下瀏覽器，都具有預(yù)加載功能：
Bruce Lawson (Opera公司總裁)也公布Opera Mini 同樣支持預(yù)加載。 |
|
