1

写真をドラッグして「アート」を作成したり、ドラッグ、ストレッチ、色付けなどができる div を作成したりできるキャンバス領域 (HTML5 とは関係ありません) を含むページがあります。 canvasContainer div. ここで、UNDO オプションを実装したいと思います。私の考えは、

                        canvasBackup$ = $('#canvas').clone();

操作が開始されたとき、たとえばすべての dragStart イベントで、操作の最後に、Ctrl-Z で要求された場合は UNDO が実行されます。

                       $('#canvas').remove();
                       canvasBackup$.appendTo($('#canvasContainer');

私の懸念は、ページが大きくなり、ページの応答性が低下し始めるにつれて、クローンとおそらく追加が少し計算集約的になる可能性があることです。jQueryがクローンを作成する方法に依存すると思います。DOM からセクションを切り離し、単純なメモリ コピーを実行するだけであれば、問題はありません。しかし、多くの計算と構築が行われている場合、問題になる可能性があります。

これがUNDOを実装するための合理的なアプローチであるかどうかについて、誰かが感じていますか?

ありがとう

4

1 に答える 1

1

あなたが行うほとんどすべての DOM 変更は、リフローと呼ばれるものを引き起こします

リフロー中、ブラウザーはすべての要素の位置を再計算します。

DOM に多数の要素と複雑なネスト構造が含まれている場合、リフローに時間がかかり始めます。

DOM への変更の数を最小限に抑えることで、応答性と高速性を維持することができます。

JavaScript 側でClone()は、要素とそれに含まれるすべての要素を複製します。これは、構造が深くなり、含まれる子要素が多いほど、jquery が呼び出された要素の階層を実行するのに時間がかかることを意味します。

大きいほど遅くClone()なります。

于 2013-06-25T09:29:31.117 に答える