Chrome 运用“预期方法学”提升用户体验

Ilya Grigorik 写了一篇文章详细描述了Chrome 如何使用预期方法学隐藏网络延迟来提升用户体验。

根据 HTTP Archive 发布的统计报告，全球网站网页的平均大小首次超过 1MB（1024KB）大关，网页持续增肥并非是个好消息，特别是对于移动终端。Ilya 提到说 “现在网页的平均页面大小已经增长到 1059KB，平均每页的请求数已经超过了 80 个，包含 js,css, 图片,flash 等各种资源的请求。” 导致网页不断增肥的原因主要是图片（占到平均网页大小的一半）以及第三方脚本如分析、广告和社交分享按钮。但根本原因还在于人们对富媒体和动态内容的贪得无厌；另一个重要原因在于：“网站的所有者希望追踪用户行为，用各种可能 Widget 来诱使用户分享网站内容”，因此各种嵌入脚本也越来越多。 此外从请求的角度，“一个平均的 DNS 查找需要 60 到 120ms, 由于 TCP 握手需要往返时间，这使得在一个请求发出之前会有 100-200ms 的延迟，” 而在无线网络中这样的延迟甚至长达 200-1000ms，这对于移动页面的展现速度的影响更为糟糕。因此，最实实在在的优化方式还是减少请求连接数以及缩小页面的大小。

在众多的浏览器中 Chrome 使用了一个聪明的预期机制来极大地减少了明显的延迟，提升了用户的速度体验。如：“了解网络的拓扑结构，通过浏览的历史数据来预测用户行为和未来的资源请求，包括可以使用 DNS 预取、TCP 预连接等技术。” 例如当用户浏览新闻时，可能会在读完当前新闻后点击下一篇。Chrome 可以提前请求下一篇新闻，这样在用户点击相关链接时网页就会立即显示。

当然，和大部分浏览器缓存访问历史记录一样，Chrome 也可以根据用户的本地历史记录确定最可能访问的 10 个网站并随时可以提前访问。甚至于“当用户在多功能框（omnibox）内开始输入搜索词的时候，就事先推测性地连接到搜索引擎，当用户在输入 URL 的同时，也可以根据已经输入的 URL 部分推测连接到最有可能的站点。” 这样，当用户输入完网址确认时，相关的网站页面也被同时打开，让用户感受到的等待时间非常短，提高了访问速度。

Chrome 还在“解析 HTML 文件之前，先使用一个预加载扫描，对扫描到的资源请求抢先解析和预连接。用户在网页链接上的鼠标悬停等行为也可能会启动一个预取”。

Ilya 还提到一点 “Chrome 支持在文档的开头增加一个使用 rel=dns-prefetch 的链接元素来暗示浏览器预解析该站点的 DNS。 这么做的好处是：如果你知道某个特定的主机的请求将返回一个 3XX 到不同的主机，那么你也可以预先解决，通过 DNS 预取。” 关于 DNS 的优化，可以参考 DNS Prefetching 。

也许上面这些方法并不直接适用于您的应用程序，但可以在你的应用程序中隐藏类似的延迟。正如 Ilya 说，“这虽然是小改善，但积少成多！” 关于浏览器页面优化，可以参考浏览器的加载与页面性能优化。

最后补充一点，对于Chrome 的预渲染、预载入功能固然能够加快速度，但也可能会弄巧成拙，占用过多带宽，对于这一点只需在Chrome 地址栏内输入chrome://settings/advanced，在选项内去掉“预测网络活动来改进页面载入”的选项即可。

给InfoQ 中文站投稿或者参与内容翻译工作，请邮件至 editors@cn.infoq.com 。也欢迎大家通过新浪微博（ @InfoQ ）或者腾讯微博（ @InfoQ ）关注我们，并与我们的编辑和其他读者朋友交流。