Ş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:
- İlk İpuçları için Açıklayıcı
- Apache 2 Erken İpuçları yapılandırması
- Cloudflare'de İlk İpuçlarını Kullanma
- Fastly Beyond Server Push: 103 Erken İpucu Durum Kodu
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 dahashchange
. 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.
- Chrome Geliştirici Araçları'ndaki yenilikler (103)
- Chrome 103 için desteğin sonlandırılması ve kaldırılması
- Chrome 103 için ChromeStatus.com güncellemeleri
- Chromium kaynak deposu değişiklik listesi
- Chrome sürüm takvimi
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!