0

注：サードパーティのタブシステムを使用することはできませんので、お勧めしないでください。

私のページには、<div>いくつかのタブがあります。各divは複数のタブに属することができます。たとえば、すべてのdivは[すべて]タブに属し、一部のdivは[今日]タブに属し、一部は[明日]タブに属します。

私がやりたいのは、ユーザーが[今日]タブをクリックしたときに、そのタブに属するdivのみを表示したいということです。彼が他のタブをクリックすると、前のタブのdivが非表示になり、選択したタブのdivが表示されます。これまでのところ、かなり標準的なタブ動作です。

ただし、これが異なる場合は、1つのdivを複数のタブ間で共有できます。

新しいタブが選択されるたびに、最後に選択されたタブのすべてのdivをループして非表示にし、現在のタブのdivをループして表示するだけでよいと考えていました。

しかし、もっと効率的でCPUをあまり使わない方法があるのではないかと思います。また、この方法では、一部のdivが非表示になり、最後のタブと現在のタブで共有されている場合は、すぐに再びシャワーが表示されます。（例：div_111はTodayとTomorrowの間で共有できます。ユーザーがTodayをクリックすると、div_111が表示されます。次に、Tomorrowをクリックすると、div_111は最初は非表示になり、その後再び表示されます）。

助言がありますか？

4

1 に答える 1

2

注意したいのは再描画です。要素を追加または削除する場合、ブラウザは、変更がページ上の他のすべての要素にどのように影響するかを把握し、それに応じてすべての要素を再配置/サイズ変更する必要があります。このプロセスは、ほとんどの場合、DOM操作の中で最もコストのかかる部分です。確かに、どの要素がどのタブに入るのかを把握するよりもコストがかかります。

ブラウザは再描画を最適化しようとします。ブラウザはページをできるだけ少なく再描画し、複数の変更を同じ再描画にグループ化する場合があります。ただし、問題は自分の手に委ねることが最善です。追加または削除するノードの数に関係なく、最初にDOMから親ノードを削除し、次にすべての変更を加えてから再追加することにより、再描画が2つ以下であることを確認できます。簡単な例を次に示します。

var container = document.getElementById('container'),
    buffer = document.createDocumentFragment(),
    newNodes = tabs[selection], // an array or object, generated at page load,
                                // containing all divs that show up in this tab
    i, div;
document.body.removeChild(container);
for (i = 0; div = newNodes[i]; i++) {
    buffer.appendChild(div); // if div is in container then it will be
                             // automatically removed
}
container.innerHTML = ''; // probably more efficient to remove nodes individually
container.appendChild(buffer);
document.body.appendChild(container);

レイアウトによっては、削除containerするとその下のコンテンツが一時的にジャンプする場合があります。洗練された外観が必要な場合は、containerの親の高さを固定するか、その場所に。を使用してプレースホルダーを挿入できcontainer.parentNode.replaceNode()ます。

再描画を最小限に抑えれば、効率の問題は発生しないはずです。ただし、それでも微調整が必​​要な場合は、コンテンツ挿入ロジックを最適化してください。これを行う最も簡単な方法は、おそらく、コンテンツタイプごとに異なるコンテナを使用して、単一のタブに関連付けられているコンテンツを複数のタブに表示されるコンテンツから分離することです。最善の解決策は、必要以上に一般化されていないものであることを忘れないでください。

于 2012-04-27T05:11:51.103 に答える