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

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

       

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

方法	优点	缺点
预加载	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                    }            }        })