Проблемы с производительностью jQuery UI при использовании нескольких виджетов

Question

Я создаю веб-приложение, которое позволяет пользователям манипулировать изображениями, изменяя их размеры и перемещая их в рабочем пространстве.В настоящее время я достигаю этого с помощью виджетов Draggable и Resizable пользовательского интерфейса jQuery.Каждый раз, когда пользователь добавляет новое изображение в рабочую область, я перезапускаю следующий код, если есть более эффективный способ сделать это, что я хотел бы знать.

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 перетаскиваемыми и изменяемыми размерами виджетов таким образом, чтобы обеспечить оптимальную производительность?

Если я оставил какую-либо информацию или вам требуется дополнительная информация о моей реализации, пожалуйста,просто спросите.

Заранее спасибо, Даниэль

Answer 1

Я не вижу ничего, что вызывает проблемы со скоростью в опубликованном коде, я думаю, что это в коде, который не опубликован.Я подозреваю, что это связано с событием.Может быть, jsFiddle , который показывает, что проблема может помочь, или некоторая разметка плюс код, где вы создаете селектор для слоев и объектов изображений.Вот некоторые моменты, которые, как я узнал, влияют на производительность в отношении jQuery и пользовательского интерфейса:

• Привязывайте к событиям перемещения мыши только в том случае, если вам это действительно нужно, отменяйте привязку, как только она вам больше не нужна (этодействительно для всех видов событий)
• jQuery UI виджеты должны быть уничтожены, когда они больше не используются.Это автоматически выполняется при удалении его из DOM с помощью .remove ()
• Включенный Firebug может сильно замедлить JS

Надеюсь, это приведет вас к ошибке.