移动前端性能优化
最近和同事一起做了一个分享会,主题是移动前端性能优化,主要分享一些提供移动页面加载速度的方法。分享的主题是同事想的,讲解的内容也是同事提供的,我负责讲,对于我而已,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 } } })
欢迎大家来浏览我的博客,如发现我有写错的地方,欢迎交流指正。