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

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

1 个答案: