電子商務網站的運營,我們需要留意什么? |
發布時間:2016-07-10 文章來源: 瀏覽次數:3176 |
預加載器(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樣式文件的例子。預加載器無法識別此類資源。
上面這段代碼可以輕松的騙過IE9的預加載機制,在下面的瀑布流中我們可以看到,加載圖片占用了所有的連接,直至第一個圖片加載完成后,CSS文件才開始下載。
影響預加載器的加載順序的因素 當前,有幾種方式來控制預加載器的加載順序(使用javacript躲藏資源文件既是其中一種),同時,W3C Resource Priorities 中也提供兩個特性來影響預加載器。 lazyload : 直至沒有被標記為lazyload 資源下載完畢后才下載被標記資源。 postpone: 資源在對終極用戶可見之后才開始下載。i.e. 標簽的display屬性被設置為 none。 預加載VS預讀取 預讀取(Pre-fetching)可以通知瀏覽器哪些資源可能會在未來的某一時機,在當前頁面或者其他頁面中使用。 下面是預讀取的一個簡樸的應用,通知瀏覽器為將要訪問的其他站點加載資源:
Chrome答應我們預先通知瀏覽器加載未來會用到的資源,被聲明的資源將以較高的優先級被下載
(Chromium 源碼中提到,被標記為subresource的資源下載的優先級低于樣式文件和腳本文件,但不低于圖片加載優先級),還有標記可以通知瀏覽器哪些文件是較初級別的預讀取文件。 預讀取未來將被使用的獨立資源文件。
通過預讀取方式,在后臺渲染整個頁面。
總結 預加載不是一門新技術,它對進步瀏覽器機能具有紀念意義,我們不需要做任何操縱既可以使用預加載。它廣泛應用,我測試了以下瀏覽器,都具有預加載功能:
Bruce Lawson (Opera公司總裁)也公布Opera Mini 同樣支持預加載。 |