Baru di Chrome 122

Adriana Jara

Berikut hal yang perlu Anda ketahui:

Saya Adriana Jara. Mari kita lihat apa saja yang baru untuk developer di Chrome 122.

Storage Buckets API.

Storage Buckets API memberikan tingkat perincian yang lebih tinggi untuk mengelola penyimpanan persisten dengan lebih baik.

Secara tradisional, saat pengguna kehabisan ruang penyimpanan di perangkatnya, data yang disimpan dengan API seperti IndexedDB atau localStorage akan hilang tanpa pengguna dapat melakukan intervensi. Salah satu cara untuk membuat penyimpanan persisten adalah menggunakan metode persist() dari antarmuka StorageManager. Namun, metode meminta penyimpanan untuk menjadi persisten ini bersifat mutlak

Ide inti Storage Buckets API adalah memberikan kemampuan kepada situs untuk membuat beberapa bucket penyimpanan, tempat browser dapat memilih untuk menghapus setiap bucket secara terpisah dari bucket lainnya. Jadi, Anda dapat menentukan prioritas penghapusan untuk memastikan data yang paling berharga tidak dihapus.Setiap bucket penyimpanan dapat berisi data yang terkait dengan API penyimpanan yang sudah ada seperti IndexedDB dan CacheStorage.

Buka tidak semua penyimpanan dibuat sama: memperkenalkan Bucket Penyimpanan untuk mengetahui detail selengkapnya dan contoh kode untuk mulai menggunakan Bucket Penyimpanan.

Peningkatan DevTools di Panel Performa

Di Chrome 122, DevTools menyertakan peningkatan berikut di panel Performa.

Pertama, Linimasa di bagian atas panel Performa kini memungkinkan Anda menetapkan breadcrumb dan berpindah di antara breadcrumb tersebut. Untuk menetapkan breadcrumb, pilih rentang di Linimasa, arahkan kursor ke rentang tersebut, lalu klik tombol N ms yang sesuai. Anda dapat membuat beberapa breadcrumb bertingkat secara berurutan. Untuk beralih di antara tingkat zoom, klik breadcrumb yang sesuai dalam rantai di atas Linimasa. Tonton video berikutnya untuk melihat cara kerja breadcrumb.

Selain itu, kini ada pemicu peristiwa di jalur Utama. Jalur Performa > Utama secara default menampilkan panah yang menghubungkan pemicu dan peristiwa berikut yang disebabkannya.

  • Pembatalan validasi gaya atau tata letak -> Hitung ulang gaya atau Tata letak
  • Request Animation Frame -> Animation Frame Fired
  • Minta Callback Tidak Ada Aktivitas -> Aktifkan Callback Tidak Ada Aktivitas
  • Instal Timer -> Timer Diaktifkan
  • Buat WebSocket -> Kirim... dan Terima WebSocket Handshake atau Hancurkan WebSocket

Untuk melihat panah, temukan peristiwa tersebut dalam rekaman aktivitas, lalu klik peristiwa tersebut.

Panah dari permintaan dan pengaktifan callback tidak ada aktivitas.

Temukan update DevTools lainnya di Yang baru di Devtools 122.

Opsi unsanitized Async Clipboard API

Saat menyalin dan menempel menggunakan Async Clipboard API, opsi unsanitized untuk metode read() memungkinkan aplikasi dan situs mendapatkan HTML yang tidak dibersihkan. Kecuali jika situs menyertakan properti ini, pembacaan HTML dari papan klip akan dibersihkan.

Secara default, saat membaca jenis MIME text/html menggunakan API asinkron, pembersih dipanggil untuk menghapus konten dari markup HTML karena masalah keamanan, dan gaya disisipkan dalam HTML yang dihasilkan. Hal ini menyebabkan payload HTML yang besar dan hilangnya fidelitas konten HTML saat dibaca oleh developer web atau aplikasi seluler.

Anda dapat melihat perbedaan output dalam contoh berikut.

Input:

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

Dibersihkan (default):

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

Dengan opsi unsanitized:

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

Buka Membatalkan pemblokiran akses papan klip untuk mempelajari dasar-dasar Clipboard API.

Dan banyak lagi!

Tentu saja masih banyak lagi.

  • Di CSS, kueri penampung dengan fitur yang tidak didukung tidak pernah cocok. Misalnya, kueri berikut tidak akan pernah cocok karena fitur yang tidak diketahui:
@container (width > 0px) or (unknown) {}

  • dataTransfer.clearData() tidak memengaruhi objek File, tetapi hanya menghapus objek jenis teks.

  • Dengan drawingBufferStorage WebGL, Anda dapat menghindari salinan tambahan saat mengonversi rendering ke format piksel buffering gambar default dan menggambar konten yang memiliki presisi lebih dari 8 bit.

Bacaan lebih lanjut

Bagian ini hanya mencakup beberapa sorotan utama. Periksa link berikut untuk mengetahui perubahan tambahan di Chrome 122.

Langganan

Untuk terus mendapatkan info terbaru, subscribe ke channel YouTube Chrome Developers, dan Anda akan mendapatkan notifikasi email setiap kali kami meluncurkan video baru.

Yo soy Adriana Jara, dan segera setelah Chrome 123 dirilis, saya akan segera hadir untuk memberi tahu Anda yang baru di Chrome.