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ı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.
  • 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 bunu oluşturmak için birkaç yüz milisaniye gerektiğini hayal edin. Tarayıcı, sayfayı almaya başlayana kadar orada öylece kalır. 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şlayın Erken ipuçları:

Local Font Access API

Web'deki yazı tipleri, özellikle de kullanıcıların kendi grafiklerini ve tasarımlarını oluşturmalarına olanak tanıyan uygulamalar için her zaman zor olmuştur. Şimdiye kadar web uygulamaları yalnızca web yazı tiplerini kullanabiliyordu. Kullanıcının bilgisayarına yüklediği yazı tiplerinin listesini almanın bir yolu yoktu. Ayrıca, tam yazı tipi tablo verilerine erişmenin bir yolu yoktu. Kendi özel metin yığınınızı uygulamanız gerekiyorsa çok önemlidir.

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ında yüklü olan tüm yazı tiplerini içeren 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);
}

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'te, eşzamansız bir çağrıyı iptal etmek için AbortController ve AbortSignal 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 sonunda otomatik olarak iptal edilen AbortSignal nesnesini 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 desteklenmektedir. Firefox ve Safari'de zaten mevcuttur.

Diğer özellikler

Tabii ki çok daha fazlası var.

  • avif resim dosyası biçimi artık Web Paylaşımı 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(), 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.

Ben Pete LePage. Chrome 104 yayınlanır yayınlanmaz size Chrome'daki yenilikleri anlatmak için burada olacağım!