移动端 touchmove高频事件与requestAnimationFrame的结合优化

这里 我们 讲述 touchmove；touchmove 事件发生很频繁，会比屏幕刷新率快，导致无效的渲染和重绘；

帧数 –显示设备通常的刷新率通常是50~60Hz –1000ms / 60 ≈ 16.6ms（1毫秒的优化意味着 6%的性能提升）

浏览器对每一帧画面的渲染工作需要在16毫秒（1秒 / 60 = 16.66毫秒）之内完成 ；如果超过了这个时间限度，页面的渲染就会出现卡顿效果，也就是常说的jank；我们需要在  正确的时间  做正确的渲染；

 

拖拽的都会写，先上图看看效果；

大概了解一下 Timeline 查看看渲染情况   旧版如下

 

在看看 帧模式 渲染情况；

那些没必要的 move 什么也不需要做；没必要在16.6毫秒内多余的event对象计算；

 

关于帧模式：

 

附上源代码：

function drag(element){  
        
        var startX=0,
            startY=0,
            ticking=false,
            raf,
            doc=document;
            
        element.addEventListener("touchstart",function(e){
             
            
                  var e=e||window.event,
                   touchs = e.touches[0];
                  e.preventDefault();       //低端安卓 touch事件 有的导致touchend事件时效  必须开始 就加   e.preventDefault();
                                           // text a ipnut textarea 几个 等标签除外   
                                            // ，另外自定义移动端touchstart touchend组合的 hover事件，建议不加这个，不然页面无法滚动
                                            //touchmove 开始 就加  不然抖动一下，才能touchmove， 然后才正常 尤其早些的 三星   系列自带浏览器
                                              
               
                   startX=parseInt(touchs.pageX-(element.lefts||0));
                   startY=parseInt(touchs.pageY-(element.tops||0));
                  
                   doc.addEventListener("touchmove",update,false);
                   doc.addEventListener("touchend",end,false);
                            
        },false);
        
        
        
        
        
        var  update=function (e) {
             
               var e=e||window.event;
               if (e.touches.length > 1 || e.scale && e.scale !== 1) return;
                e.preventDefault();
               
               //cancelAnimationFrame(raf);
               if(!ticking) {

               var touchs = e.changedTouches[0];
                   
                 //1先触摸移动  
                    element.lefts = touchs.pageX - startX;
                    element.tops = touchs.pageY - startY;
                   
                 //2交给requestAnimationFrame 更新位置
                //raf=requestAnimationFrame(function(){draw();});
                 raf=requestAnimationFrame(draw);

                }
              
                 ticking = true;
           };
        
         
         
         
         var draw= function  (){       
                  ticking = false;
                  var nowLeft=parseInt(element.lefts);    //滑动的距离             touchmove时候，如果加阻力，可能有细小的抖动；我想应该是移动端 部分支持0.5px的缘故； parseInt的转化有点牵强；
                  var  nowTop=parseInt (element.tops);    //滑动的距离    
                     
                    element.style.webkitTransform=element.style.transform = "translate3D(" + nowLeft + "px," + nowTop + "px,0px)";
                    
              };
                   
        var end=function(){
                     var endLeft= parseInt(element.lefts);    //滑动的距离    
                     var  endTop= parseInt(element.tops);    //滑动的距离
                    
                     //element.style.webkitTransform=element.style.transform = "translate(" + endLeft+ "px," + endTop + "px)"; 
    
                        doc.removeEventListener("touchmove",update,false);
                        doc.removeEventListener("touchend",end,false);
                        // cancelAnimationFrame(raf);
                         
            }
                
     };
     

注意点：RequestAnimationFrame的兼容

;(function(){var lastTime=0;var vendors=["ms","moz","webkit","o"];for(var x=0;x<vendors.length&&!window.requestAnimationFrame;++x){window.requestAnimationFrame=window[vendors[x]+"RequestAnimationFrame"];window.cancelAnimationFrame=window[vendors[x]+"CancelAnimationFrame"]||window[vendors[x]+"CancelRequestAnimationFrame"]}if(!window.requestAnimationFrame){window.requestAnimationFrame=function(callback,element){var currTime=new Date().getTime();var timeToCall=Math.max(0,16-(currTime-lastTime));var id=window.setTimeout(function(){callback(currTime+timeToCall)},timeToCall);lastTime=currTime+timeToCall;return id}}if(!window.cancelAnimationFrame){window.cancelAnimationFrame=function(id){clearTimeout(id)}}}());

RequestAnimationFrame的简易动画库

 requestAnimationFrame 节流函数

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

var  rafThrottle= function (fn){  //touchmove  scroll节流       var  ticking= false ;       var  update= function  () {           ticking =  false ;          fn&&fn.apply( this ,arguments);       }             function  requestTick() {         if (!ticking) {           requestAnimationFrame(update);          }         ticking =  true ;       }       requestTick(); };

　　

 

参考网站：

谷歌开发者，非常专业：https://developers.google.com/web/fundamentals/getting-started/?hl=zh-cn 需要FQ；

Web前端性能优化的微观分析 http://velocity.oreilly.com.cn/2013/ppts/16_ms_optimization--web_front-end_performance_optimization.pdf

移动端性能调优：ttps://speakerdeck.com/baofen14787/yi-dong-duan-xing-neng-diao-you-ji-16msyou-hua

 

总结：做的东西多了，得 整理一下以；

移动端 scroll，touchmove的事件用的还是比较多的；有时间还是要 细细优化的；虽然感觉很微观 ，甚至觉得 优化的几乎看不出来；但是你去优化好，还是费不少时间 的；

requestAnimationFrame是个移动端的利器；动画尽量用它或者除集合css3实现；