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

Chrome 122'deki yenilikler

Adriana Jara

Şunları bilmeniz gerekir:

Storage Buckets API ile depolama alanı yönetimini iyileştirin.
Geliştirici Araçları'nda Performans panelinde iyileştirmeler yapıldı.
Yeni Async Clipboard API unsanitized seçeneğini kullanarak HTML'yi kopyalarken ve yapıştırırken doğruluğu korumayı seçin.
Bunun gibi çok daha fazla özellik var.

Adım Adriana Jara. Chrome 122'de geliştiriciler için neler yeni olduğuna göz atalım.

Storage Buckets API.

Storage Buckets API, kalıcı depolama alanını daha iyi yönetmek için daha ayrıntılı bir düzeyde işlem yapma olanağı sunar.

Geleneksel olarak, kullanıcının cihazındaki depolama alanı doldukça IndexedDB veya localStorage gibi API'lerle depolanan veriler, kullanıcının müdahale edememesi nedeniyle 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 tamamen ya da hiç değildir.

Storage Buckets API'nin temel fikri, sitelere birden fazla depolama paketi oluşturma olanağı vermektir. Bu paketlerde, tarayıcının her paketi diğer paketlerden bağımsız olarak silmeyi seçebilir. Bu nedenle, en değerli verilerin silinmediğinden emin olmak için depolama alanından kaldırma önceliğini belirtebilirsiniz.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 bilgi ve kod örneği için Depolama paketleri kullanıma sunuluyor: Depolama alanları aynı değildir başlıklı makaleyi inceleyin.

Performans panelinde DevTools iyileştirmeleri

Chrome 122'de Geliştirici Araçları'nın Performans panelinde aşağıdaki iyileştirmeler yer alır.

Öncelikle, Performans panelinin üst kısmındaki Zaman Çizelgesi artık ekmek kırıntıları ayarlamanıza ve bunlar arasında geçiş yapmanıza olanak tanır. İçerik haritası ayarlamak için zaman çizelgesinde bir aralık seçin, fareyle üzerine gelin ve ilgili N ms düğmesini tıklayın. Ardışık olarak birkaç iç içe yerleştirilmiş içerik haritası oluşturabilirsiniz. Yakınlaştırma düzeyleri arasında atlamak için zaman çizelgesinin üst kısmındaki zincirdeki ilgili içerik haritası öğesini tıklayın. İçerik haritalarını iş başında görmek için sonraki videoyu izleyin.

Ayrıca, artık Ana kanalda etkinlik başlatıcılar vardır. Performans > Ana kanalında varsayılan olarak, başlatıcıları ve neden oldukları sonraki etkinlikleri birbirine bağlayan oklar gösterilir.

Stil veya düzen geçersizliği -> Stili yeniden hesapla veya Düzen
Animasyon Karesi İste -> Animasyon Karesi Tetiklendi
Boşta Geri Çağırma İste -> 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 izlemede bu tür bir etkinlik bulup tıklayın.

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

DevTools 122'deki yenilikler başlıklı makalede daha fazla DevTools güncellemesi bulabilirsiniz.

Eş zamansız Clipboard API `unsanitized` seçeneği

Eşzamansız Pano API'sini kullanarak kopyalama ve yapıştırma işlemi 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, panodan HTML okuma işlemi temizlenir.

Varsayılan olarak, async API kullanılarak text/html MIME türleri okunurken güvenlik endişeleri nedeniyle HTML işaretlemesinden içerikleri kaldırmak için temizleyici çağrılır ve stiller, oluşturulan HTML'ye satır içi olarak yerleştirilir. Bu da büyük bir HTML yüküne ve web geliştiricileri veya mobil uygulamalar tarafından okunduğunda HTML içeriğinin doğruluğunu kaybetmesine neden olur.

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

Giriş:

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

Arındırı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ğiyle:

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

Panoya API'sinin temellerini öğrenmek için Panoya erişiminin engelini kaldırma başlıklı makaleyi inceleyin.

Diğer özellikler

Elbette daha birçok özellik 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ündeki nesneleri siler.
WebGL'in drawingBufferStorage özelliğiyle, oluşturmayı varsayılan çizim arabelleği piksel biçimine dönüştürürken ek bir kopyalama işleminden kaçınabilir ve 8 bitten fazla hassasiyete sahip içerikler çizebilirsiniz.

Daha fazla bilgi

Bu bölümde, öne çıkan özelliklerden bazıları ele alınmıştır. Chrome 122'deki diğer değişiklikler için aşağıdaki bağlantıları inceleyin.

Gelişmelerden haberdar olmak için Chrome Developers YouTube kanalına abone olun. Yeni bir video yayınladığımızda e-posta bildirimi alırsınız.

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