Page Acceleration Chromium pre-loading prerendering

The previous blog post has been introduced through the prefetch pre-loaded pages of resources to improve page loading speed, the following we look at the page acceleration chromium prerendering. Before you introduce prerendering, you'll introduce two concepts:

1. PLT (page load time) : The user browses the Web page triggers the browser kernel onpagestarted to onpagefinished that is when the Web page starts to complete. 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 announces support for 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. Such a result would be a surprise to everyone. So amazing!!

Maybe technicians are more concerned about how Google Chrome does it. Here we come together to explore prerendering implementation. What is prerendering? Sometimes the site will predict which link the user will point to next, for example, the user is reading a few pages of news, It is very likely that the user will click on the next page to continue the news reading after reading the current page. The browser assumes that you 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 will appear immediately before the user. It's a pretty cool experience.

The next page of the user can be displayed immediately by prerendering technology.

Prerendering extends the prefetching concept, not only pre-fetching top-level resources, prerendering will pre-prepare all the resources needed for the next page in the background. Prerending behaves a bit like our open behind (Background open page). When we switch the background page to the foreground, we can display the webpage immediately. The "Background tab" user is completely invisible when the user wants to switch to this background page. The Background tab in the back will be swap to the previous paragraph so that the user can immediately see the page information.  the chrome 17 version starts with support for prerendering. Page front-end developers can use prerendering to enhance the page experience. Chrome itself will be smart prerendering on the address bar itself. Trigger prerendering Syntax

<span style= "FONT-SIZE:14PX;" ><link rel= "PreRender" href= "http://www.cmcm.com" > PRERENDERCMCM </link></span>

Prerendering triggers very much like Firefox's prefetching is also an HTML <link> tag, but Chrome's prerendering does not support Meta-http and hettp Header trigger. when Chrome encounters this tag, it will record the page. and generate a background page at a specific time.Browser How to prerendering & prerendering timingPrerendering and prefetching have a very big difference, prerendering assume you don't want to trigger the page. Chrome will also help you trigger at the right time, for example, in Chrome's smart Address bar. The Support Prerendering browser will create Prerenderhandler when the tag includes "PreRender" in the HTML parse phase. and join the task into the Prerenderdispatcher. Prerenderdispatcher sends a message to the main process to add the task to the PreRender task list.

using prerendering limits and switches to prevent outdated data and wasted resources, chrome sets the expiration date for PreRender pages. When the background page is created, the 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 download 2) video, audio page 3) xmlphttprequests post. Put,delete4) HTTP authentication 5) HTTPS page 6) Pop window7) Large pages need to load very many resources 8) in development mode Test if your browser supports prerendering prerender-test Suppose you want to detect if your site is being PreRender,

HL=ZH-CN ">page Visibility API provides a convenient way to explore whether your site is PreRender.

As mentioned earlier, Chrome will be prerender on the address bar, and Chrome also offers a switch. Let the user choose whether to turn on this feature. Turn off this feature to enter from the address bar--prerender-from-omnibox=disabled.Explore whether 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 includes PreRender3) In Chrome Task Manager, assume that you see a task that starts with PreRender, stating that your page is being prerender.

watermark/2/text/ahr0cdovl2jsb2cuy3nkbi5uzxqvdhlwzw5hbwu=/font/5a6l5l2t/fontsize/400/fill/i0jbqkfcma==/ Dissolve/70/gravity/center ">



PreRender Performance Test test Environment: Xiaomi 2 Android 4.1.1 Chrome 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, which loads all the resources, including the JavaScript that can be run. When the user visits the Prerendered page, the background page will be swap to the foreground.

Let's take a look at the chromium PreRender process.


Span style= "font-size:14px" >      The Parseattribute method that triggers htmllinkelement during parsing of HTML. Assume that the page includes <link rel= "PreRender" > will record the status, call Linkload--->loadlink method in the process () method to create the Prerenderhandle object, In chromium these are finished in the rendering process, chromium PreRender management is in the main process. The Prerenderhandle object then sends a request to the main process prerenderhostmsg_addlinkrelprerender

< Span style= "font-family:helvetica,arial, ' Droid Sans ', Sans-serif; font-size:14px; line-height:19.9999942779541px ">      When chromium main process receives prerenderhostmsg_addlinkrelprerender. Will detect whether there are currently too many rendering processes, assuming that the same task is done and not done, and vice versa will be prerender the received URL. On Android, because of limited resource constraints, the process used by prerendering is reused, and in order to reclaim resources chromium starts a timer to destroy unused PreRender background pages.

In the CHROMIUM35 version number, the timer time is 1000 milliseconds (ms) in the early chromium implementation of which 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 property status. "PreRender" in this analysis
./third_party/webkit/source/core/loader/linkloader.cpp: Responsible for managing connection resource onboarding, 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 URLs, Detach Status

References Address: Http://www.chromium.org/developers/design-documents/prerender
Https://developers.google.com/chrome/whitepapers/prerender?

Hl=zh-cn

Reprint please indicate 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 ">    

Page Acceleration Chromium pre-loading prerendering