DOM Treemap Google Chrome 版

Lighthouse DOM Treemap - 如何减小 DOM 的大小

在过去几年中，Google 就您的网络应用程序过大发出了许多警告。这给用户带来了非常高的成本：渲染缓慢，浏览器性能和用户体验不佳。

为了提高应用程序的性能，Lighthouse引入了减小 DOM 大小的选项。对于许多公司而言，已实施此措施以减少内存消耗，从而减少整个文档的大小。不幸的是，至少在 Chrome 中内存消耗的微小改进可能会导致此性能问题。

为了帮助您解决此问题，在 Chrome 中> 我们现在有一个新功能可以帮助您在 DOM 树中找到非常重的位置：DOM 树图。

树图是 Chrome 开发者工具的扩展，其中您可以为 DOM 树的可视化添加一个额外的选项卡。

您可以查看当前页面中所有 DOM 节点的位置。要查找哪些元素的子元素最多，只需单击工具栏右下角的“子元素”按钮即可。

该工具还扩展了一个功能，可以可视化 BEM 亲缘关系。这使您可以查看 BEM 组件的平均节点密集程度。