网页加速之Chromium 预加载 Prerendering

  前一篇博文已经介绍通过prefetch预先加载网页的资源来提升网页加载速度,下面我们一起来看一下网页加速之chromium prerendering.在介绍prerendering之前,先介绍两个概念:

1.PLT(page load time) :用户浏览网页触发浏览器内核 onPageStarted 到onPageFinished即网页开始到完成的时间。
2.PPLT(perceived page load time):用户可感知的网页加载时间,从用户发起页面加载请求到页面呈现。

背景:

2011年6月14号 Google chrome发布支持新的feature prerendering http://blog.chromium.org/2011/06/prerendering-in-chrome.html.  打开这个链接我们可以看到视频里的Google搜索结果页对比, 使用prefetching 的效果能立即显示出网页. 这种结果相信大家都会感到惊讶. so amazing!!可能技术人员更加关心Google chrome如何做到的,下面我们一起来探秘prerendering实现。

什么是prerendering ?

     有时候网站会预测用户下一步会点哪个链接, 比如用户在阅读有几页新闻,那用户阅读完当前的页面很有可能会点击下一页继续新闻阅读.浏览器如果能提前获取下一页资源或者准好下一页所有资源那么当用户点击下一页时页面能立即呈现到用户面前,这是个相当酷的体验。 用户的下一页能立即显示就是通过prerendering技术实现的。prerendering 扩展prefetching概念, 不仅仅预先获取顶层的资源, prerendering 会预先在后台准备下一个页面所需要的所有资源。Prerending的行为有点像我们open behind(后台打开页面) ,当我们把后台页面切换到前台时能立即显示网页。"background tab" 用户是完全不可见的, 当用户要切换到这个background 页面时, 后面的background tab 会被swap到前段, 这样用户能立即看到网页信息。
     在chrome 17版本开始支持prerendering,  网页前端开发者可以使用prerendering来提升页面体验. chrome本身自己会在地址栏上智能prerendering.

触发prerendering语法

<span style="font-size:14px;"><link rel="prerender" href="http://www.cmcm.com"> prerendercmcm </link></span>

prerendering 触发方式很像firefox的prefetching 也是一个HTML中得<link> tag,但是chrome的 prerendering 不支持 meta-http和 hettp header触发。
当chrome邂逅这个标记时,它会记录这个页面,并在特定时机生成后台页面.

浏览器如何prerendering & prerendering时机

prerendering和prefetching有一点很大不同的是,prerendering如果你网页不想触发,chrome浏览器也会帮你在合适的时机触发,比如chrome的智能地址栏. 支持prerendering浏
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值