The previous blog post has been introduced through the prefetch pre-load Web pages of resources to improve page loading speed, let's take a look at the page acceleration of the chromium prerendering. Before introducing prerendering, two concepts are introduced:
1.
PLT (page load time) : The user browses the Web page to trigger the browser kernel onpagestarted to onpagefinished that is when the page starts to finish. 2.
pplt (Perceived page load time): User-aware page load times, from user-initiated page loading requests to page rendering. background:June 14, 2011 Google Chrome released to support the new feature prerendering http://blog.chromium.org/2011/06/ prerendering-in-chrome.html. Open this link we can see the Google search results page in the video comparison, using the prefetching effect can immediately display the page. This is a result that everyone will be surprised. So amazing!! Maybe the technicians are more concerned about how Google Chrome does it, and let's explore prerendering implementation together. What is prerendering?Sometimes the site predicts which link the user will click Next, such as a user reading a few pages of news, It is likely that the user will click on the next page to continue the news reading after reading the current page. If the browser can get the next page of resources in advance or the next page of all resources then when the user clicks on the next page, the page can be immediately presented to the user, which is a pretty cool experience. The next page of the user can be displayed immediately, and is implemented through prerendering technology. Prerendering extends the prefetching concept, not only to pre-fetch top-level resources, prerendering pre-prepares all the resources needed for the next page in the background. Prerending behavior is a bit like our open behind (Background open page), when we switch the background page to the foreground can display the page immediately. "Background tab" User is completely invisible, when the user to switch to this background page, the back of the Background tab will be swap to the previous paragraph, so that users can immediately see the page information. with the support of prerendering in the Chrome 17 release, Web front developers can use prerendering to enhance the page experience. Chrome itself will be smart prerendering on the address bar.Trigger prerendering Syntax
<span style= "FONT-SIZE:14PX;" ><link rel= "PreRender" href= "http://www.cmcm.com" > PRERENDERCMCM </link></span>
prerendering triggers much like Firefox's prefetching is also an HTML <link> tag, but Chrome's prerendering does not support Meta-http and Hettp header triggering. when Chrome encounters this tag, it records the page and generates a background page at a specific time.Browser How to prerendering & prerendering timingprerendering and prefetching a very big difference is, prerendering if you do not want to trigger the page, Chrome will help you at the right time to trigger, such as Chrome's smart Address bar. Support Prerendering Browser will be in the HTML parse phase when the discovery tag contains "PreRender" will create Prerenderhandler, and add tasks to Prerenderdispatcher, Prerenderdispatcher sends a message to the main process to add the task to the PreRender task list.
using prerendering limits and switchesIn order to prevent outdated data and waste of resources, chrome to the PreRender page set the validity period, when the background page is created, 30ms is not used, it will discard the background page, the validity period in the later version of the chrome may change. Here are some scenarios where prerendering cannot be triggered:1) Initialize the download2) video, audio page3) Xmlphttprequests's Post,put,delete4) HTTP authentication5) HTTPS page6) Pop window7) Large pages need to load a lot of resources8) in development modeTest if your browser supports prerendering prerender-testIf you want to detect if your site is being PreRender, the Page Visibility API provides a convenient way to detect if your site is PreRender. As mentioned earlier, Chrome will be prerender on the address bar, and Chrome also provides a switch to let users choose whether to turn on this feature. Turn off this function to enter from the address bar
--prerender-from-omnibox=disabled.detects if a webpage is being PreRender1) Open Chrome Task Manager (three dots toolbar in the top right corner of Chrome browser---> Tools---> Task Manager)2) Load a page that contains PreRender3) In Chrome Task Manager, if you see a task that starts with PreRender, your page is being prerender.
PreRender Performance Testtest Environment:Xiaomi 2Android 4.1.1Chrome Browser
| Site/page Load Time |
Enable prerendering |
None prerendering |
Improve (%) |
| Www.cmcm.com |
Instant page |
9470 |
100 |
| Www.taobao.com |
Instant page |
1112 |
100 |
The realization of Prerender in chromiumprerendering include <link rel= "PreRender" > elements when parsing a Web page will trigger prerendering. The background page is created to prerendered the URL, and the background page loads all the resources, including the executable JavaScript. When a user accesses the Prerendered page, the background page is swap to the foreground. Let's take a look at the chromium PreRender process.
kernel parsing HTML will trigger Htmllinkelement Parseattribute method, if the page contains <link rel= "PreRender" > will record the status, in the process () Method calls Linkload--->loadlink method to create Prerenderhandle objects, in chromium these are all done in the render process, chromium PreRender management is in the main process, The Prerenderhandle object then sends a request Prerenderhostmsg_addlinkrelprerenderto the main process, Send the link-related information to the main process to join the Prerendermanager management list. < Span style= "font-family:helvetica,arial, ' Droid Sans ', Sans-serif; font-size:14px; line-height:19.9999942779541px "> When chromium main process receives prerenderhostmsg_addlinkrelprerender, it detects whether there are currently too many rendering processes, and if the same task is already in progress, do not handle it. Conversely, the received URL will be PreRender, on Android due to limited resource constraints will re-use the prerendering process, in order to reclaim resources chromium will start a timer here to destroy the unused PreRender Background page. In the CHROMIUM35 version, the timer time is 1000 milliseconds (ms) in the early chromium implementation is 30ms, of course, this value will change in the future. < Span style= "font-family:helvetica,arial, ' Droid Sans ', Sans-serif; font-size:14px; line-height:19.9999942779541px "> Related code path: Third_party/webkit/source/core/html/linkrelattribute.cpp: Responsible for parsing the Web page tags and set the attribute state, "PreRender" in this analysis
./third_party/webkit/source/core/loader/linkloader.cpp: Responsible for managing connection resource loading, creating maintenance Prerenderhandle objects
Third_party/webkit/source/core/html/htmllinkelement.cpp: Responsible for parsing HTML link information
CHROME/BROWSER/PRERENDER/PRERENDER_MANAGER.CC: Responsible for managing PreRender, triggering start, end, Discard, cancel
chrome/browser/prerender/prerender_message_filter.cc: Responsible for PreRender related message scheduling processing
Third_party/webkit/source/core/loader/prerenderhandle.cpp: Responsible for PreRender's processing base unit, maintaining a PreRender task's underlying information including the URL, Detach Status
Reference Address: Http://www.chromium.org/developers/design-documents/prerender
Https://developers.google.com/chrome/whitepapers/prerender?hl=zh-CN
Reprint please explain the source, thank you! Welcome to explore together.
http://blog.csdn.net/typename/article/details/38536167 powered by Miechal Zhao.
< Span style= "font-family:helvetica,arial, ' Droid Sans ', Sans-serif; font-size:14px; line-height:19.9999942779541px ">
