LighthouseDOMツリーマップ-DOMのサイズを縮小する方法
過去数年間、 Google strong>は、ウェブアプリケーションのサイズが大きすぎることに関して多くの警告を発しました。これはユーザーにとって非常に高いコストがかかります。レンダリングが遅く、ブラウザとユーザーエクスペリエンスのパフォーマンスが低下します。 p>
アプリケーションのパフォーマンスを向上させるために、灯台が導入されました。 DOMのサイズを縮小するオプション。多くの企業では、メモリ消費量を削減し、その結果、ドキュメント全体のサイズを削減するために、この対策が実施されています。残念ながら、少なくとも Chrome strong>でのメモリ消費量のごくわずかな改善により、このパフォーマンスの問題が再発する可能性があります。 p>
これを支援するために、 Chrome strong > DOMツリー内で非常に重い場所を見つけるのに役立つ新機能が追加されました:DOMツリーマップ。
ツリーマップはChrome開発者ツールの拡張機能です。 DOMツリーを視覚化するためのタブを追加できます。
現在のページですべてのDOMノードの場所を確認できます。子が最も多い要素を見つけるには、ツールバーの右下隅にある[子]ボタンをクリックするだけです。 p>
このツールは、BEMアフィニティを視覚化する機能も拡張されています。これにより、BEMコンポーネントのノード集約度を平均的に確認できます。 p>