Tieni presente quanto segue:
- Migliora la gestione dello spazio di archiviazione con l'API Storage Buckets.
- Sono disponibili miglioramenti di DevTools nel riquadro Rendimento.
- Scegli di mantenere la precisione quando copi e incolli HTML utilizzando la nuova opzione
unsanitized
dell'API Async Clipboard. - E ce ne sono molti altri.
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.
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.
- Novità di Chrome DevTools (122)
- Ritiri e rimozioni di Chrome 122
- Aggiornamenti di ChromeStatus.com per Chrome 122
- Elenco delle modifiche al repository di codice sorgente di Chromium
- Calendario dei rilasci di Chrome
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.