Nowości w Chrome 122

Adriana Jara

Oto, co musisz wiedzieć na ten temat:

  • Usprawnij zarządzanie miejscem na dane za pomocą interfejsu Storage buckets API.
  • W panelu wydajności wprowadziliśmy ulepszenia Narzędzi deweloperskich.
  • Wybierz opcję zachowania dokładności podczas kopiowania i wklejania kodu HTML za pomocą nowej opcji unsanitized interfejsu Async Clipboard API.
  • A do tego wiele więcej.

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

Interfejs API zasobników pamięci masowej.

Interfejs Storage buckets API zapewnia większą szczegółowość i ułatwia zarządzanie pamięcią trwałą.

Zazwyczaj gdy użytkownikowi zabraknie miejsca na urządzeniu, dane przechowywane przez interfejsy API takie jak IndexedDB czy localStorage zostają utracone bez możliwości interwencji użytkownika. Jednym ze sposobów na zapewnienie trwałej trwałości miejsca na dane jest użycie metody persist() w interfejsie usługi StorageManager. Jednak ta metoda żądania stałego przechowywania danych to wszystko lub nic.

Podstawową ideą interfejsu Storage buckets API jest umożliwienie witrynom tworzenia wielu zasobników na dane, przy czym przeglądarka może usunąć każdy z nich niezależnie od innych zasobników. Możesz więc określić priorytety trwałego usuwania, aby mieć pewność, że najcenniejsze dane nie zostaną usunięte.Każdy zasobnik na dane może zawierać dane powiązane z istniejącymi interfejsami API pamięci masowej, takimi jak IndexedDB czy CacheStorage.

Odwiedź stronę Nie wszystkie miejsca na dane są równe: wprowadzenie zasobników na dane, aby uzyskać więcej informacji i przykłady kodu, aby zacząć korzystać z zasobników na dane.

Ulepszenia Narzędzi deweloperskich w panelu wydajności

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

Po pierwsze: na osi czasu u góry panelu Skuteczność możesz teraz konfigurować menu nawigacyjne i przełączać się między nimi. Aby ustawić menu nawigacyjne, wybierz zakres na osi czasu, najedź na niego kursorem i kliknij odpowiedni przycisk zoom_in N ms. Możesz utworzyć kilka zagnieżdżonych menu nawigacyjnego. Aby przechodzić między poziomami powiększenia, kliknij odpowiednie menu nawigacyjne w łańcuchu nad osią czasu. Obejrzyj następny film, aby zobaczyć, jak działa menu nawigacyjne.

Inicjatory zdarzeń są teraz dostępne w ścieżce głównej. Ścieżka Skuteczność > Główna zawiera domyślnie strzałki łączące inicjatorów i zdarzenia, które te zdarzenia wywołały.

  • Unieważnienie stylu lub układu -> Ponownie oblicz style lub Układ
  • Żądanie ramki animacji -> Uruchomiono ramkę animacji
  • Żądanie nieaktywnego wywołania zwrotnego -> Uruchom nieaktywne wywołanie zwrotne
  • Zainstaluj licznik czasu -> Uruchomiono licznik czasu
  • Utwórz WebSocket -> Wyślij... i Odbierz WebSocket Handshake lub Zniszcz WebSocket

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

Strzałka z żądania i uruchomienia nieaktywnego wywołania zwrotnego.

Więcej aktualizacji Narzędzi deweloperskich znajdziesz w artykule Co nowego w narzędziu Devtools 122.

Opcja unsanitized interfejsu Async Clipboard API

Podczas kopiowania i wklejania za pomocą interfejsu Async Clipboard API opcja unsanitized związana z metodą read() umożliwia aplikacjom i stronom pobieranie niesprawdzonego kodu HTML. Jeśli witryny nie zawierają tej właściwości, kod HTML znajdujący się w schowku jest oczyszczany.

Domyślnie podczas odczytywania typów MIME text/html za pomocą asynchronicznego interfejsu API jest wywoływane narzędzie sanitizer w celu usunięcia zawartości znaczników HTML ze względów bezpieczeństwa, a styl jest wstawiony w wynikowy kod HTML. Prowadzi to do znacznego ładunku kodu HTML i utraty wierności treści HTML podczas odczytywania jej przez programistów internetowych lub aplikacje mobilne.

Różnice w danych wyjściowych widać w poniższym przykładzie.

Urządzenie wejściowe:

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

Gotowe (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>

W przypadku opcji unsanitized:

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

Zapoznaj się z artykułem Odblokowywanie dostępu do schowka, aby poznać podstawy interfejsu Clipboard API.

…i wiele innych.

Oczywiście, jest ich jeszcze więcej.

  • W CSS zapytania dotyczące kontenerów z nieobsługiwanymi funkcjami nigdy nie pasują do siebie. Na przykład to zapytanie nigdy nie zostanie dopasowane z powodu nieznanej funkcji:
@container (width > 0px) or (unknown) {}

  • Metoda dataTransfer.clearData() nie ma wpływu na obiekty File, a jedynie usuwa obiekty typu tekstowego.

  • Dzięki drawingBufferStorage interfejsu WebGL możesz uniknąć dodatkowej kopii podczas konwertowania renderowania na domyślny format piksela bufora rysowania i rysować treści z dokładnością przekraczającą 8 bitów.

Więcej informacji

Ta analiza obejmuje tylko niektóre najważniejsze kwestie. Poniżej znajdziesz informacje o dodatkowych zmianach w Chrome 122.

Zasubskrybuj

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 Chrome 123 będzie dostępny, będę informować Cię o nowościach w Chrome.