利用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); }}