Nowości w Chrome 123

Adriana Jara

Oto, co musisz wiedzieć na ten temat:

Nazywam się Adriana Jara. Zobacz, co nowego w Chrome 123 dla deweloperów.

light-dark() Funkcja CSS.

Funkcja light-dark() w CSS pozwala tworzyć kolory, które dostosowują się do preferowanego przez użytkownika trybu jasnego lub ciemnego. Użyj funkcji light-dark(), aby określić 2 różne wartości kolorów 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 przypadku tego kodu 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.

Long Animation Frames API.

Interfejs Long Animation Frames API pomoże Ci znaleźć przyczyny przeciążenia głównego wątku, które często jest przyczyną niskiej wartości INP (interakcja do kolejnego wyrenderowania) – podstawowego wskaźnika internetowego, który mierzy responsywność witryny.

Nowy interfejs API to ulepszona wersja interfejsu Long Tasks API, która umożliwia lepsze zrozumienie powolnych aktualizacji interfejsu użytkownika. Interfejs Long Animation Frames API pozwala mierzyć wydajność blokowania. Mierzy ona zadania wraz z następną aktualizacją renderowania i dodaje informacje takie jak długotrwałe skrypty, czas renderowania i czas spędzony na wymuszanym układzie i stylu, czyli przeładowaniu układu.

Zbieranie i analizowanie tych informacji pozwala wykrywać wąskie gardła wydajności i rozwiązywać z nimi związane problemy. Długie ramki możesz rejestrować za pomocą tego kodu.

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

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

Interfejs API routingu statycznego Service Worker.

Dzięki skryptom service worker możesz sprawić, że witryny będą działać offline, i tworzyć strategie buforowania, które mogą zwiększyć wydajność.

Jednak gdy strona jest wczytywana po raz pierwszy od dłuższego czasu, a skrypt service worker nie działa w tym momencie, może to mieć wpływ na wydajność. Ponieważ wszystkie pobierania muszą odbywać się za pomocą workera usługi, przeglądarka musi poczekać, aż worker usługi się uruchomi i zacznie działać, aby wiedzieć, jakie treści wczytać.

Dzięki interfejsowi Service Worker Static Routing API możesz w momencie instalacji zadeklarować ścieżki, które mają być zawsze dostarczane z sieci. Gdy kontrolowany adres URL zostanie później załadowany, przeglądarka może zacząć pobierać zasoby z tych ścieżek, zanim skrypt service worker zostanie uruchomiony. Spowoduje to usunięcie skryptu z adresów URL, które nie potrzebują skryptu.

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

I inne funkcje

Oczywiście jest ich znacznie więcej.

  • Możesz oferować strony dostosowane do tego, z jakiej strony użytkownik się na nie udał, korzystając z interfejsu NavigationActivation.

  • Chrome obsługuje teraz Zstandard (zstd). Ta Content-Encoding pomaga szybciej wczytywać strony, zużywać mniej przepustowości oraz skracać czas, obciążenie procesora i zużycie energii na serwerach, co przekłada się na niższe koszty serwera.

  • Interfejs notRestoredReasons API dla bfcache wprowadzamy w Chrome 123. Dzięki temu właściciele witryn mogą zebrać w polu powody, dla których nie udało się użyć obiektu bfcache. Właściciele witryn mogą wykorzystać tę funkcję do ulepszania korzystania z pamięci podręcznej stanu strony internetowej, co pozwala na szybsze poruszanie się po historii.

  • Wartość picture-in-picture dla display-mode umożliwia pisanie określonych 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

Obejmuje to tylko niektóre najważniejsze informacje. Pod tymi linkami znajdziesz dodatkowe informacje o zmianach w Chrome 123.

Subskrybuj

Aby być na bieżąco, zasubskrybuj kanał w YouTube dla programistów Chrome. Otrzymasz wtedy e-maila z powiadomieniem, gdy tylko opublikujemy nowy film.

Cześć Adrianę Jara. Gdy tylko Chrome 124 się ukaże, od razu powiem, co nowego w Chrome.