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

我需要水平移動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爲了改進，至少向前邁進了一步！ –

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

回答

相關問題