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