`
superisaac
  • 浏览: 62662 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

利用mouseover事件提高链接响应速度

阅读更多
从浏览器访问一个链接的通常步骤是

* 用户将鼠标移到链接上, 此时会发出链接的mouseover事件
* 用户点击链接, 产生click, 然后干等服务响应,因服务器响应速度不同,等待时间也不同。但是大多数情况下会产生用户可感知的延迟, 降低了用户的体验。

那么是否有可供压榨的空间来缩短用户等待时间呢?让我们来分析一下,由于用户是人,人的动作需要时间,mouseover到click中间会有一定的时间间隔,对本人来说,这个时间间隔通常是0.3-0.5秒之间,如果mouseover的时候就开始向服务器请求加载相关数据,就可以使用户可见的响应时间缩短,如果服务器请求响应时间小于人的响应,则可以达到和本地应用一样的响应速度,对于大型网站,这个改进影响还是蛮大的来。

这个应用的典型应该是javascript应用,链接的href应该为"javascript:loadSomthing(...);", 另外链接加一个prefetch属性,为需要prefetch的链接, 以jQuery为例

$(document).delegate('a', 'mouseover', function (evt) {
   var a = $(evt.currentTarget);
   var prefurl = a.attr('prefetch');
   if(prefurl) {
         prefetchUrl(prefurl); // 预先加载url并将结果放入缓存中
   }
});

loadSomthing = function (callback) {
    if (cache and cache.fetch_time < new Date() - 2000) {
   // Cache击中,并且fetch_time在当前时间两秒之内
          callback(cache);
    } else if(fetching) {
          // 如果预加载没有做完,则将callback加入队列,当预加载完成后会调用callback
          fetchQueue.add(callback); 
    } else {
          callback(data);
    }
}


以上是非形式化的伪代码,实际代码可以参见node-fanfou中web版。http://abc.fanfouapps.com/
代码开源在github https://github.com/FanfouAPI/node-fanfou




0
0
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics