Nowości w Chrome 122

Adriana Jara

Oto, co musisz wiedzieć na ten temat:

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

Storage Buckets API.

Interfejs Storage Buckets API zapewnia większą szczegółowość, co ułatwia zarządzanie trwałym miejscem na dane.

Tradycyjnie, gdy użytkownikowi kończy się miejsce na urządzeniu, dane przechowywane za pomocą interfejsów API, takich jak IndexedDB czy localStorage, są tracone bez możliwości interwencji użytkownika. Jednym ze sposobów na trwałe przechowywanie danych jest użycie metody persist() interfejsu StorageManager. Jednak ta metoda żądania trwałego przechowywania jest metodą typu „wszystko albo nic”.

Głównym założeniem interfejsu Storage Buckets API jest umożliwienie witrynom tworzenia wielu zasobników pamięci, z których każdą z nich przeglądarka może usunąć niezależnie od innych. Możesz więc określić priorytet wyrzucania, aby mieć pewność, że nie zostaną usunięte najcenniejsze dane.Każdy zasobnik może zawierać dane powiązane z dotychczasowymi interfejsami API pamięci, takimi jak IndexedDB i CacheStorage.

Więcej informacji i przykłady kodu, które ułatwią Ci rozpoczęcie korzystania z zasobników Storage, znajdziesz w artykule Nie wszystkie miejsca na dane są takie same: przedstawiamy zasobniki Storage.

Ulepszenia DevTools w panelu wydajności

W Chrome 122 Narzędzia deweloperskie zawierają te ulepszenia w panelu Wydajność.

Po pierwsze, w sekcji Oś czasu u góry panelu Wyniki możesz teraz ustawiać ścieżki nawigacyjne i między nimi się przełączać. Aby ustawić menu nawigacyjne, wybierz zakres na osi czasu, najedź na niego kursorem i kliknij odpowiedni przycisk N ms . Możesz utworzyć kilka zagnieżdżonych ścieżek. Aby przełączać się między poziomami powiększenia, kliknij odpowiedni link na liście na górze osi czasu. Aby zobaczyć, jak działają ścieżki, obejrzyj następny film.

Na ścieżce Główna znajdują się teraz inicjatorzy zdarzeń. Ścieżka Skuteczność > Główna domyślnie zawiera strzałki łączące inicjatory z następującymi po nich zdarzeniami.

  • Odrzucenie stylu lub układu –> Ponownie oblicz style lub Układ.
  • Żądanie klatki animacji -> Uruchomiono klatkę animacji
  • Request Inactive Callback -> Fire Inactive Callback
  • Zainstaluj licznik czasu -> Uruchomiono licznik czasu
  • Utwórz WebSocket -> Wyślij… i Otrzymanie uzgodnienia połączenia WebSocket lub Zniszcz WebSocket

Aby zobaczyć strzałki, znajdź takie zdarzenie w śladzie i kliknij je.

Strzałka z żądania i wywołania zwrotnego w stanie bezczynności.

Więcej informacji o nowościach w Narzędziach deweloperskich znajdziesz w artykule Nowości w Narzędziach deweloperskich 122.

Opcja unsanitized interfejsu Async Clipboard API

Podczas kopiowania i wklejania za pomocą interfejsu Async Clipboard API opcja unsanitized dla metody read() pozwala aplikacjom i witrynom uzyskać nieoczyszczony kod HTML. Jeśli witryny nie zawierają tej właściwości, odczytywanie kodu HTML z Schowka zostanie poddane usunięciu danych.

Domyślnie podczas odczytywania typów MIME text/html za pomocą interfejsu async API wywoływany jest mechanizm sanityzacji, aby usunąć zawartość z otagowania HTML ze względów bezpieczeństwa. Wynikiwający kod HTML zawiera wbudowane style. Powoduje to duży rozmiar danych HTML i utratę wierności treści HTML podczas odczytu przez programistów stron internetowych lub aplikacje mobilne.

Różnicę w wyniku możesz zobaczyć w tym przykładzie.

Urządzenie wejściowe:

<style>p { color: blue; }</style><p>Hello, World!</p>'

Sanitized (domyślnie):

<p style='color: blue; font-size: medium; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;'>Hello, World!</p>

Z opcją unsanitized:

<html><head><style>p { color: blue; }</style></head><body><p>Hello, World!</p></body></html>

Aby dowiedzieć się więcej o interfejsie Clipboard API, przeczytaj artykuł Odblokowanie dostępu do schowka.

I inne funkcje

Oczywiście jest ich znacznie więcej.

  • W usłudze porównywania cen zapytania dotyczące kontenerów z funkcjami, które nie są obsługiwane, nigdy nie pasują. Na przykład to zapytanie nigdy nie znajdzie dopasowania z powodu nieznanej funkcji:
@container (width > 0px) or (unknown) {}

  • Funkcja dataTransfer.clearData() nie ma wpływu na obiekty File, tylko usuwa obiekty typu text.

  • Dzięki funkcji drawingBufferStorage w WebGL możesz uniknąć tworzenia dodatkowej kopii podczas konwertowania renderowania do domyślnego formatu pikseli bufora rysowania i rysować treści o większej precyzji niż 8 bitów.

Więcej informacji

Ta lista zawiera tylko niektóre najważniejsze informacje. Aby dowiedzieć się więcej o dodatkowych zmianach w Chrome 122, 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ę Chrome 123, opowiem Ci, co nowego w tej wersji przeglądarki.