大厂Data+Agent 秘籍:腾讯/阿里/字节解析如何提升数据分析智能。 了解详情
写点什么

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

  • 2012-07-06
  • 本文字数:1323 字

    阅读完需:约 4 分钟

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 )关注我们,并与我们的编辑和其他读者朋友交流。

2012-07-06 00:002616
用户头像

发布了 42 篇内容, 共 19.2 次阅读, 收获喜欢 6 次。

关注

评论

发布
暂无评论
发现更多内容

数智为线,经纬中国:新华三勾勒出的山河锦绣

脑极体

转转实时OLAP分析场景技术选型与应用实践

转转技术团队

OLAP

DataEase 做出来好看吗?

搞大屏的小北

数据可视化 大屏可视化 DataEase

极客时间运维进阶训练营第一周作业

独钓寒江

华为云连接CC——让多区域协同办公更高效更稳定

秃头也爱科技

HVML 解释器 PurC 0.9.2 发布;持续演进!

hvmlenvoy

编程语言 解释器 HVML

如何接受或拒绝 Excel 中的修订

在下毛毛雨

C# .net Excel 工作表 跟踪修订

使用DataEase分析销售数据有多方便?

搞大屏的小北

数据可视化 销售数据分析 数据展示

一招搞定小白最头疼的数据大屏配色问题!

搞大屏的小北

色彩匹配 大屏配色

全网首发!华为云UCS正式商用

爱科技的水月

预测式外呼算法模型的深度应用详解

中关村科金

人工智能 大数据 AI 智能

DataEase单点登录之OIDC

搞大屏的小北

keycloak 单点登录 OIDC

让数据说话-中国农业经济发展情况

搞大屏的小北

数据可视化 经济可视化 经济发展

同是弹性公网IP,华为云弹性公网IP的优势有哪些?

秃头也爱科技

vivo 游戏中心低代码平台的提效秘诀

vivo互联网技术

低代码 组件化 配置化 提效

关于佛萨奇系统开发及原力元宇宙2.0佛萨奇系统开发方案

I8O28578624

华为云左少夫:面向分布式云原生 构筑无处不在的云原生基础设施

爱科技的水月

正确理解和使用JAVA中的字符串常量池

JAVA旭阳

Java

南京公安研究院与秒云达成生态合作,携手赋能产业智能化发展

MIAOYUN

智慧公安 生态合作

葡萄酒越贵越好?贾斯特里尼&布鲁克斯刷新你的认知

联营汇聚

拒绝内卷挖掘境外新蓝海,华为云虚拟专用网络VPN有多特别?

爱科技的水月

弹性公网IP支持多产品灵活绑定或解绑,能为企业提供独立公网IP资源!

秃头也爱科技

京东金融APP-新交互技术“虚拟数字人”赋能世界杯主题营销

京东科技开发者

大数据 前端 Web 交互 虚拟人

想做运维审计大屏?用这个工具就对了!

搞大屏的小北

大屏可视化 运维审计 审计大屏

贾斯特里尼&布鲁克斯葡萄酒,历经百年的传世经典

联营汇聚

用品质提升品味,贾斯特里尼&布鲁克斯葡萄酒

联营汇聚

2022-12-26:有一个数组包含0、1、2三种值, 有m次修改机会,第一种将所有连通的1变为0,修改次数-1, 第二种将所有连通的2变为1或0,修改次数-2, 返回m次修改机会的情况下,让最大的0

福大大架构师每日一题

Linux 算法 Shell 福大大

【JVM规范】第三章-Java虚拟机编译

四月

Java JVM

极客时间运维进阶训练营第九周作业

老曹

有序存储对于高性能的意义

陈橘又青

算法

是不是你在找的推特GIF动图下载方法?!支持苹果安卓双系统使用!

frank

twitter 推特视频下载

Chrome运用“预期方法学”提升用户体验_Chrome_晁晓娟_InfoQ精选文章