Google Chrome中的高性能网络 (三)
使用预连接优化了TCP连接管理
已经预解析到了主机名,也有了由OmniBox和Chrome Predictor提供信号,预示着用户未来的操作。为什么再进一步连接到目标主机,在用户真正发起请求前完成TCP握手呢?这样就可省掉了另一个往返的延迟,轻易地就能为用户节省到上百毫秒。其实,这就是TCP预连接的工作。 通过访问chrome://dns 就可以看到TCP预连接的使用情况。
首先, Chrome检查它的socket pool里有没有目标主机可以复用的socket, 这些sockets会在socket pool里保留一段时间,以节省TCP握手时间及启动延时(slow-start penalty)。如果没有可用的socket, 就需要发起TCP握手,然后放到socket pool中。这样当用户发起请求时,就可以用这个socket立即发起HTTP请求。
打开 chrome://net-internals#sockets 就可以看到当前的sockets的状态:
使用预加载优化资源加载
Chrome支持在页面的HTML标签中加入的两个线索来优化资源加载:
<link rel="subresource" href="/javascript/myapp.js">
<link rel="prefetch" href="/images/big.jpeg">
在rel中指定的subresource(子资源)和prefetch(预加载)非常相似。不同的是,如果一个link指定rel(relation)为prefetch后,就是告诉浏览器这个资源是稍后的页面中要用到的。而指定为subresource则表示在本页中就会用到,期望能在使用前加载。两者不同的语义让resource loader有不同的行为。prefetch的优先级较低,一般只会在页面加载完成后才会开始。而subresource则会在解析出来时就被尝试优先执行。
还要注意,prefetch是HTML5的一部分,Firefox和Chrome都可以支持。但subresource还只能用在Chrome 中。
应用Browser Prefreshing优化资源加载
不过,并不是所有的Web开发者会愿意加入上面所述的subresource relation, 就算加了,也要等收到主文档并解析出这些内容才行,这段时间开销依赖于服务器的响应时间和客户端与服务器间的延迟时间,甚至要耗去上千毫秒。
和前面的预解析,预连接一样,这里还有一个prefreshing::
- 用户初始化一个目标页面的请求。
- Chrome查询Predictor之前针对目标页面的子资源加载,初始化一组DNS预解析,TCP预连接及资源prefreshing。
- 如是在缓存中发现之前记录的子资源,由从磁盘中加载到内存中。
- 如果没有或者已经过期了,就是发送网络请求。
直到在2013年初, prefreshing还是处于早期的讨论阶段。如果通过数据结果分析,这个功能最终上线了,我们就可以稍晚些时候使用到它了。
使用预渲染优化页面浏览
前面讨论的每个优化都用来帮助减少用户发起请求到看到页面内容的延迟时间。多快才能带来即时呈现的体验呢?基于用户体验数据,这个时间是100毫秒,根本没给网络延迟留什么空间。而在100毫秒内,又怎样渲染页面呢?
大家可能都有这样的体验: 同时开多个页签时会明显快于在一个页签中等待。浏览器为此提供了一个实现方式:
<link rel="prerender" href="http://example.org/index.html">
这就是Chrome的预渲染(prerendering in Chrome)! 相对于只下载一个资源的“prefetch", "prerender"会让Chrome在一个不可见的页签中渲染一个页面,包含了它所有的子资源。当用户要浏览它时,这个页签被切到前台,做到了即时的体验。
你可以使用预渲染特性,但以下限制项一定要牢记:
- 所有的进程中最多只能有一个预渲染页。
- HTTPS和带有HTTP认证的页面不可以预渲染。
- 如果请求资源需要发起非幂等(non-idempotent,idempotent request的意义为发起多次,不会带来服务的负面响应的请求)的请求(只有GET请求)时,预渲染也不可用。
- 所有的资源的优先级都很低。
- 页面渲染进程的使用最低的CPU优先级。
- 如果需要超过100MB的内存,将无法使用预渲染。
- 不支持HTML5多媒体元素。
预渲染只能应用于确信安全的页面。另外JavaScript也最好在运行时使用Page Visibility API 来判断一下当前页是否可见(参考 you should be doing anyway) !
最后,总之,Chrome正逐步优化网络延迟和用户体验,让它随着用户的使用越来越快!

Ilya Grigorik is a web performance engineer and developer advocate on the Make The Web Fast team at Google, where he spends his days and nights on making the web fast and driving adoption of performance best practices.
Follow @igrigorik
[译注]终于翻完了,在这个过程还是学习到不少东西,也期待着对大家有所启发。效果最好,当然还是看原文。以后也争取和作者原文一起更新。
转载请注明出处:http://blog.csdn.net/horkychen
这个系列的索引:
完整的PDF档下载
原文地址: http://www.igvita.com/posa/high-performance-networking-in-google-chrome/
from:http://blog.csdn.net/horkychen/article/details/10878489
Google Chrome中的高性能网络 (三)的更多相关文章
- Google Chrome中的高性能网络(二)
Chrome Predictor的预测功能优化 Chrome会随着使用变得更快. 它这个特性是通过一个单例对象Predictor来实现的.这个对象在浏览器内核进程(Browser Kernel Pro ...
- Google Chrome中的高性能网络(一)
以下内容是"The Performance of Open Source Applications" (POSA)的草稿, 也是The Architecture of Open S ...
- Google Chrome中的高性能网络-[译]《转载》
以下内容是"The Performance of Open Source Applications" (POSA)的草稿, 也是The Architecture of Open S ...
- google chrome中如何删除一条输入网址提示
在google chrome中网站栏输入字母的时候会出现网址的提示,如下图: 之前遇到个问题,不知道之前打错了www.baidu.com为wwww.baidu.com(也会跳转到百度)导致一输入“w” ...
- frameset 在 Google Chrome 中无法隐藏左边栏解决方法!
使用Frameset 框架,发现在IE下, <frameset name="mainDefine" cols="200,10,*" frameborder ...
- 关于 Google Chrome 中的全屏模式和 APP 模式
前言:我一直在纠结这篇文章是否应该归类在「前段开发」的范围内,哈哈! 前段时间做了一个项目,涉及到一个要全屏模式去访问网页的需求,因为 Google Chrome 的效率不错,而且专门为 Chrome ...
- Google Chrome 中安装 PostMan 扩展
简介 PostMan 是调试 HTTP 请求的好工具,也是业界的佼佼者,这对于我们开发 Web Service 提供了很好的调试入口,支持请求认证机制.最关键的是,这个工具提供 Google Chro ...
- 【转载】关于 Google Chrome 中的全屏模式和 APP 模式
[来源于]新浪微博:@阿博 http://www.cnblogs.com/abel/p/3235839.html 全屏模式:kiosk 默认全屏打开一个网页呢,只需要在快捷方式中加上 --kiosk ...
- Ajax请求在IE和Google Chrome中可以响应,在Firefox中无法响应
在工作中碰到这么一个问题,发送ajax请求,在IE和chrome中可以正常的响应,但是在Firefox中无法响应,代码如下: JS代码: function Sure(obj) { var statu ...
随机推荐
- resin的简单介绍和使用
1.resin是一款应用服务器(application server),它自身也包含一款支持Http1.1协议的WEB服务器(web server),它也可以和其他的web服务器一起工作如IIS和Ap ...
- hdu 5056 Boring count
贪心算法.需要计算分别以每个字母结尾的且每个字母出现的次数不超过k的字符串,我们设定一个初始位置s,然后用游标i从头到尾遍历字符串,使用map记录期间各个字母出现的次数,如果以s开头i结尾的字符串满足 ...
- javascript 上传 预览图片 兼容 谷歌 ie
最近的项目要用到这块,但是在网上找了很多资料,很多都是假的,都不行,最后终于找到一个,还是可以兼容主流的,特分享给大家,可以用 <!DOCTYPE html PUBLIC "-//W3 ...
- C# 目录与文件管理
文件读写 学习了一点点希望对以后的学习工作有帮助 在应用程序中基本任务是对数据的操作,这就是对数据进行访问和保存挤兑数据的读写,应用程序访问一个文本文件叫做“读”:对文本文件的内容进行修改后保存这些修 ...
- EasyUI portal自定义小图标,不是用js方式加载
<script src="~/Scripts/jquery.portal.js"></script> <script> $(function ( ...
- delphi xe5 android iny绿色版+最新SDK/NDK安装方法
转自: http://bbs.2ccc.com/topic.asp?topicid=438595 首先感谢iny的绿色版,因为我的精简Win7 32位安装原版镜像4.63G过程正常,但是编译出错,后来 ...
- eclipse中mavean的使用配置
eclipse-jee-neon-R-win32 maven-3.3.9 JDK jdk-8u101-windows-i586 eclipse中配置mavean的步骤就不说了,网上很多教程,也很简单 ...
- 实战中总结出来的CSS常见问题及解决办法
一.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值. 二.同一个的class选择符可以在一个文档中重复出现,而id选择符却只能出现一次.对 一个标签同时使用cla ...
- JavaScript函数调用
1. 调用一个函数将暂停当前函数的执行,传递控制权和参数给新函数. 2. 除了声明时定义的形参,每个函数都有两个附加的参数:this和arguments. 1. this在面向对象编程中很重要,它的值 ...
- Tomacat服务器的安装和配置
一, Tomcat服务器的下载地址(Apache Tomcat的官网): http://tomcat.apache.org/download-70.cgi 这里为了稳定性安装的版本为7.0. 截止目 ...