Bu sayfa, Cloud Translation API ile çevrilmiştir.

Chrome 122'deki yenilikler

Adriana Jara

Şunları bilmeniz gerekir:

Storage Buckets API ile depolama yönetimini iyileştirin.
Geliştirici Araçları'yla ilgili performans panelinde iyileştirmeler yapılmıştır.
Yeni Async Clipboard API unsanitized seçeneğini kullanarak HTML kopyalayıp yapıştırırken doğruluğu korumayı seçebilirsiniz.
Daha fazlası da var.

Ben Adriana Jara. Şimdi Chrome 122'deki geliştiricilere yönelik yenilikleri görelim.

Storage Buckets API.

Storage Buckets API, kalıcı depolama alanını daha iyi yönetmek için daha fazla ayrıntı sağlar.

Normalde, kullanıcının cihazındaki depolama alanı tükendiğinde, IndexedDB veya localStorage gibi API'lerle depolanan veriler kullanıcı müdahale edebilmeden kaybolur. Depolama alanını kalıcı hale getirmenin bir yolu, StorageManager arayüzünün persist() yöntemini kullanmaktır. Ancak depolama alanının kalıcı olmasını isteme yöntemi "ya hep ya hiç" değildir

Storage Buckets API'nin temel fikri, sitelere, tarayıcının her bir paketi diğer paketlerden bağımsız olarak silmeyi seçebileceği, birden fazla depolama paketi oluşturma yeteneği sağlamaktır. Dolayısıyla, en değerli verilerin silinmediğinden emin olmak için çıkarma önceliğini belirleyebilirsiniz.Her depolama paketi, IndexedDB ve CacheStorage gibi yerleşik depolama API'leriyle ilişkili veriler içerebilir.

Depolama Paketlerini kullanmaya başlamak için daha fazla ayrıntı ve kod örnekleri için tüm depolama alanları eşit değildir: Depolama Paketleri tanıtılıyor sayfasını ziyaret edin.

Performans Paneli'nde Geliştirici Araçları iyileştirmeleri

Chrome 122 Geliştirici Araçları, Performans panelinde aşağıdaki iyileştirmeleri içerir.

İlk olarak, Performans panelinin üst kısmındaki Zaman Çizelgesi artık içerik haritalarını ayarlamanıza ve bunlar arasında geçiş yapmanıza olanak tanıyor. İçerik haritasını ayarlamak için Zaman çizelgesinde bir aralık seçin, fareyle aralığın üzerine gelin ve ilgili N ms zoom_in düğmesini tıklayın. İç içe yerleştirilmiş birden fazla içerik haritasını arka arkaya oluşturabilirsiniz. Yakınlaştırma düzeyleri arasında geçiş yapmak için Zaman Çizelgesi'nin üst kısmındaki zincirde ilgili içerik haritasını tıklayın. İçerik haritalarının nasıl çalıştığını görmek için sonraki videoyu izleyin.

Ayrıca, artık Ana kanalda etkinlik başlatıcılar vardır. Varsayılan olarak Performans > Ana kanal, başlatıcıları birbirine bağlayan okları ve bunların yol açtığı aşağıdaki etkinlikleri gösterir.

Stil veya düzen geçersiz kılma -> Stilleri yeniden hesapla veya Düzen
Animasyon Çerçevesi İste -> Animasyon Karesi Tetiklendi
Boşta Geri Çağırma İsteğinde Bulun -> Boşta Geri Çağırmayı Tetikle
Zamanlayıcı Yükle -> Zamanlayıcı Tetiklendi
WebSocket Oluştur -> Gönder... ve WebSocket El Sıkışması al veya WebSocket'i kaldır

Okları görmek için izde böyle bir etkinliği bulup tıklayın.

İstekten bir ok ve boşta geri çağırmanın tetiklenmesi.

Geliştirici Araçları ile ilgili diğer güncellemeleri Devtools 122'deki yenilikler bölümünde bulabilirsiniz.

Async Clipboard API `unsanitized` seçeneği

Async Clipboard API'sini kullanarak kopyalama ve yapıştırma yaparken read() yöntemi için unsanitized seçeneği, uygulamaların ve web sitelerinin temizlenmemiş HTML almasına olanak tanır. Siteler bu özelliği içermediği sürece panodaki HTML okunması temizlenir.

Varsayılan olarak, eşzamansız API'yi kullanarak text/html MIME türlerini okurken, güvenlik endişeleri nedeniyle HTML işaretlemesindeki içeriği çıkarmak için temizleyici çağrılır ve stiller, oluşturulan HTML'de satır içine alınır. Bu durum, web geliştiricileri veya mobil uygulamalar tarafından okunurken büyük bir HTML yüküne ve HTML içeriğinin görselliğinin kaybedilmesine neden olur.

Aşağıdaki örnekte çıkıştaki farkı görebilirsiniz.

Giriş:

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

Arıtılmış (varsayılan):

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

unsanitized seçeneği ile:

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

Clipboard API ile ilgili temel bilgileri öğrenmek için Pano erişiminin engellemesini kaldırma sayfasını ziyaret edin.

Diğer ölçütler

Elbette dahası var.

CSS'de, desteklenmeyen özelliklere sahip kapsayıcı sorguları hiçbir zaman eşleşmez. Örneğin, aşağıdaki sorgu bilinmeyen özellik nedeniyle hiçbir zaman eşleşmez:

@container (width > 0px) or (unknown) {}

dataTransfer.clearData() Dosya nesnelerini etkilemez, yalnızca metin türü nesnelerini siler.
WebGL drawingBufferStorage ile oluşturmayı varsayılan çizim arabelleği piksel biçimine dönüştürürken ve 8 bitten daha yüksek hassasiyete sahip içerik çizerken fazladan bir kopyadan kaçınabilirsiniz.

Daha fazla bilgi

Bu bölümde yalnızca bazı önemli noktalar ele alınmıştır. Chrome 122'deki ek değişiklikler için aşağıdaki bağlantıları kontrol edin.

Gelişmelerden haberdar olmak için Chrome Geliştiricileri YouTube kanalına abone olun. Yeni bir video sunduğumuzda e-posta bildirimi alırsınız.

Merhaba Adriana Jara, Chrome 123 yayınlanır yayınlanmaz size Chrome'daki yenilikleri anlatacağım.