document.bodyにツールチップを添付しないでください

ツールチップパフォーマンスの最適化に対するAtif Afzalの洞察に富んだアプローチには、専用の永久に存在することを使用することが含まれます<div>ツールチップを管理するためのコンテナ。この方法は、Tooltipsを<code>document.bodyに直接添付することを大幅に上回ります。重要な利点は、明示的に述べられていませんが、絶対的なポジショニングにあります。この専用のコンテナは、隠されたオーバーフローや相対的な親要素の複雑さなしに、正確なツールチップ配置を可能にします。

驚くべきことに、CSSプロパティがcontainていなくても、単に別のコンテナを使用するだけで、パフォーマンスが劇的に向上しました。説明は、強制スタイルの再計算を回避することにあります。ツールチップコンテナは見えないままであるため、その中の変更は完全なページレンダリングツリーの無効化をトリガーしません。小さく独立したサブツリーのみが無効であるため、再計算が大幅に速くなります。

この手法は、popper.jsのようなライブラリに関連しています。著者は、CodepenがToastメッセージにreact-hot-toastを使用していることは同様の戦略を採用しており、独自のメッセージをネストすることで最適化の追加レイヤーを追加することに注意してください<div>容器。</div>

以上がdocument.bodyにツールチップを添付しないでくださいの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。