Chrome 103'teki yenilikler

Pete LePage

Şunları bilmeniz gerekir:

  • Sayfa henüz gelmeye başlamadan önce tarayıcının hangi içeriğin önceden yükleneceğine karar vermesine yardımcı olan yeni bir HTTP 103 durum kodu vardır.
  • Local Font Access API, web uygulamalarına kullanıcının bilgisayarına yüklenen yazı tiplerini listeleme ve kullanma olanağı sunar.
  • AbortSignal.timeout(), eşzamansız API'lerde zaman aşımlarını uygulamanın daha kolay bir yoludur.
  • Bunun gibi çok daha fazla özellik var.

Adım Pete LePage. Chrome 103'teki geliştiricilere yönelik yenilikleri inceleyelim.

HTTP 103 durum kodu 103 - erken ipuçları

Sayfa performansını iyileştirmenin bir yolu kaynak ipuçlarını kullanmaktır. Tarayıcıya daha sonra ihtiyaç duyabileceği öğeler hakkında "ipuçları" verir. Örneğin, dosyaları önceden yükleme veya farklı bir sunucuya bağlanma.

<link as="font" crossorigin="anonymous"
      href="..." rel="preload">
<link as="font" crossorigin="anonymous"
      href="..." rel="preload">
<link href="cdn.example.com"
      rel="preconnect">

Ancak tarayıcı, sunucu sayfanın en az bir bölümünü gönderene kadar bu ipuçlarıyla ilgili işlem yapamaz.

Tarayıcının bir sayfa istediğini, ancak sunucunun sayfayı oluşturması için birkaç yüz milisaniye gerektiğini varsayalım. Tarayıcı sayfayı almaya başlayana kadar orada oturup bekler. Ancak sunucu, sayfanın her zaman belirli bir alt kaynak grubuna (ör. bir CSS dosyası, bazı JavaScript'ler ve birkaç resim) ihtiyaç duyacağını biliyorsa hemen yeni HTTP 103 Erken İpuçları durum koduyla yanıt verebilir ve tarayıcıdan bu alt kaynakları önceden yüklemesini isteyebilir.

Ardından sunucu sayfayı oluşturduktan sonra normal HTTP 200 yanıtıyla gönderebilir. Sayfa gelirken tarayıcı gerekli kaynakları yüklemeye başlamış olur.

Bu yeni bir HTTP durum kodu olduğundan, bu kodu kullanmak için sunucunuzda güncellemeler yapmanız gerekir.

HTTP 103'ü kullanmaya başlama İlk ipuçları:

Local Font Access API

Web'deki yazı tipleri her zaman sorun olmuştur. Özellikle de kullanıcıların kendi grafiklerini ve tasarımlarını oluşturmasına olanak tanıyan uygulamalarda bu sorun daha belirgindir. Web uygulamaları şu ana kadar yalnızca web yazı tiplerini kullanabiliyordu. Kullanıcının bilgisayarına yüklediği yazı tiplerinin listesini almak mümkün değildi. Ayrıca, kendi özel metin yığınınızı uygulamanız gerekiyorsa yazı tipi tablosu verilerinin tamamına erişmenin bir yolu yoktu.

Yeni Yerel Yazı Tipi Erişimi API'si, web uygulamalarına kullanıcının cihazındaki yerel yazı tiplerini listeleme olanağı sunar ve yazı tipi tablosu verilerine erişim sağlar.

Cihazınızda yüklü olan yazı tiplerinin listesini almak için önce izin isteğinde bulunmanız gerekir.

// Ask for permission to use the API
try {
  const status = await navigator.permissions.request({
    name: 'local-fonts',
  });
  if (status.state !== 'granted') {
    throw new Error('No Permission.');
  }
} catch (err) {
  if (err.name !== 'TypeError') {
    throw err;
  }
}

Ardından window.queryLocalFonts() numaralı telefonu arayın. Kullanıcının cihazına yüklenen tüm yazı tiplerinin bir dizisini döndürür.

const opts = {};
const pickedFonts = await self.queryLocalFonts();
for (const fontData of pickedFonts) {
  console.log(fontData.postscriptName);
  console.log(fontData.fullName);
  console.log(fontData.family);
  console.log(fontData.style);
}

Yalnızca yazı tiplerinin bir alt kümesiyle ilgileniyorsanız postscriptNames parametresi ekleyerek bunları filtreleyebilirsiniz.

const opts = {
  postscriptNames: [
    'Verdana',
    'Verdana-Bold',
    'Verdana-Italic',
  ],
};
const pickedFonts = await self.queryLocalFonts(opts);

Ayrıntılı bilgi için Tom'un web.dev'deki Yerel yazı tipleriyle gelişmiş yazı tipleri kullanma makalesine göz atın.

AbortSignal.timeout() ile daha kolay zaman aşımları

JavaScript'de AbortController ve AbortSignal, asenkron çağrıları iptal etmek için kullanılır.

Örneğin, fetch() isteği yaparken bir AbortSignal oluşturup fetch()'e iletebilirsiniz. fetch() döndürülmeden önce iptal etmek istiyorsanız AbortSignal örneğinde abort() işlevini çağırın. Şimdiye kadar, belirli bir süre sonra iptal edilmesini istiyorsanız setTimeout() içine sarmanız gerekiyordu.

const controller = new AbortController();
const signal = controller.signal;
const resp = fetch(url, { signal });

setTimeout(() => {
  // abort the fetch after 6 seconds
  controller.abort();
}, 6000);

Neyse ki AbortSignal üzerinde yeni bir timeout() statik yöntemi sayesinde bu işlem artık daha kolay. Belirtilen milisaniye sayısından sonra otomatik olarak iptal edilen bir AbortSignal nesnesi döndürür. Eskiden birkaç satır kod olan işlem artık tek satırda yapılabiliyor.

const signal = AbortSignal.timeout(6000);
const resp = fetch(url, { signal });

AbortSignal.timeout(), Chrome 103'te desteklenir ve Firefox ile Safari'de zaten mevcuttur.

Diğer özellikler

Elbette daha birçok özellik var.

  • avif resim dosyası biçimi artık Web Paylaş ile paylaşılabilir
  • Chromium artık URL değiştikten hemen sonra popstate göndererek Firefox ile eşleşiyor. Etkinliklerin sırası artık her iki platformda da popstate ve ardından hashchange şeklindedir.
  • Element.isVisible() ise bir öğenin görünür olup olmadığını belirtir.

Daha fazla bilgi

Bu, önemli noktalardan yalnızca bazılarını kapsar. Chrome 103'teki diğer değişiklikler için aşağıdaki bağlantılara göz atın.

Abone ol

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.

Adım Pete LePage. Chrome 104 yayınlanır yayınlanmaz Chrome'daki yenilikleri size buradan bildireceğim.