从浏览器访问一个链接的通常步骤是
* 用户将鼠标移到链接上, 此时会发出链接的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
分享到:
相关推荐
mouseover事件事例,可以让你对mouseover有一定的了解
主要介绍了jQuery中mouseover事件用法,以实例形式分析了mouseover事件处理鼠标指针滑过时的使用技巧,需要的朋友可以参考下
NULL 博文链接:https://yxc-gdut.iteye.com/blog/1409792
鼠标在移入到td上面之后,在td的相对位置浮动出一个div,基于相对位置。 jQuery的mouseover操作div。 使用jQuery获取鼠标所在元素。
最近在做的在线考试和课程商城都遇到这样的问题:就是鼠标滑过的时候...注释:与 mouseenter 事件不同,不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件。只有在鼠标指针穿过被选元素时,才会触发 mouse
停止事件冒泡在各浏览器中已经有相应的解决方案,但是对于mouseover和mouseout却显得力不从心。
利用切割好的圖片組合,及CSS標箋,在不使用javascript條件下完成mouseover放大區域圖片的效果
Mouseover Fade Effect
主要介绍了鼠标经过子元素触发mouseout,mouseover事件的解决方案的相关资料,需要的朋友可以参考下
mouseover时显示滚动字幕 特效
在这种情况下,“ mouseover”和“ mouseout”事件的行为会更改,因此在触发之前会有一定的延迟。 由于我们要更改现有事件而不是创建新事件,因此可以将mouseDelay添加到任何项目中,它将“正常工作”,而不必将...
不知道大家在面试或者工作过程中有没有被 mouseover 和 mouseenter (对应的是 mouseout 和 mouseleave )事件所困扰。自己之前在面试的时候就有被问到诸如mouseover和mouseenter事件的异同之类的问题?当时没有答出来...
经过绑定元素时会多次触发mouseover和mouseout事件,针对这个问题,下面有个不错的解决方法
试了各浏览器的停止事件冒泡的方法,均无效。 还是咱们javaeye里高人众多,在一个哥们博客中发现了如下代码: 代码如下: function isMouseLeaveOrEnter(e, handler) { if (e.type != ‘mouseout’ && e.type != ...
注:jquery中的mouseover/out事件也有此问题 解决方法一: 在ie下有mouseenter 与 mouseleave事件来替代mouseover 和 mouseout。 网上很多说法,这两个事件只有ie支持,其他浏览器不支持。 但是我在最新版本的...
响应某个事件的函数称为事件处理程序,也可称为事件处理函数、事件句柄。鼠标事件即鼠标操作点击图表的图形(如click、dblclick、contextmenu)或hover图表的图形(如mouseover、mouseout、mousemove)时触发的...