Карта Lighthouse DOM Treemap — как уменьшить размер DOM
За последние несколько лет Google выпустил много предупреждений относительно чрезмерного размера вашего веб-приложения. Это дорого обходится пользователю: медленный рендеринг и низкая производительность браузера и взаимодействия с пользователем.
Чтобы повысить производительность вашего приложения, Lighthouse представил возможность уменьшить размер DOM. Во многих компаниях эта мера реализована для того, чтобы уменьшить потребление памяти и, как следствие, размер всего документа. К сожалению, очень небольшое улучшение потребления памяти, по крайней мере в Chrome, может вернуть эту проблему с производительностью.
Чтобы помочь вам в этом, в Chrome > теперь у нас есть новая функция, которая поможет вам найти действительно тяжелые места в дереве DOM: карта дерева DOM.
Карта дерева – это расширение инструментов разработчика Chrome, где вы можете добавить дополнительную вкладку для визуализации дерева DOM.
Вы можете увидеть расположение всех узлов DOM на текущей странице. Чтобы узнать, у каких элементов больше всего дочерних элементов, просто нажмите кнопку «Дочерние элементы» в правом нижнем углу панели инструментов.
Инструмент также был расширен за счет функции визуализации BEM affiniciados. Это позволяет вам увидеть, насколько интенсивно ваш компонент БЭМ использует узлы в среднем.
