何百もの「タイル」を含む大きなページがあり、各タイルにカーソルを合わせると「フライアウト」が表示されます。フライアウトには、タイルよりも多くの情報 (およびマークアップ) が含まれます。
フライアウトは最初は表示されないため、最も簡単な実装は、フライアウトに設定display: none;し、タイルがホバーされたときに切り替えることです。
ただし、DOM に引き続きすべてのフライアウトが含まれることになるため、このアプローチには懸念があります。大規模な DOM はブラウザー、特にモバイル ブラウザーのパフォーマンスに大きな影響を与えると繰り返し聞いています。
そのため、別のアプローチも検討しましたdetach()。DOM からすべてのフライアウトに JavaScript を使用することです (ページの読み込み時)。次に、タイルがホバーされると、Flyout が再接続されます。これにより複雑さが増しますが、ページのパフォーマンスは非常に重要です。
私の質問を要約すると：
display: none;要素とdetached 要素の間にパフォーマンスの違いはありますか?
たとえば、ページにアニメーションがある場合、大きな (表示されていない) DOM では、スリムな DOM よりもアニメーションが途切れ途切れになりますか?