Microsoft додає вкладку «Складені шари» в інструмент 3D-перегляду

Microsoft дивує веб-розробників новою функцією, введеною в нього Інструмент 3D перегляду, що входить до складу Інструментів розробки (Dev Tools). Оголошена у вівторок функція під назвою «Складені шари» поєднається з іншими інструментами інструментів 3D-перегляду, які використовуються для вирішення звичайних проблем веб-розробки, таких як непотрібні смуги прокрутки, проблеми зі стекуванням z-індексу та складність DOM.

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

У дописі в блозі, де оголошується про появу нової функції, Броссет також розповідає, наскільки важливі шари та як вони в основному відбуваються в Інтернеті, обговорюючи активність механізмів візуалізації браузера на високому рівні. За його словами, движок браузера виконує ряд кроків, щоб перейти від HTML і CSS до пікселів на екрані. Ці процедури включають розбір HTML-коду та створення дерева DOM, аналіз коду CSS та отримання інформації про стиль та макет, створення нової деревоподібної структури та малювання сторінки на екрані.

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

Натиснувши вкладку «Складені шари», користувачі відобразять створені шари, при цьому їхній список відображається на бічній панелі зліва. Інструмент також виділить об’єкти в 3D-сцені, а клацання шарів дасть користувачам цінну інформацію про них, наприклад розмір.

«Як веб-розробнику може бути дуже корисно знати, чи справді частина сторінки, яку ви збираєтеся анімувати, знаходиться у власному шарі», — додає він. «Якщо так, то ви можете бути впевнені, що під час відтворення анімації решту сторінки також не потрібно буде перефарбовувати. Але не менш важливо переконатися, що ви випадково не створюєте занадто багато шарів, оскільки кожному з них потрібна пам’ять».