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 umożliwia pomiar pracy blokującej. Mierzy ona zadania wraz z następną aktualizacją renderowania i dodaje informacje takie jak długo trwające 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 oraz 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ą pracownika usługi, przeglądarka musi poczekać, aż pracownik 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 zawsze mają być 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 miejsca, z którego użytkownik się przełączył, za pomocą interfejsu NavigationActivation.

  • Chrome obsługuje teraz Zstandard (zstd). Dzięki temu Content-Encoding wczytywanie stron jest szybsze, zużycie pasma jest mniejsze, a na serwerach zużywa się mniej czasu, procesora i energii na kompresję, co obniża koszty serwera.

  • Interfejs notRestoredReasons API do obsługi pamięci podręcznej stanu strony internetowej jest wprowadzany od wersji Chrome 123. Dzięki temu właściciele witryn mogą w tym polu podać przyczyny, dla których nie można było użyć pamięci podręcznej stanu strony internetowej. 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

Ta lista zawiera tylko niektóre najważniejsze informacje. Aby dowiedzieć się więcej o dodatkowych zmianach w Chrome 123, kliknij te linki.

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ść, tu Adriana Jara. Gdy tylko pojawi się nowa wersja Chrome 124, opowiem Ci, co nowego w Chrome.