タブをクリックするとコンテンツが ajax 経由で読み込まれるアプリケーションを作成しています。これは、最初のページの読み込みを高速化し、不要なタブ コンテンツを読み込まないようにするためです。タブには、値を変更できるフォーム項目が含まれています。
データが失われるのを防ぐために、タブが読み込まれるときに「ajaxed」の追加クラスを与えています。「ajaxed」クラスが存在しない場合にタブをクリックすると、コンテンツが ajax を介してロードされます。それ以外の場合は、以前にロードされたコンテンツが単にユーザーに表示されます。
質問: DOM に大量の HTML をキャッシュすると、パフォーマンスが低下しますか? これは悪い習慣ですか？これは、無限スクロールや、単純に html を追加し続ける他のタイプのページに適用されます。このアプローチの欠点は何ですか?
前もって感謝します。
アプリケーションの領域によって異なります。一部のタブのコンテンツをDOM にキャッシュしても、それらのタブ内の dom 要素の数がある程度制限されている場合は問題ありません。
セレクターを使用して DOM 内の要素を検索するスクリプトは、要素が多いほど遅くなるというのは事実です。古いバージョンの Internet Explorer のようなお粗末な JavaScript エンジンを備えたブラウザーを訪問者が使用すると、これはさらに顕著になります。また、DOM 要素の数に応じてメモリ消費量が増加します。したがって、無限の数の項目を DOM に追加したくはありません。
無限スクロールの場合、下にスクロールしすぎたときに項目をアンロード/削除し、もう一度上にスクロールしたときにそれらを再度追加することをお勧めします。
あなたのアプローチは大丈夫です。親要素から削除する以外に、追加された dom のメモリ使用量を最小限に抑えることはできません。
無限スクロールに関するあなたの懸念の2番目の部分は、多くの哲学がありますが、ポイントは、完璧なスクロール体験を提供するのに十分なデータのみをキャッシュすることです. ただし、データ表現のために以前に作成したドメインを「破棄」する必要があります。これは、たとえば「遠すぎる」ものです。
質問とは関係ありませんが、コンテンツごとに一意の URL がないため、このアプローチでは SEO が失われます。サイトが内部の場合、これは問題にならない可能性があります。