Chrome 103'teki yenilikler

Pete LePage

Şunları bilmeniz gerekir:

  • Tarayıcının, sayfa henüz gelmeye başlamadan önce 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ında yüklü yazı tiplerini numaralandırma ve kullanma olanağı sağlar.
  • AbortSignal.timeout(), eşzamansız API'lerde zaman aşımları uygulamanın daha kolay bir yoludur.
  • Daha fazlası da var.

Ben Pete LePage. Şimdi Chrome 103'ün geliştiriciler için yeniliklerine bakalım.

HTTP 103 durum kodu 103 - erken ipuçları

Sayfa performansını artırmanın bir yolu da kaynak ipuçlarını kullanmaktır. Tarayıcıya, daha sonra ihtiyaç duyabileceği şeyler hakkında "ipuçları" verirler. Ö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 sunucu, sayfanın en azından bir kısmını gönderene kadar tarayıcı bu ipuçlarında işlem yapamaz.

Tarayıcının bir sayfa istediğini, ancak sunucunun bunu oluşturması için birkaç yüz milisaniye gerektiğini düşünün. Tarayıcı sayfayı almaya başlayana kadar sadece orada kalır ve bekler. Ancak sunucu, sayfanın her zaman CSS dosyası, birkaç JavaScript ve birkaç resim gibi belirli bir alt kaynağa ihtiyacı olacağı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, sayfayı normal HTTP 200 yanıtıyla gönderebilir. Sayfa gelirken tarayıcı gerekli kaynakları yüklemeye çoktan başlamıştır.

Bu yeni bir HTTP durum kodu olduğundan, onu kullanmak için sunucunuzda güncelleme yapılması gerekir.

HTTP 103 Erken ipuçlarını kullanmaya başlayın:

Yerel Yazı Tipi Erişimi API'sı

Web'de yazı tipleri her zaman zor olmuştur. Bu, özellikle de kullanıcıların kendi grafiklerini ve tasarımlarını oluşturmasına olanak tanıyan uygulamalar için geçerlidir. Şimdiye kadar web uygulamaları yalnızca web yazı tiplerini kullanabiliyordu. Kullanıcının bilgisayarına yüklediği yazı tiplerinin listesine ulaşmak mümkün değildi. Ayrıca, kendi özel metin yığınınızı uygulamanız gerektiğinde kritik öneme sahip 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 numaralandırma özelliği sunar ve yazı tipi tablosu verilerine erişim sağlar.

Cihazda yüklü yazı tiplerinin listesini almak için önce izin istemeniz 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ında yüklü tüm yazı tiplerinin yer aldığı bir dizi 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);
}

Yazı tiplerinin yalnızca 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);

Tüm ayrıntılar için Tom'un web.dev adresindeki Yerel yazı tipleriyle gelişmiş tipografiyi kullanma makalesine göz atın.

AbortSignal.timeout() ile Kolay Zaman Aşımı

JavaScript'te, eşzamansız bir çağrıyı iptal etmek için AbortController ve AbortSignal kullanılır.

Örneğin, fetch() isteğinde bulunurken AbortSignal oluşturup fetch() adlı kuruluşa iletebilirsiniz. fetch() iade edilmeden önce iptal etmek isterseniz AbortSignal örneğinde abort() çağrısı yapın. Şimdiye kadar, belirli bir süre sonra iptal edilmesini isteseydiniz setTimeout() içine sarmalamanız gerekirdi.

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 kullanarak bu iş artık daha kolay. Belirtilen milisaniye süresince otomatik olarak iptal edilen bir AbortSignal nesnesi döndürür. Eskiden yalnızca bir kod satırı olan kod artık sadece bir tanesi.

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

AbortSignal.timeout() Chrome 103'te desteklenmektedir ve hem Firefox'ta hem de Safari'de zaten mevcuttur.

Diğer ölçütler

Elbette dahası var.

  • avif resim dosyası biçimi artık Web Paylaşımı ile paylaşılabilir
  • Chromium artık URL değişikliklerini hemen sonra popstate parametresini etkinleştirerek Firefox'u eşleştiriyor. Etkinliklerin sırası şu anda: popstate, ardından her iki platformda da hashchange.
  • Element.isVisible() ise bir öğenin görünür olup olmadığını belirtir.

Daha fazla bilgi

Burada, öne çıkan özelliklerin yalnızca bir kısmı ele alınıyor. Chrome 103'teki ek değişiklikler için aşağıdaki bağlantıları kontrol edin.

Abone ol

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.

Ben Pete LePage. Chrome 104 yayınlanır yayınlanmaz size Chrome'daki yenilikleri anlatacağım!