Novità di Chrome 122

Adriana Jara

Tieni presente quanto segue:

Mi chiamo Adriana Jara. Scopriamo le novità di Chrome 122 per gli sviluppatori.

l'API Storage Buckets.

L'API Storage Buckets fornisce una maggiore granularità per gestire meglio l'archiviazione permanente.

Tradizionalmente, quando l'utente esaurisce lo spazio di archiviazione sul dispositivo, i dati archiviati con API quali IndexedDB o localStorage vengono persi senza che l'utente possa intervenire. Un modo per rendere permanente l'archiviazione è utilizzare il metodo persist() dell'interfaccia di StorageManager. Tuttavia, questo metodo per richiedere lo spazio di archiviazione permanente è tutto o niente

L'idea alla base dell'API Storage Buckets è concedere ai siti la possibilità di creare più bucket di archiviazione, dove il browser può scegliere di eliminare ciascun bucket indipendentemente dagli altri. Quindi puoi specificare la priorità di eliminazione per assicurarti che i dati più preziosi non vengano eliminati.Ogni bucket di archiviazione può contenere dati associati alle API di archiviazione stabilite come IndexedDB e CacheStorage.

Visita la pagina Non tutti i tipi di archiviazione sono uguali: introduzione dei bucket di archiviazione per ulteriori dettagli ed esempi di codice per iniziare a utilizzare i bucket di archiviazione.

Miglioramenti di DevTools nel riquadro Prestazioni

In Chrome 122 DevTools includono i seguenti miglioramenti nel riquadro Prestazioni.

Innanzitutto, la Sequenza temporale nella parte superiore del riquadro Rendimento ora ti consente di impostare i breadcrumb e di passare da uno all'altro. Per impostare un breadcrumb, seleziona un intervallo in Sequenza temporale, passa il mouse sopra il breadcrumb e fai clic sul pulsante N ms zoom_in corrispondente. Puoi creare diversi breadcrumb nidificati in successione. Per passare da un livello di zoom all'altro, fai clic sul breadcrumb corrispondente nella catena sopra la Sequenza temporale. Guarda il video successivo per vedere i breadcrumb in azione.

Inoltre, ora ci sono gli iniziatori degli eventi nel canale Principale. La sezione Rendimento > Per impostazione predefinita, la traccia principale mostra le frecce che collegano chi inizia e i seguenti eventi che hanno causato.

  • Annullamento convalida stile o layout -> Ricalcola stili o Layout
  • Richiedi frame dell'animazione -> Frame dell'animazione attivato
  • Richiedi callback di inattività -> Richiamata incendio in caso di inattività
  • Installa Timer -> Timer attivato
  • Crea WebSocket -> Invia... e Ricevi l'handshake di WebSocket o Destroy WebSocket.

Per vedere le frecce, individua l'evento di questo tipo nella traccia e fai clic.

Una freccia proveniente dalla richiesta e attivazione di un callback inattivo.

Puoi trovare altri aggiornamenti di DevTools in Novità di DevTools 122.

Opzione unsanitized dell'API Async Clipboard

Quando copi e incolli utilizzando l'API Async Clipboard, l'opzione unsanitized per il metodo read() consente alle app e ai siti web di ricevere codice HTML non sottoposto a sanitizzazione. A meno che i siti non includano questa proprietà, la lettura del codice HTML dagli appunti verrà purificata.

Per impostazione predefinita, quando si leggono tipi MIME text/html utilizzando l'API asincrona, il sanitizer viene richiamato per rimuovere i contenuti dal markup HTML a causa di problemi di sicurezza e gli stili sono incorporati nel codice HTML risultante. Questo porta a un grande payload HTML e alla perdita di fedeltà dei contenuti HTML quando vengono letti da sviluppatori web o app mobile.

Puoi vedere la differenza nell'output nell'esempio seguente.

Input:

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

Sanitizzato (predefinito):

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

Con l'opzione unsanitized:

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

Visita la pagina Sbloccare l'accesso agli appunti per apprendere le nozioni di base dell'API Clipboard.

E tanto altro.

Naturalmente c'è molto altro.

  • In CSS, le query contenitore con funzionalità non supportate non corrispondono mai. Ad esempio, la seguente query non corrisponderà mai a causa della funzionalità sconosciuta:
@container (width > 0px) or (unknown) {}

  • dataTransfer.clearData() non influisce sugli oggetti File, elimina solo gli oggetti di tipo testo.

  • Grazie a drawingBufferStorage di WebGL, puoi evitare una copia extra quando converti il rendering nel formato predefinito in pixel di buffer di disegno e disegnare contenuti con più di 8 bit di precisione.

Per approfondire

Vengono illustrati solo alcuni dei punti salienti. Visita i seguenti link per altre modifiche in Chrome 122.

Iscriviti

Per non perderti gli aggiornamenti, iscriviti al Canale YouTube per sviluppatori di Chrome, e riceverai una notifica via email ogni volta che viene lanciato un nuovo video.

Ciao Adriana Jara, non appena verrà rilasciato Chrome 123, ti fornirò tutte le informazioni sulle novità di Chrome.