View Post

网页加速之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浏览器会在HTML parse阶段当发现tag包括"prerender" 则会创建PrerenderHandler。并加入任务到PrerenderDispatcher中。PrerenderDispatcher会发送一个消息到主进程把任务加到prerender任务列表中。

使用prerendering 限制与开关

为了防止过期数据以及资源浪费，chrome对prerender的页面设置有效期。当后台页面被创建出来后，30ms内没被使用，则会丢弃这个后台页面,这个有效期在后面的chrome版本号有可能会变化。

以下是一些prerendering不能触发的场景：

1) 初始化下载

2) 视频、音频页面

3) XMLPHTTPRequests 的 post。put，delete

4) HTTP 认证

5) HTTPS 页面

6) Pop window

7) 大页面须要载入非常多资源

8) 开发中模式下

測试你的浏览器是否支持prerendering prerender-test

假设你想探測自己的站点是否正在被prerender， Page Visibility API 提供方便的途径来探測你的站点是否正在prerender。

前面提到chrome会在地址栏上进行prerender， chrome也提供开关。让用户选择是否开启这个功能。关闭这个功能能够从地址栏上输入--prerender-from-omnibox=disabled.

探測一个网页是否正在被prerender

1)打开Chrome Task Manager(Chrome浏览器右上角三个点工具栏--->工具--->任务管理器)

2)载入一个包括prerender的页面

3)在Chrome Task Manager中假设看到prerender打头的任务，说明你的页面正在被prerender。

Prerender性能測试

測试环境：

小米2

Android 4.1.1

chrome 浏览器

site/page load time	enable prerendering	none prerendering	improve(%)
www.cmcm.com	instant page	9470	100
www.taobao.com	instant page	1112	100

Prerender 在chromium中的实现

Prerendering 在解析网页过程中包括<link rel="prerender"> elements 则会触发prerendering。后台页面会被创建用来prerendered url，这个后台页面会载入全部资源，包括可运行的javascript。当用户訪问prerendered页面时，后台页面会被swap到前台。

以下我们看一下chromium prerender过程。

内核解析HTML过程中会触发HTMLLinkElement 的parseAttribute方法。假设页面中包括<link rel="prerender"> 会记录状态，在process()方法中调用LinkLoad--->loadLink方法创建PrerenderHandle的对象，在chromium其中这些都是在渲染进程中完毕，chromium的prerender 管理是在主进程中。这时PrerenderHandle对象会向主进程发送一个请求PrerenderHostMsg_AddLinkRelPrerender，把这个link相关的信息发送到主进程增加到prerenderManager管理列表中。

当chromium主进程收到PrerenderHostMsg_AddLinkRelPrerender时。会检測当前是否有过多的渲染进程，假设已经有同样的任务在进行则不做处理，反之就会对接收到的url进行prerender。在android上因为有限的资源限制会重用prerendering使用的process, 为了回收资源chromium会在此启动一个计时器来销毁未被使用的prerender 后台页面。

在chromium35版本号中定时器时间是1000毫秒(ms) 在早期的chromium实现其中是30ms，当然这个数值未来还会发生变化。

cynchanpin