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, güvenilir türler açıkken innerHTML örneğini ele alalım. Bir dizeyi iletmeye çalışırsam tarayıcı, dizeye güvenip güvenemeyeceğini bilemediği için TypeError ile başarısız olur.

// 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. Kullanımı kolaydır, yerleşik erişilebilirliğe 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.
Sonrasında form kontrollerinin stili güncellendi.

Microsoft'un form denetimlerinin görünümünü modernize etmek için yaptığı çalışmalardan gerçekten etkilendim. Güzel görsel stilin yanı sıra daha iyi dokunma desteği ve iyileştirilmiş klavye desteği de dahil olmak üzere daha iyi erişilebilirlik sağlarlar.

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:

  • Etkinlik işleyicinin kaydını iptal etmeyi unutma
  • iframe'den nesne yakalama
  • Çalışanı kapatmama
  • Dizilerde nesne 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ışlar 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, bir dosyaya yazmayı çok daha kolay hale getirir ve akış olduğundan yanıtları bir akıştan diğerine kolayca iletebilirsiniz.

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, yakın zamanda düzenlenen dosyaların listesini tutabilir, kullanıcının üzerinde çalıştığı son dosyayı açabilir ve bu şekilde devam edebilirsiniz.

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 denemesindeki özelliklerin tam listesini kontrol edin.

Yeni çapraz kaynak politikaları

Bazı web API'leri, Spectre gibi yan kanal saldırısı riskini artırır. Tarayıcılar bu riski azaltmak için kökler arası erişime kapalı, isteğe bağlı erişime dayalı izole bir ortam sunar. Kökler arası erişime kapalı durum, document.domain'te de değişiklikleri engeller. document.domain değişiklik yapabilmek, aynı site belgeleri arasında iletişime izin verir ve aynı kaynak politikasında bir boşluk olarak kabul edilmiştir.

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

Bunlar, öne çıkan özelliklerden yalnızca bazılarıdır. Chrome 83'teki diğer değişiklikler için aşağıdaki bağlantıları inceleyin.

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 ve saçımı kestirm ihtiyacım var, ancak Chrome 84 çıkar çıkmaz size Chrome'daki yenilikleri anlatmak için burada olacağım!