移动元素的最佳方式（性能方面）

我需要水平移动DOM元素。拖动开始于鼠标按下，在移动鼠标移动和上mouseup事件结束移动元素的最佳方式（性能方面）

所有这一切都需要在与它吨动画和东西的网站的情况发生，所以性能是至关重要的。用我现在所拥有的，我确实看到了一些延迟;该元素稍稍移动一下鼠标移动。这样看起来很丑。

所以，基本上我有类似如下：

var offset = 0, startX; 
$('.draggable').on('mousedown', function (e) { 
     startX = e.pageX; 
    }) 
    .on('mouseup', function() { 
     startX = null; 
    }) 
    .on('mousemove', function (e) { 
     if(startX) { 
      newX = e.pageX; 
      offset += newX - startX; 
      startX = newX; 
      this.style['-webkit-transform'] = 'translate(' + offset + 'px)'; 
     } 
    });

（jsfiddle）

我想知道这个代码什么样的变化可以提高性能？

更新：例如，requestAnimationFrame和FPS，它可以帮助吗？

来源

2014-02-25 Jeanluca Scaljeri

我会通过降低jQuery的开始。 – PeeHaa

是真的，虽然我怀疑在这种情况下，我只用它来绑定事件并不重要太多 –

我怀疑你的怀疑是正确的。特别是因为你关心性能。即使2.0正常化你可能不需要的东西。 https://github.com/jquery/jquery/blob/2.1.0-rc1/src/event.js – PeeHaa

不是一个巨大的进步，但你可以这样写：

var offset = 0, startX; 
$('.draggable').on('mousedown', function (e) { 
     startX = e.pageX - offset; 
    }) 
    .on('mouseup', function() { 
     startX = null; 
    }) 
    .on('mousemove', function (e) { 
     if(startX) { 
      offset = e.pageX - startX; 
      this.style['-webkit-transform'] = 'translate(' + offset + 'px)'; 
     } 
    });

fiddle

来源

2014-02-25 22:04:52 vals

Thnx为了改进，至少向前迈进了一步！ –

移动元素的最佳方式（性能方面）

回答

相关问题