Novità di Chrome 122

Adriana Jara

Tieni presente quanto segue:

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

l'API Storage Buckets.

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

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

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

Consulta la sezione Non tutti gli spazi di archiviazione sono creati uguali: presentazione dei bucket di archiviazione per maggiori dettagli ed esempi di codice per iniziare a utilizzare i bucket di archiviazione.

Miglioramenti a 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 nella Sequenza temporale, passaci il mouse sopra 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 prossimo video per vedere i breadcrumb in azione.

Inoltre, ora ci sono attivatori di eventi nella traccia Principale. Per impostazione predefinita, il canale Rendimento > Principale mostra le frecce che collegano gli iniziatori e i seguenti eventi da essi generati.

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

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

Una freccia della richiesta e l'attivazione di un callback di inattività.

Puoi trovare altri aggiornamenti di DevTools nella pagina 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 ottenere codice HTML non verificato. A meno che i siti non includano questa proprietà, la lettura del codice HTML negli appunti non sarà saturata.

Per impostazione predefinita, durante la lettura dei tipi MIME text/html usando l'API asincrona, per motivi di sicurezza viene richiamato il sanitizer per eliminare i contenuti dal markup HTML e gli stili sono incorporati nel codice HTML risultante. Questo comporta un grande payload HTML e una perdita di fedeltà dei contenuti HTML quando vengono letti da sviluppatori web o app mobile.

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

Ingresso:

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

Sanitizzato (impostazione predefinita):

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

Per conoscere le nozioni di base dell'API Clipboard, consulta Sbloccare l'accesso agli appunti.

E tanto altro.

Ovviamente c'è molto altro.

  • Nel CSS, le query del contenitore 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 interessa gli oggetti File, ma elimina solo oggetti di tipo testo.

  • Con WebGL drawingBufferStorage puoi evitare un testo aggiuntivo quando converta il rendering nel formato predefinito dei pixel del buffer di disegno e traccia contenuti con più di 8 bit di precisione.

Per approfondire

Vengono trattati solo alcuni punti salienti. Controlla i seguenti link per ulteriori modifiche in Chrome 122.

Iscriviti

Per non perderti nessun aggiornamento, iscriviti al canale YouTube degli sviluppatori di Chrome e riceverai una notifica via email ogni volta che verrà lanciato un nuovo video.

Ciao Adriana Jara e non appena uscirà Chrome 123, sarò qui per farti conoscere le novità di Chrome.