移動前端效能最佳化

標籤：

       最近和同事一起做了一個分享會，主題是移動前端效能最佳化，主要分享一些提供移動頁面載入速度的方法。分享的主題是同事想的，講解的內容也是同事提供的，我負責講，對於我而已，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                    }            }        })

 

移動前端效能最佳化