Background: link prefetching is a standard of HTML 5. It was first published by Mozilla as an Internet standard draft. Link prefetching is now part of W3C and whatwg about HTML 5. The webpage can be embedded with the prefetching tag. When the browser finishes loading the current page, it ends loading the webpage. When the browser is idle, The prefetching tag link will be triggered, and the browser will silently prefeching the specified documents in the background, and stored in the cache. When a user accesses prefetched documents, the content in the cache is quickly used to accelerate web page display. Syntax for triggering prefetch:
<link rel="prefetch" href="http://www.cmcm.com"> prefetch cmcm </link>
HTTP link Syntax:
Link: </images/big.jpeg>; rel=prefetch
HTML meta tag: the specific format is defined in RFC 5988 section 5.
<meta http-equiv="Link" content="</images/big.jpeg>; rel=prefetch">
Browser prefetching & Web Developer prefetching timing: As mentioned earlier, the browser performs prefetching at idle time. Firefox uses the nsiwebprogresslistener API in mosilla1.2, And we can register the top-layer nsiwebprogress object, through this, we can receive the document start & stop notification. We can take the document that was last stopped and the myopia idle value of the next document start as the interval. when onload triggers processing top-level documents, the last document stop notification is triggered. This is the time for us to start prefetch requests. If a subframe contains the prefetching tag, the browser prefetching will not start immediately but will not be triggered until the top-most frame and all its sub-frames are loaded. Whether prefetching is suitable for your site depends on yourself. the following are several suggestions: (1 ). when the pages of some columns are only slideshow, load the first and second pages (provided that these pages are not big pages) (2 ). pre-load most images from the beginning to the end of the entire website (3 ). prefetching the search result page of your website
Next, let's take a look at our confusing scenarios: 1. How do users do this when they click a link browser that is being prefetching? When you click or initialize page loading, link prefetching stops and all prefetch operations are discarded. If the prefetch document has been downloaded, the document will be stored in the cache and provided to the server with an "Accept-ranges: bytes" header for use. This request header is generated by webservers when the static content is triggered. When you access a prefetched document in real time, the reserved part of the document will be extracted using the HTTP byte-range request. 2. will link prefetching grab bandwidth when users download data in the background? Yes and no. If you use the Mozilla Browser to download, link prefetching will be delayed until all the downloads are completed in the background. For example, if you open several tabs to load webpages that contain the prefetching tag, Mozilla will remember the prefetch request only after all tabs are loaded. When you use its own application to use bandwidth, prefetch will compete with other applications. This is a problem that the browser will need to be improved. Here, our browser will also make corresponding improvements, such as prefetch when the network is idle.
Prefetch restrictions and switches: 1. prefetch can be used only for HTTP and https, and prefetch is not supported for FTP. 2. Only HTML link tags support prefetch, and other tags such as <A> </a> are not supported. 3. You can disable prefetch through JS Code
user_pref("network.prefetch", false);However, the problem is that although this option is currently provided, most browsers have problems with this option. In other words, even if this option is enabled, prefetching may also occur. 4. Test whether your browser supports prefetching test prefetching
Link prefetching performance test environment: Xiaomi 2: Cm browserandroid 4.1.1 System
| Site/Page load time |
Enable prefetching |
None prefetching |
Improve (%) |
| Www.cmcm.com |
6367 |
9470 |
65% |
| Www.taobao.com |
871 |
1112 |
87% |
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=sypc0008-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=sypc0008-03 21:00:46.688: E/Timer(27666): pageFinished http://m.taobao.com/?sprefer=sypc00871
Enabling prefetching through our own browser testing can significantly increase the page loading speed.
Reprinted. Please describe the source. Thank you! Welcome to join us.
Http://blog.csdn.net/typename/article/details/38358765 powered by miechal Zhao.
