HTML5可见性API以及页面预渲染

不管是桌面还是Web，减少UI延迟一直是增强用户体验的关键。对于原生应用来说，减少延迟的最佳办法就是解耦UI和控制线程，以避免耗时任务造成UI阻塞，而对于Web，情况有点不同：因为我们的Javascript运行时都是单线程的，我们没法借助额外的线程来降低延迟，而不得不依赖事件驱动的编程模型，甚至更糟，即使运算是在本地进行的，同服务器的一次交互也可以很轻易的就消耗掉几百毫秒。

创新互联建站是一家专业从事网站制作、成都网站设计、网页设计的品牌网络公司。如今是成都地区具影响力的网站设计公司,作为专业的成都网站建设公司,创新互联建站依托强大的技术实力、以及多年的网站运营经验,为您提供专业的成都网站建设、营销型网站建设及网站设计开发服务！

没什么好吃惊的，过去几年我们发明了无数的Javascript UI框架，全都是异步的，全部把精力放在如何降低交互延迟。理论上，这些点子都不错，但是在实际应用中，他们都有各自的副作用，比如这些#!，我想大家一定都写过这种快速消耗客户端CPU及电池寿命的setTimeout代码。

实际上，因为浏览器的虚拟机是一个共享资源，我们都不可避免的要遭遇这样的问题：如果所有应用都融洽相处，那么大家都可以得到最佳体验，但是我们并没有足够的动力去这么做。并且问题是，直到最近我们甚至都没有一个针对这个问题的工具!页面可见性API是第一个针对这个问题的HTML5提案，再加上浏览器的预渲染功能也试图帮助我们减少Web应用的网络延迟——下面就让我们来一探究竟吧!

浏览器预读取 vs 预渲染

渲染一个页面除了页面本身的HTML内容，往往还需要获取几十个额外的资源，如果你看看你的浏览器的debug控制台，就会发现一个页面花10几秒完成渲染是司空见惯的事情，幸运的是，浏览器已经为我们提供了一些手段来让读取更加快速——并行下载，高度优化的渲染引擎，以及对于Javascript执行速度永无停歇的优化，但不管怎么说，这些都还不足以击败“原生体验”。

另外，服务器也可以帮到我们：像SPDY这样的新协议就致力于减少抓取多个资源的网络延迟，并且甚至还可以让服务端自动推送相关的页面资源。但是让我们想想如果你知道用户下一步要点击什么页面，我们是不是可以做点什么?Firefox 3.5就提供了一个预读取API让我们可以通知浏览器预先抓取后续请求可能会用到的资源：

 
 
 
 

  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
Link: ; rel=prefetch 
 
 
 
 

预读取是一个很简单的优化，但是它需要你明确的指定每一个单独的资源，而不是简单的列出下一个可能的被访问的URL，所以很难在用户体验上带来大的改善。

而预渲染就可以很好的解决这个问题：同预读取相比，预渲染不需要指定单个资源，取而代之，浏览器会抓取下一个请求的整个页面并进行预渲染，并且直到你点击那个链接，这个页面都是不可见的，大约1个月前，Webkit已经增加了对预渲染的支持，并且Google也已经发布了Instant Pages的原型(视频需翻墙)：

预渲染的利与弊

就目前来看，预渲染API还存在很大的限制：整个浏览器只能预渲染一个页面，并且每个tab只能向预渲染队列中加入一个页面，并且，预加载整个页面也会增加服务器和客户端的负担，因此你需要确定你真的需要它，举个例子，对于Google Web搜索来说，它的搜索结果页就可以用到预渲染，因为他们可以非常确信你有很大的概率会点击排名第一的搜索结果。

另外，因为我们现在是预先渲染整个页面(HTML,CSS以及JS)，这也会对页面上的交互性内容造成影响，如果你的页面对预渲染一无所知，预先加载的页面可能会白白的浪费我们的CPU，比如向广告服务器发送请求轮换广告页面，而用户实际上根本就看不到这些广告，为了解决这个问题，Webkit也增加了页面可见性API：

 
 
 
 

  
  
  
  
function handleVisibilityChange(){  
  
  
  
  
  if(document.webkitHidden){  
  
  
  
  
    pausePageJavascript();  
  
  
  
  
  }else{  
  
  
  
  
    startPageJavascript();  
  
  
  
  
  }}  
  
  
  
  
 
  
  
  
  
document.addEventListener("webkitvisibilitychange", handleVisibilityChange, false); 
 
 
 
 

webkitHidden属性告诉我们当前页面的状态，这就解决了可见性的问题，并且webkitvisibilitychange事件还为我们提供了另外一个可能：客户端可以很简单的通过这个事件判断当前页面所在tab是否在后台运行，这有什么用呢?想象你的程序如果需要定期轮询服务器去获取更新，有了可见性API，当你的页面进入后台运行时，你就可以很容易的暂停或是降低定时器的触发频率，从而节省客户端和服务器的资源。

最小化网络延迟

预读取以及可见性API都还在开发中，但我们还是很高兴看到有越来越多的客户端工具来帮助web开发者降低网络延迟带来的影响，有了这些API，我们就不需要再依赖异步Javascript，如果你有一个多页面的表单，你就可以在webkit中预先渲染下一页的表单，让客户端可以得到实时响应。

尽管像Chrome这样的浏览器已经对后台运行的Tab做了CPU降权处理，但有个客户端API可以判断程序是在前台还是后台运行总是会有好处，让我们期待Firefox，Opera以及IE也尽快增加这个功能吧!

原文：http://heikezhi.com/2011/07/06/html5-visibility-api-page-pre-rendering/

当前题目：HTML5可见性API以及页面预渲染
网站路径：http://www.gawzjz.com/qtweb2/news38/4888.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联