Novità di Chrome 122

Adriana Jara

Tieni presente quanto segue:

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

API Storage Buckets.

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

Tradizionalmente, quando lo spazio di archiviazione del dispositivo dell'utente finisce, i dati archiviati con API come IndexedDB o localStorage vengono persi senza che l'utente possa intervenire. Un modo per rendere persistente lo spazio di archiviazione è utilizzare il metodo persist() dell'interfaccia StorageManager. Tuttavia, questo metodo di richiesta 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. In questo modo, puoi specificare la priorità dell'espulsione per assicurarti che i dati più importanti non vengano eliminati.Ogni bucket di archiviazione può contenere i dati associati ad API di archiviazione consolidate come IndexedDB e CacheStorage.

Per ulteriori dettagli ed esempi di codice per iniziare a utilizzare i bucket di archiviazione, consulta Non tutto lo spazio di archiviazione è uguale: presentazione dei bucket di archiviazione.

Miglioramenti a DevTools nel riquadro Prestazioni

In Chrome 122, DevTools include 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 nella Sequenza temporale, passaci sopra il mouse e fai clic sul pulsante N ms corrispondente. Puoi creare diversi breadcrumb nidificati in successione. Per passare da un livello di zoom all'altro, fai clic sul breadcrumb corrispondente nella catena in cima alla sequenza temporale. Guarda il video successivo per vedere i breadcrumb in azione.

Inoltre, ora sono disponibili gli iniziatori di eventi nel canale Principale. Per impostazione predefinita, il canale Rendimento > Principale mostra le frecce che collegano gli iniziatori e i seguenti eventi causati.

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

Per visualizzare le frecce, individua un evento di questo tipo nella traccia e fai clic.

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

Scopri 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 ad app e siti web di ottenere HTML non sanificato. 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, lo strumento di sanitizzazione viene invocato per rimuovere i contenuti dal markup HTML per motivi di sicurezza e gli stili vengono inseriti in linea nell'HTML risultante. Ciò comporta un payload HTML elevato e la 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>'

Sanificata (valore 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.

Ovviamente ce ne sono molti altri.

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

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

  • Con drawingBufferStorage di WebGL puoi evitare una copia aggiuntiva durante la conversione del rendering nel formato pixel del buffer di disegno predefinito e disegnare contenuti con più di 8 bit di precisione.

Per approfondire

Sono riportati solo alcuni punti salienti. Consulta i seguenti link per altre modifiche in Chrome 122.

Iscriviti

Per rimanere al passo con le novità, iscriviti al canale YouTube di Chrome for Developers, e riceverai una notifica via email ogni volta che lanceremo un nuovo video.

Sono Adriana Jara e, non appena verrà rilasciato Chrome 123, sarò qui per raccontarti le novità di Chrome.