前言

近期对webApp的优化方面下了些功夫。优化的手段用了很多，图片压缩、cdn加速、ajax操作缓存、客户端数据缓存、弹性滑动等，一系列优化工作完成后，webApp的加载速度着实提高了不少，从原先的首屏1.75s到现在的300ms左右，还有稳定性和用户体验也还算可以。不过最让我头疼的是页面上的点击事件总是有200ms~300ms的延迟，这个致命的弱点让webApp始终无法”以假乱真“，不过幸运的是昨天的面试的时候，面试官在这方面上重点提点了我一番，让我瞬间有种茅塞顿开的感觉。简单分享给大家 ^_^

问题呈现

点击”八爱购“按钮，页面会在300ms之后才响应，这样的用户体验是不好。

改进方案

使用zepto框架

说来惭愧，因为我对jQuery用的比较熟练，没有实际使用过zepto，一直以为zepto是jQuery的一个针对移动端的精简版。所以 webApp这个工程搭建的时候选择了2.0版本的jQuery，而没有在类库选择上重视 * _ *，好在现在意识到了这一点。

zepto针对移动端手机有一个特殊的 tap 事件。tap事件和click事件两者都会在点击时触发，但是在手机WEB端，click会有200ms~300ms的延迟，所以请用tap代替click作为点击事件。singleTap和doubleTap 分别代表单次点击和双次点击。

于是乎，开始了风风火火的类库迁移工作，把用jQuery实现的效果都改用zepto来实现。当然这个工作进行到一半就结束了。原因很多，

第一当然是本人对zepto没有很深入的研究，改写过程中出现了这样那样的问题
第二就是 zepto没有fade函数和scrollTop等方法，无法支持产品的这些需求
第三就是”点透“的问题了( 即点击会触发非当前层的点击事件 )。

给jQuery扩展快速响应的事件

重载jQuery的on方法

;(function(){var isTouch = ('ontouchstart' in document.documentElement) ? 'touchstart' : 'click', _on = $.fn.on;$.fn.on = function(){arguments[0] = (arguments[0] === 'click') ? isTouch: arguments[0];return _on.apply(this, arguments); };})();

恩，好暴力，如此一来 on方法还是原来的用法，但如果你on的是click事件，那么在移动平台上会被替换成touchstart以迅速响应操作。但是在实际需求中，这个方案最后也被摒弃了。因为在瀑布流加载中，用户只要碰一下屏幕快速移开后就会触发click事件，这样用户就没发滑动这块区域的屏幕了，这不是我想要的结果——再改！

仿一个on方法的插件方法quickOn

;(function(){var isTouch = ('ontouchstart' in document.documentElement) ? 'touchstart' : 'click';if(!$.fn.quickOn){$.fn.quickOn= function(){arguments[0] = (arguments[0] === 'click') ? isTouch: arguments[0];return $.fn.on.apply(this, arguments);    };}})();

如此一来就实现了分离，根据实际需求进行选择。需要快速响应的地方用quickOn绑定click事件，不需要的地方还是用以前的on方法绑定，这样就友好互不侵犯了。恩，可行~ ^_^

FastClick插件

FastClick 是 FT Labs 专门为解决移动端浏览器 300 毫秒点击延迟问题所开发的一个轻量级的库。简而言之，FastClick 在检测到“touchend”事件的时候，会通过 DOM 自定义事件立即触发一个模拟“click”事件，并把浏览器在 300 毫秒之后真正触发的“click”事件阻止掉。

FastClick 的使用方法非常简单，在 window load 事件之后，在上调FastClick.attach()即可。

window.addEventListener( "load", function() {FastClick.attach( document.body );
}, false );

attach()方法虽可在更具体的元素上调用，直接绑定到上可以确保整个应用都能受益。当 FastClick 检测到当前页面使用了基于标签或者touch-action属性的解决方案时，会静默退出。可以说，这是真正的跨平台方案出来之前一种很好的变通方案。

就目前而言，FastClick 非常实际地解决 300 毫秒点击延迟的问题。唯一的缺点可能也就是该脚本的文件尺寸 (尽管它只有 10kb)。如果你非常在意这点文件大小，可以尝试一下 Filament Group 的 Tappy!，或者 tap.js。两者都相当轻量，能够通过监听tap而非click事件来绕过 300 毫秒延迟。

原理解析

移动设备某个元素上事件执行顺序是：

touchstart -> touchmove -> touchend

PC端 click｛mousedown->mousemove->mouseup｝

click事件在移动设备上虽然会识别但却是最后一个执行的，所以如果不把click事件换成touchstart事件的话，就可能造成延时导致交互上也慢了几拍。所以在移动端最好把click事件换成touchstart事件。

有一种很简单的处理方法：

var handle = function (e) {e.preventDefault(); // 阻止浏览器默认行为alert('fuck world');
}
$('body').on(‘touchstart mousedown’,  handle );

这样在pc端浏览器上面alert只执行一次，触发的事件是mousedown。在ios设备safari浏览器上面alert也只执行一次，触发的事件是touchstart。秘密在于当执行的是touchstart后，preventDefault掉了后面的click就不执行了。这个方法是可行，但是在
早期的Android设备上会有兼容问题。所以就没办法了只能通过判断是否支持touch事件来分别添加事件了。

@ 感兴趣的同学可以访问我们的webApp，线上网址是： http://webapp.baai.com ^_^ 欢迎交流

webApp用户体验优化——quickClick相关推荐

CDN高级技术专家周哲：深度剖析短视频分发过程中的用户体验优化技术点
摘要: 深圳云栖大会已经圆满落幕,在3月29日飞天技术汇-弹性计算.网络和CDN专场中,阿里云CDN高级技术专家周哲为我们带来了<海量短视频极速分发>的主题分享,带领我们从视频内容采集.上 ...
网络产品用户体验优化系列［一］概要
网络产品用户体验优化系列［一］概要很高兴能在这里和大家专门沟通用户体验方面的话题,特别是能够收集大家对网络产品用户体验的反馈,以及网络产品团队在用户体验方面的优化和更新.这个系列我们只谈用户体验. ...
Silverlight用户体验优化
Silverlight用户体验优化在发布Silverlight应用后有一个需要考虑的重要问题是:假如访客没有安装Silverlight,你就需要提供无缝的Silverlight安装体验,使用户体验中 ...
【转载】专家答疑：Silverlight的用户体验优化
原文地址:专家答疑:Silverlight的用户体验优化专家答疑:Silverlight的用户体验优化作者: 博客园, 出处:博客, 责任编辑: 杜飞, 2010-01-29 13:18 在发布S ...
移动端SEO之用户体验优化提升方法
移动端SEO之用户体验优化,前面一篇江西SEO曾庆平讲完了移动站响应式的实现,我们再扩展一下,看看移动端网站还可以在哪些用户体验上面做提升. 1.一键拨号如果需要在移动浏览器中实现一键拨号的功能, ...
如何构建用户体验优化体系？
在前几期的直播中,我们为大家介绍了监控和日志相关的一些内容.监控分为三个阶段,基础监控.应用监控.业务监控.前面我们已经分享了基础监控的部分,今天主要为大家带来用户体验优化的一些分享. 用户体验,是指 ...
深度剖析短视频分发过程中的用户体验优化技术点
2018深圳云栖大会已经圆满落幕,在飞天技术汇-弹性计算.网络和CDN专场中,阿里云CDN高级技术专家周哲为我们带来了<海量短视频极速分发>的主题分享,带领我们从视频内容采集.上传.存储和 ...
注重网站用户体验优化就要避开前方弯道
在网站建设之初,摆在建设人员眼前的就是访问网站用户的用户体验问题,网站建设以网站用户访问体验为基,保证自家网站良好的用户体验自然与其他网站有了优势.但毕竟不是人人都可以拥有这样的优质网站,如果我们的网 ...
三句话不离开用户体验的seo专员到底如何做好用户体验优化？
在网站优化中新人永远在摸索入门而老手还在用数据经验做交谈,相比接触过网站优化的人士都知道,seo专业人士三句话离不开用户体验,连带着自己的气场都高大上了起来.那么用户体验究竟是什么呢?下面我们就针对该 ...
android 8.0 用户体验优化--day02
每当疲惫的时候,那就停下脚步,遥想追逐的远方,恢复力量再上路:每当困惑的时候,那就停下脚步,梳理纷乱的思绪,驱走迷茫再上路:每当痛苦的时候,那就停下脚步,抚摸流血的伤口,擦干眼泪再上路:每当放弃的时候 ...

webApp用户体验优化——quickClick

前言