`
superisaac
  • 浏览: 64636 次
  • 性别: 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
分享到:
评论

相关推荐

    超级链接相册预览

    例如,可以为每个图片链接设置一个`mouseover`事件,当鼠标移过链接时,显示预览图片。 2. **DOM操作**:Document Object Model (DOM)是HTML和XML文档的结构化表示。在JavaScript中,我们可以使用DOM API来获取、...

    仿6room网站图片链接效果

    本案例"仿6room网站图片链接效果"是针对JavaScript技术的一种实际应用,旨在教我们如何利用JavaScript来创建类似6room网站的图片链接交互体验。 首先,6room网站可能是一个展示图片的平台,而这里的“图片链接效果...

    WEB开发 之 jQuery 事件.docx

    总的来说,jQuery事件处理是Web开发中增强用户体验的关键工具,通过合理利用这些功能,开发者可以创建出响应迅速、交互丰富的网站和应用程序。了解并熟练掌握jQuery的事件处理机制,对于提升Web开发效率和代码质量...

    全屏图片广告随机漂浮可点击关闭jQuery特效.zip

    同时,利用事件委托可以减少事件处理器的绑定,提高性能。 6. **响应式设计**:考虑到不同设备的屏幕尺寸,该特效还可能包含了响应式设计,通过检测窗口大小的变化(`resize`事件)来适应不同分辨率的屏幕,确保...

    京东页面JS效果实现,js实现导航条控制,很完整

    - **动画效果**:利用JavaScript可以实现平滑的过渡和动画效果,如滑动、淡入淡出等,使导航条更加吸引人。 4. **360buyleftmenu_jb51net示例** 这个文件名很可能对应的是一个实现左侧滑出式导航条的示例代码。在...

    js 浏览器事件介绍

    在前端开发中,JavaScript作为浏览器端脚本语言,提供了一套丰富的事件模型,用于与用户交互及页面的动态响应。...通过熟练掌握浏览器事件及其使用方法,我们可以显著提升用户界面的响应速度和用户体验。

    鼠标移动到图片上旋转显示大图的jQuery图片特效

    该特效的核心是利用jQuery的mouseover和mouseout事件,以及animate()函数来控制图片的放大和旋转。mouseover事件触发时,图片开始放大并旋转;mouseout事件触发时,图片恢复原状。 二、实现步骤: 1. **引入jQuery...

    js做的非常漂亮的导航

    这时可以使用Ajax(Asynchronous JavaScript and XML)技术,异步地获取并更新导航部分的数据,提高页面加载速度。 八、性能优化 为了提供流畅的用户体验,需要考虑JavaScript性能优化。例如,避免阻塞页面渲染,...

    javascript经典特效---彩色导航条.rar

    【JavaScript经典特效——彩色导航条】是Web前端开发中一种常见的设计元素,它利用JavaScript语言为网站的导航菜单赋予动态效果,提升用户体验。在网页设计中,导航条扮演着至关重要的角色,帮助用户轻松地在各个...

    导航滑动切换菜单网页特效

    通过监听DOM(文档对象模型)的事件,如`mouseover`、`mouseout`或`click`,当这些事件触发时,相应的函数会被调用,改变菜单的状态。例如,使用`.slideToggle()`方法可以实现菜单的平滑展开与收起。 考虑到响应式...

    jQuery scroll图片滚动菜单鼠标移动图片滚动-20130629

    在JavaScript部分,我们导入jQuery库,并编写代码来响应鼠标事件。当鼠标进入菜单区域,可以初始化图片的滚动状态,比如设置初始速度或方向。在`mousemove`事件中,根据鼠标的当前位置计算图片应该移动的距离,然后...

    javascript图片预览

    例如,我们可以监听`click`或`mouseover`事件: ```javascript document.getElementById('imageLink').addEventListener('click', function() { // 处理点击事件的代码 }); ``` 2. `removeEventListener`方法:当...

    JavaScript精美页面导航

    3. **动态加载**:当用户点击某个链接,内容不是立即加载,而是通过Ajax异步请求获取,这样可以提高页面加载速度。XMLHttpRequest或fetch API都可以用于发送网络请求。 4. **触摸友好**:考虑到移动设备的广泛使用...

    jquery实例文档,教程

    这个事件在DOM(文档对象模型)准备就绪时触发,无需等待所有资源完全加载,提高了页面的响应速度。 ```javascript $(document).ready(function(){ // 在这里放置你的代码 }); ``` ### jQuery基本操作示例 1. **...

    jquery实现的tab标签鼠标经过自动切换选项卡特效源码.zip

    其中定义了对Tab标题的事件监听和相应的响应函数。 此外,可能还使用了jQuery的动画效果,如`fadeIn()`和`fadeOut()`,为内容区域的切换添加平滑的过渡。这些动画函数可以控制速度,增加视觉吸引力。 在实际应用中...

    js图片轮播:VCD包装盒个性幻灯片实例源码

    8. **性能优化**:加载大量图片可能会拖慢页面加载速度,因此可以考虑延迟加载(lazy loading),只在图片进入视口时才加载,或使用占位符优化用户体验。 在提供的链接中,你可以找到具体的代码实现和详细解释,...

    仿淘宝网首页导航条效果.rar

    - 使用事件委托(event delegation)降低事件监听器的数量,提高页面加载速度。 在压缩包中的`index.htm`文件应该包含了实际的代码实现,而`说明.htm`可能提供了项目介绍和使用指南。通过分析这些文件,我们可以...

    jquery hover鼠标滑过动画导航条.zip

    3. **JavaScript/jQuery的hover事件**:jQuery提供了hover方法,它可以绑定两个函数,一个对应鼠标进入元素(mouseover)时触发,另一个对应鼠标离开元素(mouseout)时触发。在这个例子中,这两个函数分别用于开始...

    鼠标滑动导航菜单.zip

    3. 编写jQuery代码:监听鼠标事件,如`mouseover`和`mouseout`,根据事件触发相应的CSS类切换,从而启动或停止动画。 这种滑动导航菜单不仅美观,还能有效地节省页面空间,尤其适合响应式设计,能在不同屏幕尺寸下...

    jQuery鼠标悬停导航列表滑动展开菜单代码

    "jQuery鼠标悬停导航列表滑动展开菜单代码"是一个利用jQuery库实现的动态效果,旨在提高用户体验,使得用户在悬停在导航链接上时,相关子菜单能够平滑地滑动展开,而不是突然出现。这个功能在现代网页设计中非常常见...

Global site tag (gtag.js) - Google Analytics