性能优化之 PreRender

[barretlee]

认领人须知

• 搞清楚 PreRender 的基本原理
• 了解使用场景

[StevenYuysy]

申请认领

[StevenYuysy]

Resource Hints

现代浏览器利用各种各样的优化探测技术去预测用户的行为和意图，通过对网络传输，处理和渲染的隐藏，从而实现对用户随后的导向进行预链接，资源的预抓取和预渲染。

此规范定义 HTML 链接元素 <link> 的 dns-prefetch，preconnect，prefetch 和 prerender 关系。这些原函数使得开发者以及生成或递送资源的服务器能够在连接源的决策过程中，帮助用户代理提取和预处理资源以提高页面性能。

什么是 Prerender

Pre 属性有四个部分，分别对应加载网页时不同的阶段。

Prerender 是指，在内容下载之后开始渲染。更具体的说，Prerender 通过指定加载某一些必要的资源，让用户代理提取和执行，从而在接下来请求资源的时候，用户代理可以更快的响应。

用户代理可以通过抓取必要的子资源并解析（例如预渲染页面）来对 HTML 的响应进行一个预处理。而什么时候开启预渲染的步骤会由用户处理来决定：

• 分配少量的 CPU，GPU，或者存储资源来预渲染内容
• 在 HTML 资源可见之前延迟一些请求，例如多媒体下载，内嵌内容等等
• 当可用资源有限时防止预渲染的初始化
• 资源消耗过高时丢弃预渲染，例如高 CPU 高内存损耗，昂贵的数据获取等等
• 由于以下获取的内容类型或属性丢弃预渲染：目标指向一个非幂等行为例如除了 GET，HEAD 或者 OPTION 等等之外的 Ajax 请求；目标需要一个确认框，权限控制等等需要用户进行二次操作的指向。
• 上面的处理策略并不是彻底的列表，用户代理也许会实施其他的策略

Prerender 解决了什么问题

• 打开被预渲染的网页速度明显变快
• 配合其他 Pre 标签可完成极致的用户体验

如何使用 Prerender 以及相关的使用场景

基本用法

<link rel="prerender" href="checkout.html"> 

通过在 head 标签允许 prerender 属性即可初始化整个页面的后台预渲染。整个页面及其相关的资源都会被下载

配合 Page Visibility API

页面可见之前，使用 Page Visibility API 推迟 JS 行为。例如 Google Analysis。

根据用户的行为插入预渲染行为

var hint = document.createElement('link')
hint.setAttribute('rel', 'prerender')
hint.setAttribute('href', 'next-page.html')
 
document.getElementByTagName('head')[0].appendChild(hint)

注意以下行为

• 只有「安全的」页面才可以被预渲染
• 小心使用 prerender 标签，因为预渲染会使得资源加载过多

兼容性

---

参考：
https://w3c.github.io/resource-hints/#prerender
https://docs.google.com/presentation/d/18zlAdKAxnc51y_kj-6sWLmnjl6TLnaru_WH0LJTjP-o/present?slide=id.p19
http://caniuse.com/#search=prerender

[layue13]

开销上感觉有些不划算