Microsoft dodaje zakładkę Warstwy złożone w narzędziu Widok 3D

Microsoft zaskakuje twórców stron internetowych nową funkcją wstrzykniętą do jego Narzędzie Widok 3D, który jest częścią narzędzi programistycznych (narzędzi programistycznych). Ogłoszona we wtorek funkcja o nazwie Zakładka warstw złożonych dołączy do innych narzędzi narzędzi Widoku 3D używanych do rozwiązywania typowych problemów związanych z tworzeniem stron internetowych, takich jak niepotrzebne paski przewijania, problemy ze stosami z-index i złożoność DOM.

Funkcja warstw złożonych służy do podzielenia strony internetowej na odpowiednią liczbę warstw. Microsoft Edge Senior Product Manager Patricka Brosseta mówi, że przyda się, gdy komponenty będą animowane lub zmieniane niezależnie od reszty. Można przypomnieć, że Microsoft Edge DevTools wcześniej posiadał osobne narzędzie Layers oferujące tę samą funkcjonalność. Firma zdecydowała się jednak usunąć dla niego panel, co spowodowało jego połączenie z narzędziem 3D View.

W poście na blogu zapowiadającym nadejście nowej funkcji Brosset szczegółowo opisuje również, jak ważne są warstwy i jak zasadniczo działają w sieci, omawiając aktywność silników renderujących w przeglądarkach na wysokim poziomie. Według niego, silnik przeglądarki wykonuje szereg kroków, aby przejść od HTML i CSS do pikseli na ekranie. Procedury te obejmują parsowanie kodu HTML i tworzenie drzewa DOM, analizowanie kodu CSS i uzyskiwanie informacji o stylu i układzie, tworzenie nowej struktury drzewa i malowanie strony na ekranie.

„Podczas tego ostatniego kroku silnik może zdecydować o pomalowaniu strony za jednym razem lub podzieleniu jej na wiele warstw, pomalowaniu ich osobno, a następnie skomponowaniu z nich ostatecznego obrazu” — zauważa Brosset. „Istnieją specyficzne właściwości CSS i elementy HTML, które sprawiają, że silnik decyduje się na utworzenie osobnej warstwy. Na przykład użycie właściwości transformacji 3D lub właściwości will-change powoduje, że silnik tworzy warstwy. W ten sposób, gdy zawartość tych warstw ulegnie zmianie, silnik musi tylko ponownie pomalować te poszczególne warstwy, a nie całą rzutnię”.

Kliknięcie zakładki Warstwy złożone pokaże użytkownikom utworzone warstwy, a ich lista jest wyświetlana na pasku bocznym po lewej stronie. Narzędzie podświetli również elementy na scenie 3D, a kliknięcie warstw dostarczy użytkownikom cennych informacji na ich temat, takich jak rozmiar.

„Jako programista stron internetowych bardzo przydatna może być wiedza, czy część strony, którą zamierzasz animować, rzeczywiście znajduje się na swojej własnej warstwie” – dodaje. „Jeśli tak, możesz być pewien, że podczas odtwarzania animacji reszta strony również nie będzie musiała być przemalowywana. Ale równie ważne jest sprawdzenie, czy przypadkowo nie tworzysz zbyt wielu warstw, ponieważ każda z nich potrzebuje pamięci”.