首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

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

2012-08-25 
利用mouseover事件提高链接响应速度从浏览器访问一个链接的通常步骤是* 用户将鼠标移到链接上, 此时会发出

利用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




热点排行