複数のウィジェットを使用する場合のjQuery UIのパフォーマンスの問題

Question

私は、ユーザーがワークスペース内で画像のサイズを変更して移動することで画像を操作できる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個扱う方法はありますか？

私が情報を残しているか、私の実装についての詳細が必要な場合は、尋ねてください。私は投稿のコードでの速度の問題の原因となるものを見ることができない、事前 で

おかげでダニエル

Answer 1

は、私はそれが掲載されていないコードにだと思います。私はイベント関係にあると思う。この問題を示すjsFiddleか、レイヤーとイメージオブジェクトのセレクターを作成するコードに加えて、マークアップに役立つかもしれません。 は、ここで私が学んだいくつかのポイントは、jQueryとUIに関する性能cirticalあります：あなたはもうそれを必要としないよう、あなたが本当に、とすぐにアンバインドする必要がある場合

• のみイベントをMOUSEMOVEに結合する（これが当てはまります実際にはすべての種類のイベント）
• jQuery UIウィジェットは、もはや使用されなくなると破壊されるべきです。 .removeとDOMからそれを削除するときにこれが自動的にアンはFirebugのは、これはあなたが近いエラーをリードJSたくさん

希望が遅くなる場合があり有効

）（行われています。