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

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

背景：

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

什么是prerendering ?

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

觸發(fā)prerendering語法

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

瀏覽器如何prerendering & prerendering時機(jī)

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

使用prerendering 限制與開關(guān)

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

探測一個網(wǎng)頁是否正在被prerender

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

Prerender性能測試

測試環(huán)境： 小米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中的實(shí)現(xiàn)

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


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

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。