• 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,在选项内去掉“预测网络活动来改进页面载入”的选项即可。

  • 相关阅读:
    [Go] golang http下返回json数据
    [Go] Golang练习项目-邮箱imap网页版客户端工具
    [Go] 提供http服务出现两次请求以及处理favicon.ico
    [Go] 转换编码处理网页显示乱码
    [Go] go转换gbk为utf8
    [Go] golang x.(type) 用法
    [GO] go语言中结构体的三种初始化方式
    [PHP] create_function() 代码注入问题已经被弃用
    [Git] 彻底删除github上的某个文件以及他的提交历史
    [javascript] vuejs的elementui实现父子iframe通信
  • 原文地址:https://www.cnblogs.com/shihao/p/2581207.html
Copyright © 2020-2023  润新知