使用多个小部件时的 jQuery UI 性能问题答案

【问题标题】：jQuery UI performance issues when using multiple widgets使用多个小部件时的 jQuery UI 性能问题
【发布时间】：2011-06-17 23:32:54
【问题描述】：

我正在创建一个 Web 应用程序，它允许用户通过在工作区中调整图像大小和移动图像来操作图像。目前我通过使用 jQuery UI 的 Draggable 和 Resizable 小部件来实现这一点。每次用户向工作区添加新图像时，我都会重新运行以下代码，如果有更有效的方法，我很想知道。

layers.draggable({
    containment: '#sig_workarea',
    stop: function (event, ui) {
        var id = wizard.findLayer(ui.helper.attr("id"));
        if (id) {
            wizard.layers[id].x = ui.position.left;
            wizard.layers[id].y = ui.position.top;
            wizard.history.setPoint();
        }
    }
});
images.resizable({
    aspectRatio: true,
    containment: "#sig_workarea",
    handles: 'se',
    stop: function (event, ui) {
        var id = wizard.findLayer(ui.helper.attr("id"));
        if (id) {
            wizard.layers[id].height = ui.size.height;
            wizard.layers[id].width = ui.size.width;
            wizard.history.setPoint();
        }
    }
});

我遇到的问题是应用程序运行缓慢，并且在移动图像时移动不是很流畅。我的问题是，有没有办法以提供最佳性能的方式处理大约 10-15 个可拖动和可调整大小的小部件？

如果我遗漏了任何信息，或者您需要有关我的实施的更多详细信息，请尽管询问。

提前致谢丹尼尔

【问题讨论】：

标签： jquery jquery-ui performance

【解决方案1】：

我在发布的代码中看不到任何导致速度问题的东西，我猜它在代码中，没有发布。我怀疑它与事件有关。也许显示问题的jsFiddle 会有所帮助，或者一些标记加上您为图层和图像对象构建选择器的代码。以下是我学到的一些关于 jQuery 和 UI 的性能关键点：

仅在确实需要时才绑定到 mousemove 事件，在不再需要时立即取消绑定（实际上所有类型的事件都是如此）
jQuery UI 小部件在不再使用时应该被销毁。使用 .remove() 将其从 DOM 中移除时会自动完成
启用的 Firebug 可能会大大降低 JS 的速度

希望这能让你更接近错误。

【讨论】：