? 前一篇博文已經介紹通過prefetch預先加載網頁的資源來提升網頁加載速度，下面我們一起來看一下網頁加速之chromium prerendering.在介紹prerendering之前，先介紹兩個概念：

1.PLT(page load time)?:用戶瀏覽網頁觸發瀏覽器內核 onPageStarted 到onPageFinished即網頁開始到完成的時間。 2.PPLT(perceived page load time):用戶可感知的網頁加載時間，從用戶發起頁面加載請求到頁面呈現。

背景：

2011年6月14號 Google chrome發布支持新的feature prerendering?http://blog.chromium.org/2011/06/prerendering-in-chrome.html. ?打開這個鏈接我們可以看到視頻里的Google搜索結果頁對比， 使用prefetching 的效果能立即顯示出網頁. 這種結果相信大家都會感到驚訝. so amazing！！可能技術人員更加關心Google chrome如何做到的，下面我們一起來探秘prerendering實現。

什么是prerendering ?

? ? ?有時候網站會預測用戶下一步會點哪個鏈接， 比如用戶在閱讀有幾頁新聞，那用戶閱讀完當前的頁面很有可能會點擊下一頁繼續新聞閱讀.瀏覽器如果能提前獲取下一頁資源或者準好下一頁所有資源那么當用戶點擊下一頁時頁面能立即呈現到用戶面前，這是個相當酷的體驗。 用戶的下一頁能立即顯示就是通過prerendering技術實現的。prerendering 擴展prefetching概念， 不僅僅預先獲取頂層的資源， prerendering 會預先在后臺準備下一個頁面所需要的所有資源。Prerending的行為有點像我們open behind(后臺打開頁面) ，當我們把后臺頁面切換到前臺時能立即顯示網頁。"background tab" 用戶是完全不可見的， 當用戶要切換到這個background 頁面時， 后面的background tab 會被swap到前段， 這樣用戶能立即看到網頁信息。 ? ? ?在chrome 17版本開始支持prerendering， ?網頁前端開發者可以使用prerendering來提升頁面體驗. chrome本身自己會在地址欄上智能prerendering.

觸發prerendering語法

<span style="font-size:14px;"><link rel="prerender" href="http://www.cmcm.com"> prerendercmcm </link></span>
prerendering 觸發方式很像firefox的prefetching 也是一個HTML中得<link> tag，但是chrome的 prerendering 不支持 meta-http和 hettp header觸發。 當chrome邂逅這個標記時，它會記錄這個頁面，并在特定時機生成后臺頁面.

瀏覽器如何prerendering & prerendering時機

prerendering和prefetching有一點很大不同的是，prerendering如果你網頁不想觸發，chrome瀏覽器也會幫你在合適的時機觸發，比如chrome的智能地址欄. 支持prerendering瀏覽器會在HTML parse階段當發現tag包含"prerender" 則會創建PrerenderHandler，并添加任務到PrerenderDispatcher中，PrerenderDispatcher會發送一個消息到主進程把任務加到prerender任務列表中。

使用prerendering 限制與開關

為了防止過期數據以及資源浪費，chrome對prerender的頁面設置有效期，當后臺頁面被創建出來后，30ms內沒被使用，則會丟棄這個后臺頁面,這個有效期在后面的chrome版本有可能會變化。 下面是一些prerendering不能觸發的場景： 1) 初始化下載 2) 視頻、音頻頁面 3) XMLPHTTPRequests 的 post，put，delete 4) HTTP 認證 5) HTTPS 頁面 6) Pop window 7) 大頁面需要加載很多資源 8) 開發中模式下 測試你的瀏覽器是否支持prerendering?prerender-test 如果你想探測自己的網站是否正在被prerender，?Page Visibility API?提供方便的途徑來探測你的網站是否正在prerender。 前面提到chrome會在地址欄上進行prerender， chrome也提供開關，讓用戶選擇是否開啟這個功能。關閉這個功能可以從地址欄上輸入--prerender-from-omnibox=disabled.

探測一個網頁是否正在被prerender

1)打開Chrome Task Manager(Chrome瀏覽器右上角三個點工具欄--->工具--->任務管理器) 2)加載一個包含prerender的頁面 3)在Chrome Task Manager中如果看到prerender打頭的任務，說明你的頁面正在被prerender。

Prerender性能測試

測試環境： 小米2 Android 4.1.1 chrome 瀏覽器

site/page load time	enable prerendering	none prerendering	improve(%)
www.cmcm.com	instant page	9470	100
www.taobao.com	instant page	1112	100

Prerender 在chromium中的實現

Prerendering 在解析網頁過程中包含<link rel="prerender"> elements 則會觸發prerendering。后臺頁面會被創建用來prerendered url，這個后臺頁面會加載所有資源，包含可執行的javascript。當用戶訪問prerendered頁面時， ?后臺頁面會被swap到前臺。下面我們看一下chromium prerender過程。


? ? ? 內核解析HTML過程中會觸發HTMLLinkElement 的parseAttribute方法， 如果頁面中包含<link rel="prerender"> 會記錄狀態，在process()方法中調用LinkLoad--->loadLink方法 創建PrerenderHandle的對象，在chromium當中這些都是在渲染進程中完成，chromium的prerender 管理是在主進程中，這時PrerenderHandle對象會向主進程發送一個請求PrerenderHostMsg_AddLinkRelPrerender，把這個link相關的信息發送到主進程加入到prerenderManager管理列表中。 ? ? ? 當chromium主進程收到PrerenderHostMsg_AddLinkRelPrerender時，會檢測當前是否有過多的渲染進程，如果已經有相同的任務在進行則不做處理，反之就會對接收到的url進行prerender，在android上由于有限的資源限制會重用prerendering使用的process, 為了回收資源chromium會在此啟動一個計時器來銷毀未被使用的prerender 后臺頁面。在chromium35版本中定時器時間是1000毫秒(ms) 在早期的chromium實現當中是30ms，當然這個數值未來還會發生變化。 相關代碼路徑： third_party/WebKit/Source/core/html/LinkRelAttribute.cpp ?： 負責解析網頁的tags 并設置屬性狀態，"prerender“ 在此解析
./third_party/WebKit/Source/core/loader/LinkLoader.cpp ?：負責管理連接資源加載，創建維護prerenderHandle對象
third_party/WebKit/Source/core/html/HTMLLinkElement.cpp ： 負責解析HTML鏈接信息
chrome/browser/prerender/prerender_manager.cc ?： 負責管理prerender, 觸發開始，結束，丟棄，取消
chrome/browser/prerender/prerender_message_filter.cc ：負責prerender相關消息的調度處理
third_party/WebKit/Source/core/loader/PrerenderHandle.cpp ：負責Prerender的處理基礎單元，維護一個prerender task的基礎信息包含url, detach狀態

參考資料地址: http://www.chromium.org/developers/design-documents/prerender
https://developers.google.com/chrome/whitepapers/prerender?hl=zh-CN

轉載請說明出處， 謝謝！ ?歡迎共同探討. http://blog.csdn.net/typename/article/details/38536167 ?powered ?by miechal zhao.
? ??

總結

以上是生活随笔為你收集整理的网页加速之Chromium 预加载 Prerendering的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。