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ść, aby lepiej zarządzać pamięcią trwałą.

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”.

Podstawowym celem interfejsu Storage Buckets API jest umożliwienie witrynom tworzenia wielu zasobników na dane, z których przeglądarka może usuwać każdy zasobnik niezależnie od innych zasobników. 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.

Na stronie Nie wszystkie miejsca na dane są sobie równe – wprowadź zasobniki na dane, aby uzyskać więcej informacji i poznać przykładowy kod, aby zacząć korzystać z zasobników na dane.

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 o N ms. Możesz utworzyć kilka zagnieżdżonych ścieżek. Aby przechodzić między poziomami powiększenia, kliknij odpowiednie menu nawigacyjne w łańcuchu u góry 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.

  • Unieważnienie stylu lub układu -> Ponownie oblicz style lub Układ
  • Żądanie klatki animacji -> Uruchomiono klatkę animacji
  • Request Idle Callback -> Fire Idle Callback
  • Zainstaluj licznik czasu -> Uruchomiono licznik czasu.
  • Utwórz WebSocket -> Wyślij... i Odbierz uzgadnianie połączenia WebSocket lub Zniszcz WebSocket

Aby zobaczyć strzałki, znajdź takie zdarzenie w logu czasu 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 Co nowego 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 ze schowka będzie sterylne.

Domyślnie podczas odczytywania typów MIME text/html za pomocą interfejsu async API wywoływany jest mechanizm sanityzacji, aby usunąć zawartość z oznaczenia HTML ze względów bezpieczeństwa. W rezultacie w kodzie HTML są wstawiane 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>'

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

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

Obejmuje to 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.

Yo soy Adriana Jara, i as soon as Chrome 123 is released, I'll be right here to tell you what's new in Chrome!