webApp用户体验优化——quickClick

前言

近期对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 ^_^ 欢迎交流