HTML /性能:预呈现多个页面

时间:2014-10-15 16:34:58

标签: html

如果用户将去往的位置有明确的可能方向(例如图库或类似图片),则可能不仅猜测用户下次点击后的位置,还可以预测接下来的5次点击或更多。< / p>

当一个人对多个页面使用“prerender”链接(或对不理解“prerender”的浏览器的“预取”)时,浏览器将下载并呈现所有这些链接,但它会忘记用户之后的数据单击了一个链接,预取/预渲染版本可以使用多长时间?是否有关于该功能的明确文档?

换句话说:“预渲染” - 链接到接下来的5个页面会使网站更快(因为用户可以快速跳过页面)或更慢(因为浏览器在每次点击时不必要地预呈现5页)?

编辑:我现在已经进行了一些测试,如果你只是放入预渲染链接,好像多个prerender-links不会让它更快。

1 个答案:

答案 0 :(得分:8)

好问题, 首先,我们需要明确表示&#34; prerender&#34;和&#34;预取&#34;是两个不同的功能,有许多不同的限制和行为。 这里的一个重大问题是,根据webrowser,它们的行为会略有不同,而且它们经常被误解和误用。

快速概览

预取预取的概念包含在HTML5 spec中,更好地用于加载资源(样式表,js,图片等) - 这是因为它加载到缓存中一个子资源。当预取页面时,浏览器下载(一旦当前页面被完全加载),链接页面的顶层(目标页面中的iframe不会被预取)。预取整个页面可能会导致性能不足。预取的最酷之处在于限制更高 - 预取过程是每个标签(不是webbrowser实例),你可以设置许多预取链接(IE&lt; 9 - Max 10 Links,Mozilla未知)。< / p>

预渲染首先由Chrome提供并由IE11实施稍后 - 当添加到页面时,它将在后台执行链接页面的页面完整加载过程(在隐藏选项卡上) - 您可以通过查看任务管理器(Chrome)来查看它(一旦加载主页面)。 这里的一个重要问题是prerender process是浏览器的每个实例(不是每个标签打开),这意味着如果另一个网站已经打开并触发了这个过程,你的过程可能会被忽略或延迟(这取决于哪个)浏览器)。 另一个有趣的事实是,你只能添加一个&#34; prerender&#34;每页链接,如果你添加更多,它们将被忽略 - 如果你动态加载prerender链接,你需要知道有一个间隔限制问题(500毫秒 - 在Chrome中)。

预渲染扩展了预取的概念。它不是仅下载顶级资源,而是完成向用户显示页面所需的所有工作,而不会在用户点击之前实际显示该页面。预渲染的行为类似于用户在页面上的中间点击(在后台选项卡中打开它)然后切换到该选项卡。但是,在预渲染中,“背景选项卡”对用户完全隐藏,当用户点击时,其内容将无缝交换到用户正在查看的同一选项卡中。从用户的角度来看,页面加载速度比以前快得多。

已知问题和重要说明:

  • 显示页面时可能不会显示某些动画。这可能是因为在后台加载页面时它们已经运行。
  • 计时器可能会产生意想不到的结果。
  • 保留Cookie,缓存内容以及异步操作(如IndexedDB和Web存储)所做的更改。
  • 在某些浏览器中进行私密浏览会禁用预渲染和预取(&#34;隐身&#34;)。
  • 一些浏览器不支持HTTPS链接(IE&gt; 11,gecko&lt; 1.9.1,Chrome赢了&#39; t。)
  • Chrome&amp; IE不支持HTTP Link: header - <meta http-equiv="Link" content="</images/big.jpeg>; rel=prefetch">

预取摘要:

  • 浏览器:是HTML5规范的一部分(较早的IE&lt; 9充当dns-prefetch)。
  • 加载到:作为当前Tab的子资源进入缓存。
  • 限制: IE11中的10个链接(IE10未知,FireFox未知)。
  • 续航时间: 5分钟。
  • 下载深度:仅限顶层(网页)。
  • 链接: HTTP,HTTPS(IE> 10,Gecko&gt; 1.9.1),No&#39;相同的来源&#39;限制。
  • 动态支持。

预渲染摘要:

  • 浏览器:Chrome,IE&gt; 10。
  • 加载到:单独隐藏标签。
  • 限制: 1个链接 - 每个浏览器实例都会触发一个。
  • 续航时间:直到另一个预渲染过程被触发(从任何打开的标签页)。
  • 下载深度:整页加载。
  • 链接:HTTP(HTTPS赢了),No&#39;相同的来源&#39;限制。
  • 动态地:每次更改之间500毫秒。

预取延迟或忽略:

  • 目标网址不是HTTP GET XMLHTTPRequests - 忽略(POST,PUT,DELETE)
  • 使用mozila下载某些内容 - 延迟
  • IE&gt; 9 - 页面上超过10个链接 - 忽略
  • 两个浏览器(Mozila)在带宽上竞争 - 延迟
  • 开发者工具打开 - 忽略
  • 已启用私人模式 - 已忽略
  • 目标网址是文件下载 - 忽略

预渲染已中止或忽略/延迟:

  • 目标网址不是HTTP GET XMLHTTPRequests - 忽略(POST,PUT,DELETE)
  • 正在运行另一个Prerender进程 - 延迟(可忽略)
  • 页面上超过1个链接 - 忽略(仅首先运行)
  • 浏览器正在竞争带宽 - 延迟
  • 开发人员工具或&#39;隐身&#39; - 忽略
  • 目标网址是文件下载 - 已中止
  • 在IE&lt; 10:用户切换到不同的选项卡或浏览器实例 - 中止&amp;擦除
  • 页面中的HTMLAudio或视频 - 已中止
  • 弹出/窗口创建 - 已中止
  • 触发恶意软件警告的页面 - 已中止

更多