Nowości w Chrome 123

Adriana Jara

Oto, co musisz wiedzieć na ten temat:

Nazywam się Adriana Jara. Przyjrzyjmy się nowościom dla deweloperów w Chrome 123.

Funkcja CSS light-dark().

Funkcja light-dark() w CSS pozwala tworzyć kolory, które dostosowują się do preferencji użytkownika dotyczących trybu jasnego i ciemnego. Użyj funkcji light-dark(), aby określić 2 różne wartości koloru w ramach jednej właściwości CSS.

Przeglądarka automatycznie wybierze odpowiedni kolor na podstawie obliczonej wartości color-scheme elementu. Na przykład w tym kodzie CSS:

html {
  color-scheme: light dark;
}
.target {
    background-color: light-dark(lime, green);
}
  • Jeśli użytkownik wybierze jasny motyw, element będzie miał limonkowe tło.
  • Jeśli użytkownik wybierze ciemny motyw, element będzie miał zielone tło.

Interfejs API Long Animation Frames.

Interfejs Long Animation Frames API pomaga w znalezieniu przyczyn zatoru w wątku głównym, które często jest przyczyną nieprawidłowych wartości INP (Interaction to Next Paint) – podstawowego wskaźnika internetowego, który mierzy responsywność witryny.

Nowy interfejs API jest rozszerzoną wersją interfejsu Long Tasks API, która pozwala lepiej zrozumieć powolne aktualizacje interfejsu użytkownika. Interfejs Long Animation Frames API umożliwia pomiar działania blokowania. Mierzy zadania wraz z poniższą aktualizacją renderowania i dodaje informacje, takie jak długo działające skrypty, czas renderowania oraz czas spędzony w wymuszonym układzie i stylu (tzw. thrashing układów).

Zbieranie i analizowanie tych informacji pozwala identyfikować wąskie gardła wydajności i je rozwiązywać. Ten kod pozwala przechwytywać długie klatki.

const observer = new PerformanceObserver((list) => {
  console.log(list.getEntries());
});

observer.observe({ type: 'long-animation-frame', buffered: true });

Interfejs Static Routing API w mechanizmie Service Worker.

Mechanizmy Service Worker umożliwiają działanie witryn w trybie offline i tworzenie strategii buforowania, które mogą zapewnić większą wydajność.

Jednak w przypadku, gdy od dłuższego czasu strona zostanie wczytana po raz pierwszy, a skrypt service worker nie będzie w danym momencie uruchomiony, może to spowodować obniżenie wydajności. Wszystkie pobieranie musi odbywać się przez skrypt service worker, dlatego przeglądarka musi czekać na jego uruchomienie, aby dowiedzieć się, jaka zawartość ma zostać załadowana.

Za pomocą interfejsu Service Worker Static Routing API podczas instalacji możesz zadeklarować ścieżki, które mają być zawsze obsługiwane z sieci. Gdy kontrolowany adres URL zostanie wczytany w późniejszym czasie, przeglądarka może zacząć pobierać zasoby z tych ścieżek, jeszcze zanim skrypt service worker zakończy pracę. Spowoduje to usunięcie skryptu service worker z adresów URL, o których wiesz, że go nie potrzebujesz.

addEventListener('install', (event) => {
  event.addRoutes({
    condition: {
          urlPattern: "/articles/*",
          runningStatus: "running"
    },
    source: "fetch-event"
  });
});

…i wiele innych.

Oczywiście, jest ich jeszcze więcej.

  • Możesz oferować dostosowane strony na podstawie miejsca, z którego przeszedł użytkownik, za pomocą interfejsu NavigationActivation.

  • Chrome obsługuje teraz standard Zstandard (zstd). Content-Encoding pomaga szybciej ładować strony i zużywa mniej przepustowości, a także pozwala skrócić czas pracy i obciążenie serwerów oraz zmniejszać obciążenie serwerów, co przekłada się na niższe koszty serwerów.

  • W Chrome 123 wdrażamy interfejs API notRestoredReasons dla pamięci podręcznej stanu strony internetowej. Dzięki temu właściciele witryn mogą zbierać w polu informacje o przyczynach braku możliwości użycia pamięci podręcznej stanu strony internetowej. Właściciele witryn mogą to wykorzystać, aby poprawić wykorzystanie pamięci podręcznej stanu strony internetowej, co umożliwia szybsze poruszanie się po historii.

  • Wartość picture-in-picture dla display-mode umożliwia pisanie konkretnych reguł CSS, które mają zastosowanie tylko wtedy, gdy aplikacja internetowa jest wyświetlana w trybie obrazu w obrazie. Na przykład:

@media all and (display-mode: picture-in-picture) {
  body {
    margin: 0;
  }
  h1 {
    font-size: 0.8em;
  }
}

Więcej informacji

Ta analiza obejmuje tylko niektóre najważniejsze kwestie. Kliknij poniższe linki, aby dowiedzieć się więcej o zmianach w Chrome 123.

Subskrybuj

Aby być na bieżąco, zasubskrybuj kanał Chrome Developers w YouTube. Będziesz otrzymywać e-maile z powiadomieniami o każdym nowym filmie.

Cześć Adriana Jara, a gdy tylko pojawi się Chrome 124, będę informować Cię o nowościach w Chrome.