Microsoft добавляет вкладку «Композитные слои» в инструмент 3D-просмотра

Microsoft удивляет веб-разработчиков новой функцией, внедренной в ее Инструмент 3D-просмотра, который является частью средств разработки (Dev Tools). Анонсированная во вторник функция под названием «Композитные слои» присоединится к другим инструментам 3D-просмотра, используемым для решения обычных проблем веб-разработки, таких как ненужные полосы прокрутки, проблемы с наложением z-индекса и сложность DOM.

Функция составных слоев предназначена для разделения веб-страницы на нужное количество слоев. Microsoft Edge Старший менеджер по продукции Патрик Броссе говорит, что это будет полезно, когда компоненты анимируются или изменяются независимо от остальных. Можно напомнить, что в Microsoft Edge DevTools ранее был отдельный инструмент Layers, предлагающий ту же функциональность. Однако компания решила убрать для него панель, в результате чего он слился с инструментом 3D View.

В сообщении блога, объявляющем о появлении новой функции, Броссет также подробно описывает, насколько важны слои и как они в основном происходят в Интернете, обсуждая активность механизмов рендеринга браузера на высоком уровне. По его словам, движок браузера выполняет ряд шагов, чтобы перейти от HTML и CSS к пикселям на экране. Эти процедуры включают анализ кода HTML и создание дерева DOM, анализ кода CSS и получение информации о стиле и макете, создание новой древовидной структуры и отрисовку страницы на экране.

«Во время этого последнего шага движок может решить нарисовать страницу за один раз или разделить ее на несколько слоев, нарисовать их по отдельности, а затем составить из них окончательное изображение», — отмечает Броссет. «Есть определенные свойства CSS и элементы HTML, которые заставляют движок решить создать отдельный слой. Например, использование свойства 3D-преобразования или свойства will-change заставляет движок создавать слои. Таким образом, когда содержимое этих слоев меняется, движку нужно перерисовывать только эти отдельные слои, а не всю область просмотра».

При нажатии на вкладку «Составные слои» пользователям будут показаны созданные слои, при этом их список отображается на боковой панели слева. Инструмент также выделяет объекты в 3D-сцене, а щелчок по слоям дает пользователям ценную информацию о них, например размер.

«Как веб-разработчику может быть очень полезно знать, действительно ли часть страницы, которую вы собираетесь анимировать, находится в своем собственном слое», — добавляет он. «Если это так, то вы можете быть уверены, что во время воспроизведения анимации остальную часть страницы также не нужно будет перекрашивать. Но не менее важно убедиться, что вы случайно не создаете слишком много слоев, поскольку каждому из них требуется память».