1

そのため、z-index を使用して同じサイズの要素のスタックを制御しようとしています。最近、z インデックスを通過するのを避け、できればブラウザーのリフローを回避することでパフォーマンス時間を改善するというアイデアは、代わりに親に追加する順序でレイヤーを並べ替えるというものです。

したがって、すべてのスタック div を保持するコンテナー div と、スタック div を参照する順序を反映するリンク リストがある場合、ユーザー入力に基づいて div を並べ替えます。次に、z インデックスを更新する代わりに、div 要素を再作成し、すべてを順番に追加します。だから、このようなもの：

var from = nodeBeforeFrom; // Input
var target = nodeBeforeTarget; // Input
var linkedlist = input; // var linkedlist contains all the stacking divs
linkedlist.moveElement(div1, div2); //Move div1 to after div2
var container = document.createElement('div');

linkedlist.reorder; // 

var cur = linkedlist.first;
while (cur.next) {
  container.appendChild(cur)
  cur = cur.next;
}
document.removeChild(oldContainer);
document.appendChild(container);
// This is meant as pseudocode so forgive an errors in regards to the specifics

だから私の質問は次のとおりです。

  1. これにより、ブラウザーのリフローが n リフローから 1 または 2 (n は div の数) に減少しますか? 私がそれを正しく理解していれば、単一の要素の z-index を変更すると、ブラウザーの再描画またはリフローが発生するはずです。
  2. 2 番目のアプローチは機能し、追加した順序で要素をスタックしますか?
  3. 別のリンクされたリストを作成する必要がないように、DOM の子ノード構造を使用して子ノードを移動する方法はありますか? 現時点で使用できる removeChild および appendChild 関数のみが表示されます。

そして、グラフィックスとhtml5のものにこれを使用することを計画しているので、はい、パフォーマンスが問題です. だから、救えるところは救いたい。

4

1 に答える 1

0

Opera の善良な人々のおかげで、物事をいじったり、いくつかの調査を行ったりした後、私は自分の質問に答えたようです。ブラウザーで非表示/非表示の要素を更新してから、それを DOM ツリーに追加する方が高速です。こちらから確認しました。実際のトリックは、非表示の CSS タグを設定し、表示に影響するすべての操作を実行してから、非表示を true に戻して、ブラウザのリフローを O(n) から合計 2 つに減らすことです。

また、z-indexを回避するこの方法は確かに機能します。残念ながら、DOM 要素の childNodes リンク リストにアクセスする方法がまだ見つかりません。ただし、仕様を詳しく見てみると、DOM ノードの childNodes は読み取り専用であることがわかります。これは、あいまいなハックがない限り不可能であることを意味する可能性があります。

于 2012-10-12T17:31:03.397 に答える