javascript - 移动元素的最佳方式(性能方面)

Question

我需要水平移动一个 DOM 元素。拖动从 mousedown 开始，在 mousemove 移动并在 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 有什么帮助吗？

Answer 1

不是很大的改进，但是你可以写:

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