High-performance networks in Google Chrome (iii)

Optimized TCP connection Management with pre-connect

The host name has been pre-parsed, as well as signals from Omnibox and chrome predictor that indicate the user's future operations. Why connect further to the target host and complete the TCP handshake before the user actually initiates the request? This eliminates the delay of another round trip, which can easily save the user hundreds of milliseconds. In fact, this is the TCP pre-connect work. By accessingchrome://dns 就可以看到TCP预连接的使用情况。




First, chrome checks its socket pool for a socket that the target host can reuse, and these sockets will remain in the socket pool for a period of time to conserve TCP handshake time and startup delay (Slow-start penalty). If there is no socket available, the TCP handshake needs to be initiated and then placed in the socket pool. This allows the user to initiate an HTTP request immediately with the socket when the request is initiated.

Open itchrome://net-internals#sockets 就可以看到当前的sockets的状态:

You can see the timeline of each socket: the time of the connection and the agent, the time each packet arrives, and some other information. You can also export these data to facilitate further analysis or to report problems. having good test data is the basis for optimization, and Chrome://net-internals is the information center of the chrome network.  Using preload to optimize resource loading

Chrome supports two threads added to the page's HTML tags to optimize resource loading:

  <link rel="subresource" href="/javascript/myapp.js">  <link rel="prefetch"    href="/images/big.jpeg">

The Subresource (sub-Resource) and prefetch (preload) specified in Rel are very similar. The difference is that if a link specifies rel (relation) as prefetch, it tells the browser that the resource is to be used later on the page. The specified Subresource is used on this page and is expected to be loaded before use. The different semantics of the two make resource loader behave differently. Prefetch has a lower priority, and will only start when the page is loaded. The Subresource will be tried first when parsing out.

Also note that prefetch is part of the HTML5, and Firefox and Chrome can support it. But Subresource can only be used in chrome.

Apply browser prefreshing to optimize resource loading

However, not all Web developers will be willing to join the Subresource relation described above, even if added, but also waiting to receive the main document and resolve the content, this time the cost depends on the response time of the server and the client-server latency, or even thousands of milliseconds spent.

As with the pre-parsing, pre-connection, there is a prefreshing:

• The user initializes a request for a target page.
• Chrome queries Predictor before the child resources of the target page are loaded, initializing a set of DNS pre-resolution, TCP pre-connection and resource prefreshing.
• If the child resource that was previously logged is found in the cache, it is loaded into memory from the disk.
• If it is not or has expired, it is sending a network request.

Until the beginning of 2013, Prefreshing was at an early stage of discussion. If the data results are analyzed, the feature is finally online and we can use it later.

Use pre-render optimized page navigation

Each of the optimizations discussed earlier is used to help reduce the latency that users initiate requests to see page content. How quickly can you bring an instant presentation experience? Based on the user experience data, this time is 100 milliseconds, there is no space for network latency. And within 100 milliseconds, how do you render the page?

You may have this experience: opening multiple tabs at the same time is significantly faster than waiting in a single tab. The browser provides a way for this to be implemented:

  <link rel="prerender" href="http://example.org/index.html">

This is Chrome's pre-rendering (prerendering in chrome)! relative to the "prefetch" of downloading only one resource, "PreRender" causes Chrome to render a page in an invisible tab, Contains all of its child resources. When the user wants to browse it, the tab is cut to the front desk for an instant experience.

You can explore the prerender-test.appspot.com to experience the effect, and then through the chrome://net-internals/#prerender查看下历史记录和预连接页面的状态.
Because pre-rendering consumes both CPU and network resources, it is important to be sure that pre-rendered pages will be used in the case. Google search adds prerender to its results because the first search result is likely to be the next page (also known as Google Instant pages)

You can use pre-render features, but the following restrictions must be kept in mind:

• There can be at most one pre-rendered page in all processes.
• HTTPS and pages with HTTP authentication cannot be pre-rendered.
• Pre-rendering is also not available if a request resource needs to initiate a request that is non-idempotent (non-idempotent,idempotent request is meant to be initiated multiple times and does not result in a negative response from the service) (only a GET request).
• All resources have a low priority.
• The page rendering process uses the lowest CPU priority.
• If you need more than 100MB of memory, you will not be able to use pre-rendering.
• HTML5 multimedia elements are not supported.

Pre-rendering can only be applied to pages that are safe to believe. It is also best to use the page Visibility API at run time to determine if the current page is visible (refer to you should is doing anyway) !

Finally, in a nutshell, Chrome is gradually optimizing the network latency and user experience to make it more and more fast with users!

Ilya Grigorik is a Web performance engineer and developer advocate on the make the Web Fast team at Google, where he spend S his days and nights on making the web fast and driving adoption of performance best practices.
Follow @igrigorik

Finally turned over, in this process still learned a lot of things, but also look forward to the inspiration to everyone. The best effect, of course, is to read the original. Later also strive to update with the author's original text.

Reprint Please specify source: Http://blog.csdn.net/horkychen

Index of this series:

High-performance networking in Google chrome (i)

High-performance networks in Google Chrome (ii)

High-performance networks in Google Chrome (iii)

Full pdf file Download
Original address: http://www.igvita.com/posa/high-performance-networking-in-google-chrome/

from:http://blog.csdn.net/horkychen/article/details/10878489

High-performance networks in Google Chrome (iii)