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的状态:

你可以看到每一个socket的时间轴:连接和代理的时间,每个封包到达的时间,以及其它一些信息。你也可以把这些数据导出,以方便进一步分析或者报告问题。有好的测试数据是优化的基础, chrome://net-internals就是Chrome网络的信息中心。


使用预加载优化资源加载

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在一个不可见的页签中渲染一个页面,包含了它所有的子资源。当用户要浏览它时,这个页签被切到前台,做到了即时的体验。

可以浏览 prerender-test.appspot.com 来体验一下效果,再通过chrome://net-internals/#prerender查看下历史记录和预连接页面的状态。

因为预渲染会同时消耗CPU和网络资源,因些一定要在确信预渲染页面会被使用到情况下才用。Google Search就在它的搜索结果里加入prerender, 因为第一个搜索结果很可能就是下一个页面(也叫作Google
Instant Pages
)

你可以使用预渲染特性,但以下限制项一定要牢记:

  • 所有的进程中最多只能有一个预渲染页。
  • 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

这个系列的索引:

 
Google Chrome中的高性能网络(一)

  Google Chrome中的高性能网络(二)

  Google Chrome中的高性能网络(三)

  完整的PDF档下载
原文地址: http://www.igvita.com/posa/high-performance-networking-in-google-chrome/

时间: 2024-10-25 12:26:22

Google Chrome中的高性能网络 (三)的相关文章

Google Chrome中的高性能网络(一)

以下内容是"The Performance of Open Source Applications" (POSA)的草稿, 也是The Architecture of Open Source Applications的后继者. POSA囊括了一批针对性能的优化和设计,以及开发过程中的性能管理等内容的论文,预计在2013年春天发售[译注:国内有得等了]. By Ilya Grigorik on January 31, 2013 (翻译:Horky [http://blog.csdn.ne

Google Chrome中的高性能网络(二)

Chrome Predictor的预测功能优化 Chrome会随着使用变得更快. 它这个特性是通过一个单例对象Predictor来实现的.这个对象在浏览器内核进程(Browser Kernel Process)中实例化,它唯一的职责就是观察和学习当前网络活动方式,提前预估用户下一步的操作.下面是一个示例: 用户将鼠标停留在一个链接上,就预示着一个用户的偏好以及下一步的浏览行为.这时Chrome就可以提前进行DNS Lookup及TCP握手.用户的点击操作平均需要将近200ms,在这个时间就可能处

详解Google Chrome浏览器(操作篇)(下)

开篇概述      由于最近忙于公司产品的架构与研发,已经三个多月没有写博客了,收到有些朋友的来信,问为什么不及时更新博客内容呢,他们说他们正期待着某些内容.对此,非常抱歉,那么我在此也给各位朋友一些承诺,从即日起,无论再忙,也想办法抽出时间保证每周至少一篇文章.好了,废话不多说了,进入我们的主题吧,<详解Google Chrome浏览器(操作篇)(下)>       建议大家在阅读本篇文章前,先阅读前面写的两篇文章,即详解google Chrome浏览器(理论篇)和详解Google Chro

《21天学通HTML+CSS+JavaScript Web开发(第7版)》——2.3 使用Google Chrome 开发者工具

2.3 使用Google Chrome 开发者工具 下载并安装Google Chrome后,启动它并访问http://getbootstrap.com/.Bootstrap是一个通用的网页框架,将在本书后面讨论.就当前而言,它很有用,因为这个网页的源代码易于理解.在Chrome中,选择菜单"更多工具">"开发者工具",这将打开开发者工具,如图2.4所示[1]. 有一个打开开发者工具的快捷键,在Windows中为Ctrl + Shift + I,在OS X中为C

Google Chrome安装方法与使用技巧

  Google Chrome的特点是简洁.快速.Google Chrome支持多标签浏览,每个标签页面都在独立的"沙箱"内运行,在提高安全性的同时,一个标签页面的崩溃也不会导致其他标签页面被关闭.此外,Google Chrome基于更强大的JavaScript V8引擎,这是当前Web浏览器所无法实现的. Google Chrome网站默认为英文界面,可以直接下载到英文版.选择下拉框中的"简体中文"则跳转到简体中文界面. 图1:选择语言 图2:简体中文的下载页面

五大原因导致 Google 放弃在 Chrome 中使用 Dart 语言

最新发布的 Dart 已经非常接近下版本 Dart 1.9,它加入了众人期待的 Dart 1.9 中的特性,如:异步/等待和 Dart 分析服务器,实际上,发布的时候它并没吸引到众人的眼光.为什么呢?主要是因为 Dart 不是 web 中的主流开发语言.同时也因为这个原因,Google 不会将其集成到 Chrome 浏览器中. 那么,是什么导致 Google 不将 Dart 作为重要的 web 开发语言呢? 主要有下面五个原因: JavaScript 在使用中占有统治地位--JavaScript

PNaCl:Google通过LLVM增强对Chrome中原生应用的支持

作者 Abel Avram ,译者 臧秀涛 发布于 五月 20, 2013 通过支持运行LLVM位码(bitcode),Google增强了对Chrome中原生应用的支持. 在Google I/O 2013大会上,Google宣布了预期加入的PNaCl(Portable NaCl,读作"pinnacle"),继续推进对Chrome中原生应用的支持.PNaCl修改了原来的工具链,与之前为每种目标平台编译C/C++应用不同,现在开发者只需生成一份LLVM位码,之后位码可以由任一Chrome客

小技巧:如何在 Kali Linux 中安装 Google Chrome 浏览器

下载 Google Chrome 首先,使用 wget 命令来下载最新版本的 Google Chrome 的 debian 安装包. # wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb 安装 Google Chrome 在 Kali Linux 安装 Google Chrome 最容易的方法就是使用 gdebi,它会自动帮你下载所有的依赖包. # gdebi google-chrome-

linux中安装Google Chrome浏览器教程

1.下载Google Chrome的安装程序 [root@webserver ~]# wget http://chrome.richardlloyd.org.uk/install_chrome.sh 2.改变权限 [root@webserver ~]# chmod +x install_chrome.sh 3.执行安装程序 [root@webserver ~]# sh install_chrome.sh 注:此步骤需要翻墙,CentOS如何配置VPN可查看CentOS安装PPTP VPN Cli