浏览器端预渲染(Prerendering)

浏览器预渲染(Prerendering),区分服务器端预渲染,它是浏览器的一个功能。

概念

预渲染是Chrome提供给用户的功能,让当前页面加载完成后,自动静默预加载其他页面。比如,在论坛、新闻等页面,可以自动预加载“下一篇”,提升用户浏览后续文章的速度。

原理

Prerendering 会预先在浏览器后台准备下一个页面所须要的全部资源。类似后台打开页面,并且在后台页面切换到前台时能马上显示网页。在移动端,用户体验到的将是,访问一个已经被预加载的页面时,类似弹出一个已加载过的pageview一样的效果。

使用方法

<!-- 标签语法 -->
<link rel="prerender" href="(url)">

<link rel="prerender" href="http://www.apptranz.com">Prerending Page</link>
标签可以放在页面内。
当Chrome解析当前页面DOM时,遇到link标签就会记录这个url,并在特定时机生成后台页面。

关于渲染时机

支持Prerendering浏览器会在HTML Parse阶段当发现tag包括”prerender”,然后创建PrerenderHandler。并加入任务到PrerenderDispatcher中。PrerenderDispatcher会发送一个消息到主进程把任务加到prerender任务列表中。

扩展

以下是一些Prerendering不能触发的场景:
1) 初始化下载
2) 视频、音频页面
3) XMLHttpRequest 的 post, put,delete
4) HTTP 认证
5) HTTPS 页面
6) Pop Window
7) 大页面须要载入非常多资源
8) 开发模式

兼容性

这个功能很早就被chrome支持,但目前只有使用Chromium内核的浏览器支持,并且除了Chrome外,很多基于Chromium的浏览器厂商会禁用预加载功能。这个功能会在未来被Chrome废弃。

参考

Chorme Prerender

发表评论

电子邮件地址不会被公开。 必填项已用*标注