Chrome 83'teki yenilikler

Pete LePage

Chrome 83, kararlı sürüm olarak kullanıma sunulmaya başladı.

Şunları bilmeniz gerekir:

Ben Pete LePage. Evden çalışıyorum ve çekim yapıyorum. Chrome 83'te geliştiriciler için neler yeni olduğuna göz atalım.

Güvenilir türler

DOM tabanlı siteler arası komut dosyası çalıştırma, web'deki en yaygın güvenlik açıklarından biridir. Bu tür bir kodu sayfanıza yanlışlıkla eklemeniz kolay olabilir. Güvenilir türler, verileri tehlikeli olabilecek bir işleve aktarmadan önce işlemenizi gerektirdiğinden bu tür güvenlik açıklarının önlenmesine yardımcı olabilir.

Örneğin, innerHTML'ü ele alalım. Güvenilir türler etkinken bir dize iletmeye çalışırsam tarayıcı, dizeye güvenip güvenemeyeceğini bilmediği için TypeError hatası alır.

// Trusted types turned on
const elem = document.getElementById('myDiv');
elem.innerHTML = `Hello, world!`;
// Will throw a TypeError

Bunun yerine, textContent gibi güvenli bir işlev kullanmam, güvenilir bir tür iletmem veya öğeyi oluşturup appendChild() kullanmam gerekir.

// Use a safe function
elem.textContent = ''; // OK

// Pass in a trusted type
import DOMPurify from 'dompurify';
const str = `Hello, world!`;
elem.innerHTML = DOMPurify.sanitize(str, {RETURN_TRUSTED_TYPE: true});

// Create an element
const img = document.createElement('img');
img.src = 'xyz.jpg';
elem.appendChild(img);

Güvenilir türleri etkinleştirmeden önce report-only CSP başlığını kullanarak tüm ihlalleri tespit edip düzeltmeniz gerekir.

Content-Security-Policy-Report-Only: require-trusted-types-for 'script'; report-uri //example.com

Ardından, her şey hazır olduğunda doğru şekilde açabilirsiniz. Ayrıntılı bilgi için web.dev'deki Güvenilir Türlerle DOM tabanlı siteler arası komut dosyası çalıştırma güvenlik açıklarını önleme başlıklı makaleyi inceleyin.

Form kontrollerinde yapılan güncellemeler

HTML form denetimlerini her gün kullanırız ve bunlar web'in etkileşimliliğinin büyük bir kısmının anahtarıdır. Bu araçlar kullanımı kolaydır, yerleşik erişilebilirlik özelliklerine sahiptir ve kullanıcılarımıza aşinadır. Form denetimlerinin stili, tarayıcılar ve işletim sistemleri arasında tutarsız olabilir. Ayrıca, cihazlar arasında tutarlı bir görünüm elde etmek için sık sık çeşitli CSS kuralları göndermemiz gerekir.

Önceden, form kontrollerinin varsayılan stili.
Daha sonra form kontrollerinin stili güncellendi.

Microsoft'un form denetimlerinin görünümünü modernize etmek için yaptığı çalışmalardan gerçekten etkilendim. Daha güzel bir görsel stilin yanı sıra daha iyi dokunma desteği ve klavye desteği de sunarlar.

Yeni form kontrolleri Microsoft Edge'de kullanıma sunulmuştu. Artık Chrome 83'te de kullanılabilir. Daha fazla bilgi için Chromium blogundaki Form denetimleri ve odak ile ilgili güncellemeler başlıklı makaleyi inceleyin.

Kaynak denemeleri

measureMemory() ile belleği ölçme

Chrome 83'te kaynak denemesi başlatarak kullanabileceğiniz performance.measureMemory(), sayfanızı bellek kullanımını ölçmenizi ve bellek sızıntılarını tespit etmenizi sağlayan yeni bir API'dir.

Bellek sızıntısı oluşturmak kolaydır:

  • Bir etkinlik işleyicinin kaydını iptal etmeyi unutma
  • Bir iFrame'den nesne yakalama
  • Çalışanı kapatmama
  • Nesneleri dizilerde toplama
  • ve diğerleri.

Bellek sızıntıları, sayfaların kullanıcılara yavaş ve şişman görünmesine neden olur.

if (performance.measureMemory) {
  try {
    const result = await performance.measureMemory();
    console.log(result);
  } catch (err) {
    console.error(err);
  }
}

Yeni API'nin tüm ayrıntıları için web.dev'deki measureMemory() ile web sayfanızı toplam bellek kullanımı açısından izleyin başlıklı makaleyi inceleyin.

Yerel Dosya Sistemi API'sinde yapılan güncellemeler

Native File System API, Chrome 83'te yazılabilir akış desteği ve dosya tutamaçlarını kaydetme özelliğiyle yeni bir kaynak denemesi başlattı.

async function writeURLToFile(fileHandle, url) {
  // Create a FileSystemWritableFileStream to write to.
  const writable = await fileHandle.createWritable();
  // Make an HTTP request for the contents.
  const response = await fetch(url);
  // Stream the response into the file.
  await response.body.pipeTo(writable);
  // pipeTo() closes the destination pipe automatically.
}

Yazılabilir akışlar, dosyaya yazma işlemini çok daha kolay hale getirir. Akış olduğu için yanıtları bir akıştan diğerine kolayca aktarabilirsiniz.

Dosya tutamaçlarını IndexedDB'e kaydetmek, durumu depolamanıza veya kullanıcının üzerinde çalıştığı dosyaları hatırlamanıza olanak tanır. Örneğin, son düzenlenmiş dosyaların listesini tutma, kullanıcının üzerinde çalıştığı son dosyayı açma vb.

Bu özellikleri kullanmak için yeni bir kaynak deneme jetonuna ihtiyacınız olacak. Tüm ayrıntıları ve yeni kaynak deneme jetonunuzu nasıl alacağınızı öğrenmek için web.dev'deki güncellenmiş Native File System API: Simplifying access to local files (Yerel Dosya Sistemi API'si: Yerel dosyalara erişimi basitleştirme) makaleme göz atın.

Diğer kaynak denemeleri

Kaynak deneme sürümündeki özelliklerin tam listesini inceleyin.

Yeni çapraz kaynak politikaları

Bazı web API'leri, Spectre gibi yan kanal saldırılarının riskini artırır. Tarayıcılar, bu riski azaltmak için kökler arası erişime kapalı olarak adlandırılan, etkinleştirmeye dayalı bir izole ortam sunar. Kökler arası erişime kapalı durum, document.domain'te de değişiklikleri engeller. document.domain değerini değiştirmek, aynı sitedeki dokümanlar arasında iletişime olanak tanır ve aynı kaynak politikasında bir boşluk olarak kabul edilir.

Ayrıntılı bilgi için Eiji'nin COOP ve COEP'yi kullanarak web sitenizi "kaynaklar arası izole" hale getirme başlıklı yayınını inceleyin.

Web Vitals

Kullanıcı deneyiminin kalitesini ölçmenin birçok yönü vardır. Kullanıcı deneyiminin bazı yönleri siteye ve bağlama özel olsa da tüm web deneyimleri için kritik olan ortak bir sinyal grubu vardır: "Önemli Web Verileri". Bu tür temel kullanıcı deneyimi ihtiyaçları arasında sayfa içeriğinin yükleme deneyimi, etkileşimi ve görsel kararlılığı yer alır. Bu ölçümler, 2020 Core Web Vitals'in temelini oluşturur.

  • Largest Contentful Paint, algılanan yükleme hızını ölçer ve sayfanın ana içeriğinin yüklendiği olası noktayı, sayfa yükleme zaman çizelgesinde işaretler.
  • First Input Delay, duyarlılığı ölçer ve kullanıcıların sayfayla ilk kez etkileşim kurmaya çalışırken yaşadıkları deneyimi ölçer.
  • Cumulative Layout Shift, görsel kararlılığı ölçer ve görünür sayfa içeriğinin beklenmedik düzen kayması miktarını ölçer.

Bu metriklerin tümü, kullanıcı odaklı önemli sonuçları yakalar, saha ölçümüne uygundur ve destekleyici laboratuvar teşhis metrik eşdeğerlerine ve araç setlerine sahiptir. Örneğin, en önemli yükleme metriği olan Largest Contentful Paint, İlk Zengin İçerikli Boyama (FCP) ve İlk Bayta Erişim Süresi'ne (TTFB) de büyük ölçüde bağlıdır. Bu metrikler, izlemek ve iyileştirmek için kritik öneme sahiptir.

Daha fazla bilgi edinmek için Chromium Blog'daki Web Vitals'i tanıtıyoruz: Sorunsuz bir site için temel metrikler başlıklı makaleyi inceleyin.

Başka pek çok bilgi

Gelecekte neler olacağını merak ediyor musunuz? Bunu öğrenmek için Fugu API İzleyici'ye göz atın.

Daha fazla bilgi

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

Abone ol

Videolarımızdan haberdar olmak için Chrome Developers YouTube kanalımıza abone olun. Yeni bir video yayınladığımızda e-posta bildirimi alırsınız.

Ben Pete LePage. Saçımı kestirmem gerekiyor ama Chrome 84 yayınlanır yayınlanmaz Chrome'daki yenilikleri size buradan bildireceğim.