Javascript/Jqueryを使用した効率的なタブ切り替えの作成

Question

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

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

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

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

新しいタブを選択するたびに、最後に選択したタブのすべてのdivをループして非表示にし、現在のタブのdivをループして表示することができました。

しかし、それ以上の効率的なCPU集約的な方法があるかどうかは疑問です。また、このメソッドでは、最後のタブと現在のタブの間で共有されている場合にのみ、すぐに再び表示されるように一部のdivを非表示にします。 （例：div_111はTodayとTomorrowの間で共有できます。ユーザーがTodayをクリックすると、div_111が表示され、Tomorrowをクリックすると、div_111が最初に非表示になり、その後再び表示されます）。

提案がありますか？

Answer 1

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

ブラウザは、再描画を最適化しようとします。できるだけページを再描画せず、複数の変更を同じ再描画にグループ化することがあります。しかし、あなた自身の手で問題を取り上げることが最善です。追加または削除するノードの数にかかわらず、最初に親ノードをDOMから削除してから、すべての変更を加えてから再度追加することで、2回以上の再描画を行わないようにすることができます。一瞬ジャンプアップし、それ以下の内容を引き起こす可能性がcontainerを削除し、あなたのレイアウトに応じて、

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.parentNode.replaceNode()で挿入することができます。

再描画を最小限に抑えると、効率の問題が発生しません。しかし、まだあなたのコンテンツ挿入ロジックを調整して、確かに最適化したいならば。これを行う最も簡単な方法は、複数のタブに表示されるコンテンツから1つのタブに結び付けられたコンテンツを分離することです。コンテンツタイプごとに異なるコンテナを使用することも可能です。最良の解決策は、必要以上に一般化されていないものです。