devnews.pl

Main Menu

  • Informacje
    • Systemy i przeglądarki
    • Gadżety
  • Narzędzia
  • Frontend
  • Backend
  • QA
  • Języki programowania

logo

devnews.pl

  • Informacje
    • Systemy i przeglądarki
    • Gadżety
  • Narzędzia
  • Frontend
  • Backend
  • QA
  • Języki programowania
Frontend
Home›Frontend›Content-visibility – właściwość poprawiająca wydajność

Content-visibility – właściwość poprawiająca wydajność

By Bernadeta Zapała
5 sierpnia 2020
477
0
Share:

Nowa właściwość kaskadowych arkuszy stylów, uruchamiana w Chromium 85 pozwala skracać czas początkowego ładowania. Jest to możliwe przez pomijanie renderowania treści poza ekranem. Właściwość content-visibility może mieć duży wpływ na poprawę wydajności ładowania strony.

Wprowadzona do CSS właściwość pozwala na pomijanie prac dotyczących układu i malowania, dopóki nie będą potrzebne. Jeśli duża część treści znajduje się poza ekranem, a renderowanie jest opuszczane, to szybciej ładuje się początkowy użytkownik. Ponadto właściwość pozwala na szybsze reakcje z wyświetlanymi na ekranie elementami.

CSS Containment

Celem CSS Containment jest ulepszenie wydajności renderowania treści WWW. Ma to być możliwe przez zapewnienie izolacji poddrzewa DOM od reszty strony. Są cztery typy CSS Containment, a każdy z nich stanowi potencjalną wartość właściwości contain CSS:

  • Size — pudełko elementu rozkłada się bez konieczności sprawdzania jego potomków. Jeśli potrzebny jest tylko rozmiar elementu, można potencjalnie pominąć układ elementów potomnych.
  • Layout — elementy potomne nie wpływają na zewnętrzny układ innych pól na stronie.
  • Style — właściwości, które mają wpływ nie tylko na jego potomków, nie uciekają przed elementem. Pomijamy tym samym obliczanie stylów potomków, jeśli chcemy tylko obliczyć style innych elementów.
  • Paint— elementy potomne pola zawierającego nie są wyświetlane poza jego granicami. Nic nie może w widoczny sposób przepełnić elementu. Jednak jeśli element jest poza ekranem lub po prostu jest niewidoczny, jego potomkowie także nie będą widoczni.

Content-visibility i pomijanie renderowania

Ciężko jest ustalić, których właściwości zawierania (containment) użyć. Optymalizacja przeglądarki zadziała tylko wtedy, gdy określi się odpowiedni zestaw. Są dwa możliwe wyjścia – testowanie różnych kombinacji wartości lub skorzystanie z właściwości content-visibility. Druga opcja gwarantuje wzrost wydajności, jaki zapewni przeglądarka, przy jednoczesnym minimalnym wysiłku programisty.

Content-visibility - rezultaty

Właściwość auto nowej funkcji CSS zapewnia natychmiastową poprawę wydajności. Element z ustawioną właściwością na auto zyskuje paczki layout, style oraz paint. Elementy znajdujące się poza ekranem, nieistotne dla użytkownika, dostają także z ograniczenia size.

Zasadniczo, jeśli element jest poza ekranem, jego potomkowie nie są renderowani. Przeglądarka określa tylko rozmiar elementu, ale nie uwzględnia jego zawartości. Pomija się większą część procesu renderowania, m.in. stylizację i układ poddrzewa elementu. Ważne jest, że jeśli element się zbliża do rzutni, przeglądarka nie dodaje ograniczenia size. Przez to renderowanie odbywa się w odpowiednim czasie, tak, aby użytkownik w porę zobaczył kolejne elementy.

Przykład wykorzystania content-visibility

Na tym przykładzie można zobaczyć, jak zmienia się wydajność przy wprowadzeniu właściwości content-visibility:auto. Pętla wygląda podobnie w obu przypadkach – przeglądarka pobiera i renderuje fragmenty strony. Jednak w przypadku strony z elementami zawierającymi właściwość, przeglądarka wykona mniejszą ilość pracy przy renderowaniu. Koszty wczytywania spadają nawet o 50% , jeśli przeglądarka wyświetla tylko historie wyświetlane na ekranie, a poza znajdują się puste pola.

https://storage.googleapis.com/web-dev-assets/content-visibility/travel_blog.mp4

 

W powyższym filmiku widać różnicę w czasie renderowania, z 232 ms do 30 ms. Daje to ponad siedmiokrotny wzrost wydajności.

Podsumowanie

Właściwość content-visibility jest obsługiwana tylko w Chromium 85. Jednak specyfikacja ograniczenia obsługuje się w większości nowoczesnych przeglądarek. Nowa właściwość CSS oraz specyfikacja CSS Containtment Spec pozwoli na wzrost wydajności w projektach CSS.

Źródło: Web.Dev

TagsContent-visibilityCSSLayoutPerformance

Share:

  • Frontend

    Kendo UI R1 2021 – nowości dla bibliotek

  • Backend

    Gatsby – nowe wydanie z przyrostowymi kompilacjami

  • Narzędzia

    Android Studio Arctic Fox – nowe wydanie narzędzia Google

  • 3 marca 2021

    Vite 2.0 wydane z nowymi wtyczkami

  • 25 lutego 2021

    ReacType 5.0 – zmiany we wprowadzaniu komponentów

  • 23 lutego 2021

    Dapr v.1.0 gotowy do fazy produkcji

  • 22 lutego 2021

    ReScript 9.0 z zewnętrzną konfiguracją stdlib

  • 22 lutego 2021

    One UI 3.1 z ciekawymi nowościami dla urządzeń Samsunga

  • 22 lutego 2021

    Windows Terminal Preview 1.6 z nową sekcją ustawień

  • 15 lutego 2021

    Visual Studio Code 1.53 z ulepszeniami debugowania

  • 8 lutego 2021

    Edge 89 beta, Edge Dev 90 i nowości na kanale Canary

  • 2 lutego 2021

    Firefox 85 i Firefox Nightly – nowe wersje przeglądarki Mozilli

  • 29 stycznia 2021

    Billboard.js 2.2.0 z nowymi funkcjami wykresów

  • 26 stycznia 2021

    Kendo UI R1 2021 – nowości dla bibliotek

  • 21 stycznia 2021

    Narzędzie Vno – połączenie Vue i Deno

  • 19 stycznia 2021

    GitHub Enterprise Server 3.0 RC – kandydat do wydania

  • 15 stycznia 2021

    TypeScript 4.2 Beta z ulepszeniami typów krotek

  • 13 stycznia 2021

    Styczniowy Patch Tuesday z luką 0-day

  • 11 stycznia 2021

    Safari Technology Preview 118 dostępne dla programistów

  • 8 stycznia 2021

    Microsoft Launcher na Androida z usprawnionym dotykiem

  • 7 stycznia 2021

    WebStorm 2020.3.1 dostępny dla urządzeń z Apple Silicon

  • 22 grudnia 2020

    ReScript 8.4 z przypiętymi zależnościami

  • 14 grudnia 2020

    Edge 88 beta i przeglądarka na kanale Canary dostępne!

  • 9 grudnia 2020

    Chrome 88 Beta z nowościami w WebXR

  • 9 grudnia 2020

    Snowpack 3.0 RC z eksperymentalnymi funkcjami

  • 4 grudnia 2020

    Android Studio Arctic Fox – nowe wydanie narzędzia Google

  • 4 grudnia 2020

    The Hack Summit 2020 – konferencja IT Security

  • 2 grudnia 2020

    PowerToys 0.27 z poprawkami błędów

  • 2 grudnia 2020

    Aleph.js alfa z funkcją importowania map

  • 27 listopada 2020

    Cypress 6.0 zwiększa zakres możliwości obsługi sieci

  • 26 listopada 2020

    Firefox 83 przyspiesza i wprowadza tryb HTTPS-Only

  • 25 listopada 2020

    Electron 11.0 z obsługą Apple Silicon

  • 25 listopada 2020

    Prettier 2.2 z obsługą najnowszego TypeScript 4.1

 

 

Jesteśmy pasjonatami najnowszych technologii w świecie programowania. Zbieramy dla Was informacje i porady z całego świata, które sprawią, że Twoja praca stanie się jeszcze bardziej efektywna.

Obserwuj nas codziennie, aby być na bieżąco oraz śmiało udostępniaj nasze posty.

Zespół DevNews

Kategorie

  • Backend
  • Bez kategorii
  • Frontend
  • Gadżety
  • Informacje
  • Języki programowania
  • Narzędzia
  • QA
  • Systemy i przeglądarki

OBSERWUJ NAS

KONTAKT

Chcesz się z nami skontaktować?

Napisz do nas wiadomość: kontakt@devnews.pl

www.devnews.pl | DEVNEWS 2020 | Newsy i ciekawostki ze świata IT