當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

网页加速之Link prefetching

發布時間：2023/12/18 编程问答 27 豆豆

生活随笔收集整理的這篇文章主要介紹了网页加速之Link prefetching 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

轉載請說明出處 ?http://blog.csdn.net/typename/article/details/38358765 ?powered ?by miechal zhao.?

背景：

? ? ? ?Link Prefetching ?是 HTML 5的一個標準，最早是由Mozilla 發布的一個互聯網標準草案，link prefetching 現在是 W3C和WHATWG關于HTML 5中的一部分。網頁可以嵌入 prefetching 標記，當瀏覽器加載完當前頁面即結束加載網頁，在瀏覽器閑置的時候會觸發prefetching 標記的link，瀏覽器會在后臺靜默prefeching指定的documents，并存儲在cache中。當用戶訪問到prefetched ?documents時， cache中的內容會迅速被使用，加速網頁展現。

觸發Prefetch 語法：

瀏覽器如何Prefetching & Web Developer Prefetching時機:

? ? ? ?前面提到過瀏覽器會在閑置的時機進行prefetching，Firefox在Mosilla1.2中使用nsIWebProgressListener API,我們可以注冊頂層的nsIWebProgress 對象，通過這個我們可以接收到document start & stop 通知，我們可以取上次stop的document和下次document start 的近視閑置值作為一段時間間隔. 當onLoad 觸發處理頂層document 時基本會觸發上一次document stop通知，這是我們開始prefetch 請求時機。如果一個subframe 包含prefetching 標記，瀏覽器prefetching 不會立即開始而是直到top-most frame 及其所有的子frame 完成加載才會被觸發。 ? ? prefetching 是否適合你的站點取決于yourself.下面有幾個建議： (1).當一些列的頁面只是slideshow，加載前后1-3個頁面（前提是這些頁面并不是大頁面) (2).在整個網站至始至終預加載大多數圖片 (3).prefetching 你網站的搜索結果頁

下面我們一起來看一下我們困惑的場景：

1.當用戶點擊一個正在Prefetching的link 瀏覽器是如何做處理的？ ? ? ? 當用戶點擊或者初始化頁面加載， link prefetching 會停止并且所有的prefetch的操作會被丟棄。如果已經prefetch ? ? ? ?document 是下載的一部分，那這部分document會被存儲在cache中提供給服務器發送一個“Accept-Ranges:bytes"請 ? ? 求報頭使用。這個請求報頭會被webservers在觸發靜態內容生成。當用戶實時訪問一個已經prefetched document，保 ? 留部分 document 會被使用 HTTP byte-range 請求提取。 2.當用戶在后臺下載時，link prefetching 會搶帶寬嗎？ ? ? ?yes and no. 如果你使用Mozilla瀏覽器下載， link prefetching 會被delayed直到后臺所有下載完成。舉例來說：你打 ?開幾個tab加載網頁包含prefetching標記，Mozilla會等待所有tab的頁面加載完成后才會記性prefetch 請求。當你使用其 ?他 ?應用程序使用帶寬，那么 prefetch會和其他應用程序競爭。這是個問題瀏覽器會有待改進，這里我們自己瀏覽器也 ?會進 ?行相應改進，比如在網絡閑置情況下才進行prefetch。

使用prefetch的限制與開關：

1. 只有http,https才能使用prefetch， ftp協議不支持prefetch。 2. 只有html的 link標簽支持 prefetch ， <a></a> 等其他標簽不支持。 3. 你可以通過js代碼關閉prefetch?<span style="font-size:18px;">user_pref("network.prefetch", false); </span>但是有個問題是目前雖然提供這個選項，但是大多數瀏覽器對這個選項支持是有問題的，換句話說即使開啟這個選項，也有可能prefetching。 4.測試你的瀏覽器是否支持prefetching?Test Prefetching

Link Prefetching 性能測試

測試環境：小米2: CM Browser Android 4.1.1系統

site/page load time	enable Prefetching	none prefetching	improve(%)
www.cmcm.com	6367	9470	35%
www.taobao.com	871	1112	13%

08-03 17:18:41.299: E/Timer(20970): pageStarted http://www.cmcm.com/ 08-03 17:18:41.399: E/Timer(20970): pageFinished http://www.cmcm.com/ 08-03 17:18:41.419: E/Timer(20970): pageStarted http://www.cmcm.com/en-us/ 08-03 17:18:47.675: E/Timer(20970): pageFinished http://www.cmcm.com/en-us/636708-03 17:20:07.631: E/Timer(21417): pageStarted http://www.cmcm.com/ 08-03 17:20:08.862: E/Timer(21417): pageFinished http://www.cmcm.com/ 08-03 17:20:08.882: E/Timer(21417): pageStarted http://www.cmcm.com/en-us/ 08-03 17:20:17.371: E/Timer(21417): pageFinished http://www.cmcm.com/en-us/9740 ----------------------------------------------------------------------------------------------- 08-03 20:57:55.765: E/Timer(26875): pageStarted http://www.taobao.com/ 08-03 20:57:55.805: E/Timer(26875): pageStarted http://m.taobao.com/?sprefer=sypc00 08-03 20:57:56.877: E/Timer(26875): pageFinished http://m.taobao.com/?sprefer=sypc00111208-03 21:00:45.817: E/Timer(27666): pageStarted http://www.taobao.com/ 08-03 21:00:45.867: E/Timer(27666): pageStarted http://m.taobao.com/?sprefer=sypc00 08-03 21:00:46.688: E/Timer(27666): pageFinished http://m.taobao.com/?sprefer=sypc00871
通過我們自己的瀏覽器測試開啟prefetching可以提高顯著提高頁面的加載速度。

Link Prefetching 在Webkit中實現

在webkit中通過宏LINK_PREFETCH來控制是否支持這個選項。如果我們使用webkit內核不需要這項功能，我們可以通過這個宏disable link prefetch, 這個宏的位置是在 webKit/Source/JavaScriptCore/wtf/Platform.h:#define ENABLE_LINK_PREFETCH 1 下面我們一起看一下link prefetch在webkit當中涉及模塊有哪些. (1).webkit 中的HTML parser (2).webkit 中的loader Prefetch parser/loader 實現交互圖如下：
void HTMLLinkElement::parseMappedAttribute(Attribute* attr) {if (attr->name() == relAttr) {tokenizeRelAttribute(attr->value(), m_relAttribute);process();} else if (attr->name() == hrefAttr) {m_url = document()->completeURL(stripLeadingAndTrailingHTMLSpaces(attr->value()));process();} else if (attr->name() == typeAttr) {m_type = attr->value();process();} else if (attr->name() == mediaAttr) {m_media = attr->value().string().lower();process();} else if (attr->name() == disabledAttr)setDisabledState(!attr->isNull());else if (attr->name() == onbeforeloadAttr)setAttributeEventListener(eventNames().beforeloadEvent, createAttributeEventListener(this, attr)); #if ENABLE(LINK_PREFETCH)else if (attr->name() == onloadAttr)setAttributeEventListener(eventNames().loadEvent, createAttributeEventListener(this, attr));else if (attr->name() == onerrorAttr)setAttributeEventListener(eventNames().errorEvent, createAttributeEventListener(this, attr)); #endifelse {if (attr->name() == titleAttr && m_sheet)m_sheet->setTitle(attr->value());HTMLElement::parseMappedAttribute(attr);} }
void HTMLLinkElement::tokenizeRelAttribute(const AtomicString& rel, RelAttribute& relAttribute) { ... #if ENABLE(LINK_PREFETCH)else if (equalIgnoringCase(*it, "prefetch"))relAttribute.m_isLinkPrefetch = true;else if (equalIgnoringCase(*it, "subresource"))relAttribute.m_isLinkSubresource = true; #endif ... }
void HTMLLinkElement::process() {... #if ENABLE(LINK_PREFETCH)if ((m_relAttribute.m_isLinkPrefetch || m_relAttribute.m_isLinkSubresource) && m_url.isValid() && document()->frame()) {if (!checkBeforeLoadEvent())return;ResourceLoadPriority priority = ResourceLoadPriorityUnresolved;if (m_relAttribute.m_isLinkSubresource)priority = ResourceLoadPriorityLow;m_cachedLinkResource = document()->cachedResourceLoader()->requestLinkResource(m_url, priority);if (m_cachedLinkResource)m_cachedLinkResource->addClient(this);} #endif...}

? ? 解析網頁html的過程中觸發parseMappedAttribute方法解析HTMLLink相關的節點，在tokenizeRelAttribute實現中會解析prefetch標簽并設置標記.process方法請求加載prefetch link 相關資源，并且將任務添加到CacheResource中，當CachedResource返回可以加載resource時，會通知HTMLLinkElement.cpp中 notifyFinished， notifyFinished會啟動一個timer進行資源加載。
轉載請說明出處，謝謝！ ?歡迎共同探討. http://blog.csdn.net/typename/article/details/38358765 ?powered ?by miechal zhao.?

總結

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

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