Chrome 124'teki yenilikler

Pete LePage

Chrome 124'te öne çıkanlar şunlardır:

Programın tamamını izlemek ister misiniz? Şu bölüme göz atın: Chrome 124 Sürüm Notları.

JavaScript'te bildirim temelli gölge DOM'yi kullanma

Bildirim temelli gölge DOM'nin JavaScript'e dokunun.

setHTMLUnsafe(), innerHTML işlevine benzer ve sayfanın iç HTML'sini ayarlamanıza olanak tanır. içine bir öğe ekleyin. Bu sayede projede Bunun gibi bildirim temelli bir gölge DOM içeren HTML.

<my-custom-element>
  <template shadowrootmode="open">
    <style>
      :host {
        display: block;
        color: yellow;
      }
    </style>
    Hello, <slot></slot>
  </template>
</my-custom-element>

Yalnızca innerHTML kullanırsanız tarayıcı bunu düzgün bir şekilde ayrıştırmaz ve gölge DOM'u yok. Ancak setHTMLUnsafe() ile gölge DOM'unuz oluşturulur ve öğesi beklediğiniz gibi ayrıştırılır.

const section = document.createElement("section");
section.setHTMLUnsafe(`<my-custom-element>...</my-custom-element>`);

Diğer API parseHTMLUnsafe() şeklindedir ve şuna benzer şekilde çalışır: DOMParser.parseFromString().

Bu API'lerin ikisi de güvenli değil, bu nedenle herhangi bir giriş yapmazlar. arındırma. Bu yüzden beslediğiniz her şeyin güvenli olduğundan emin olmalısınız. Gelecekteki bir sürümde, temizlik sağlayan bir sürüm görmeyi bekliyoruz olduğunu düşünelim.

Son olarak, bu API'lerin ikisi de Firefox ve Safari!

WebSocket Stream API'si

WebSockets, kullanıcının cihazları arasında veri alışverişi yapmanın sorunsuz bir şekilde çalışır. Bu, özellikle de Sohbet uygulamaları gibi uygulamalar, istediğiniz bilgileri görür görmez devreye giriyor.

Peki, veriler işleyebileceğinden daha hızlı ulaşırsa ne olur?

Buna sırt basıncı denir ve ciddi baş ağrısına neden olabilir. Maalesef WebSocket API'nin geri dönüş sorunlarını çözmenin iyi bir yolu yok. baskı altında tutabilirsiniz.

WebSocket Stream API, veri akışlarının ve web yuvalarının gücünü artıracağız. Bu da geri basınç ek maliyet olmadan uygulanır.

Yeni bir WebSocketStream oluşturup buna WebSocket sunucusu.

const wss = new WebSocketStream(WSS_URL);
const {readable, writable} = await wss.opened;
const reader = readable.getReader();
const writer = writable.getWriter();

while (true) {
  const {value, done} = await reader.read();
  if (done) {
    break;
  }
  const result = await process(value);
  await writer.write(result);
}

Ardından, bağlantının açılmasını beklersiniz. Bu ReadableStream ve WritableStream içinde. ReadableStream.getReader() yöntemiyle ReadableStreamDefaultReader elde edersiniz Sonrasında, akış tamamlanana kadar read() verileri alabilirsiniz.

Veri yazmak için WritableStream.getWriter() yöntemini çağırın. Bu yöntem size WritableStreamDefaultWriter, daha sonra verileri write().

Geçiş iyileştirmelerini görüntüle

Görünüm Geçişleri özellikleri konusunda heyecanlıyım ve iki yeni özellik var kullanıma sunuyoruz.

Gezinme sırasında dokümanın pencere nesnesinde pageswap etkinliği tetiklenir dokümanı yeni bir dokümanla değiştirir.

document.addEventListener("pageswap", event => {
  if (!event.viewTransition) {
     return;
  }
});

Ayrıca, dokümanın oluşturulmasını engellemenizi sağlayan doküman oluşturma engelleme özelliği ve böylece, tutarlı bir ilk boyama sağlanır. tüm tarayıcılarda kullanabilirsiniz.

Diğer özellikler

Tabii ki çok daha fazlası var.

  • disallowReturnToOpener pencere içinde pencere modunda bir düğme göstermemesi gerektiğine ilişkin ipuçları kullanıcının açıcı sekmesine geri dönmesini sağlayan penceredir.

  • Klavyeye odaklanılabilir kaydırma kapsayıcıları Sıralı geçişli oynatma kapsayıcılarını odaklanılabilir hale getirerek erişilebilirliği iyileştirir. odaklı gezinme.

  • Evrensel yükleme, kullanıcıların herhangi bir sayfayı yüklemesine olanak tanır. Mevcut PWA ölçütlerini karşılamalıdır.

Daha fazla bilgi

Bu bölümde, yalnızca bazı önemli noktalar yer alıyor. Aşağıdaki bağlantıları kontrol edin: Chrome 124'teki ek değişiklikler.

Abone ol

Gelişmelerden haberdar olmak için şu yayına abone olun: Chrome Developers YouTube kanalı Yeni bir video yayınladığımızda size e-posta bildirimi göndereceğiz.

Ben Pete LePage. Chrome 125 yayınlanır yayınlanmaz sizlerle Chrome'daki yenilikler neler?