Angular Material-フラットツリーとネストされたツリーの違い
平らな木：
フラットツリーでは、階層はフラット化されます。ノードはお互いの内部にレンダリングされませんが、代わりに兄弟として順番にレンダリングされます
ネストされたツリー：
ネストされたツリーでは、子ノードはDOMの親ノード内に配置されます。親ノードには、すべての子ノードを保持するためのアウトレットがあります。
フラットツリーを使用して表示する800要素の命名法があります。
最も適切なツリーのように思えたので、最初にネストされたツリーを使用してみました。点滅するまでに時間がかかりますが、DOMはツリーをロードするのに5秒かかるので、フラットツリーを試してみましたが、完全に機能します。
問題は、フラットツリーの結果が同じである場合にネストされたツリーを使用することの意味は何ですか？ツリーは正しくレンダリングされ、DOMはその階層を理解します。
フラットツリーのDOM：
ネストされたツリーは構築が難しく、表示されるたびにDOMを明確にオーバーロードします。ネストされたツリーでできること、フラットツリーではできないこと資料のドキュメントは不明確です。
HTMLがAngularまたは単にフラットファイルを介して動的にレンダリングされるかどうかに関係なく、ネストされたツリーにはいくつかの明確な主な利点があります。
- イベントバブリングを利用できます。これにより、DOMとのユーザーインタラクションをキャプチャするために必要なコードの量を大幅に削減できます。また、複数のイベントをキャプチャする必要がある場合は、ネストすることでそれも簡単になります。
- 子要素によって継承される親ノードにスタイルを適用できるようにすることで、フォーマットをより詳細に制御できます。
- ネストされたツリーは、LESSやSassなどのCSSプリプロセッサを使用する場合に非常に役立ちます。書く必要のあるスタイルの量を大幅に減らします。
- 2つのツリーのレンダリング間のパフォーマンスは同じかもしれませんが、接続が遅いユーザーやモバイルサービスが不十分なユーザーを考慮する必要がある場合は、経験則として、DOM要素は少ないほど良いです。