javascript - 移动元素的最佳方法(性能明智)

我需要水平移动DOM元素。拖动从mousedown开始，在movemove移动并在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可以帮助吗？

最佳答案

没有太大的改进，但是您可以编写：

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