移动前端性能优化

       最近和同事一起做了一个分享会，主题是移动前端性能优化，主要分享一些提供移动页面加载速度的方法。分享的主题是同事想的，讲解的内容也是同事提供的，我负责讲，对于我而已，2个的难度是一样的，让我找分享的内容，我觉得自己的墨水实在很少，分什么可以分享给大家的，让我讲，我胆子小，容易紧张，但是不管如果，轮到了就要承受，回想起来，还是有点忐忑，向来羡慕那些稳如泰山，充满自信，演讲得头头是道的人，很抱歉，我不是这类人，希望下次我能进步点吧。

       如下图，页面加载的4个阶段都可以进行相应的优化。

       

        我讲了预加载，按需加载，使用css3动画，压缩图片和事件代理，个人觉得，压缩图片使用tinypng真的很方便，而且图片的清晰度几乎没什么改变，事件代理是个好东西，目前为止我还没使用过，接下来，会慢慢尝试使用。各个方法的优缺点如下：

方法	优点	缺点
预加载	loading过后体验流畅	提高用户等待时间，容易造成用户流失
按需加载	加快首屏显示速度，降低总体流量	开发成本相对大，可能导致大量重绘，性能低下
动画加速	体验流畅	内存开销大
图片压缩	降低总体流量	画质降低
事件代理	性能提升，降低崩溃风险， DOM更新后无须重新绑定事件	事件均在冒泡阶段触发，不适合某些需求

        下面举一个利用了事件代理和swipe的例子：

var touchObj={};
        window.addEventListener("touchstart",function(e){
            touchObj.isTap=true;
            touchObj.isSwipe=false;
            touchObj.sx=e.touches[0].pageX;
            touchObj.sy=e.touches[0].pageY;
        })
        window.addEventListener("touchmove",function(e){
            touchObj.isTap=false;
            touchObj.nx=e.touches[0].pageX;
            touchObj.ny=e.touches[0].pageY;
            var deltaY=touchObj.ny-touchObj.sy;
            if(deltaY>0){
                // swipe down
                // do something
                touchObj.isSwipe=true;
                e.preventDefault();
            } else if(deltaY<0){
                // swipe up
                // do something
                touchObj.isSwipe=true;
                e.preventDefault();
            }

        })
        window.addEventListener("touchend",function(e){
            if(!touchObj.isTap || touchObj.isSwipe) return;
            var that=e.target;
            switch(that.id){
                case "a":
                    // do something
                    break;
                case "b":
                    // do something
                    break;
                default:
                    if(that.classList.contains("someClass")){
                        // do something
                    }
            }
        })