Chrome 83'teki yenilikler

Filiz LePage

Chrome 83 şu anda kararlı sürümde kullanıma sunuluyor.

Şunları bilmeniz gerekir:

Ben Pete LePage. Evde çalışıyor ve çekim yapıyorum. Şimdi Chrome 83'teki geliştiricilere yönelik yenilikleri görelim!

Güvenilir türler

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

Örneğin, güvenilir türler etkinken innerHTML örneğini ele alalım. Bir dizeyi iletmeye çalışırsam, tarayıcı bu dizeye güvenip güvenemeyeceğini bilmediğ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 gerekiyor.

// 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ığı kullanarak ihlalleri tanımlamanız ve düzeltmeniz gerekir.

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

Düğmeyi yaptıktan sonra her şeyi düzgün bir şekilde açabilirsiniz. Tüm ayrıntıları web.dev'deki Güvenilir Türler ile DOM tabanlı siteler arası komut dosyası güvenlik açıklarını önleme bölümünde bulabilirsiniz.

Form kontrollerinde yapılan güncellemeler

HTML form kontrollerini her gün kullanıyoruz ve bunlar web'in etkileşiminde önemli ölçüde rol oynuyor. Kullanımı kolaydır, yerleşik erişilebilirliğe sahiptir ve kullanıcılarımız tarafından bilinir. Form kontrollerinin stili, tarayıcılar ve işletim sistemleri arasında tutarsız olabilir. Ayrıca, tüm cihazlarda tutarlı bir görünüm elde etmek için sık sık birkaç CSS kuralı göndermemiz gerekiyor.

Önceki form kontrollerinin varsayılan stiliydi.
Sonrasında, form kontrollerinin stili güncellendi.

Microsoft'un form denetimlerinin görünümünü modernleştirmek için yaptığı çalışmalar beni çok etkiledi. Güzel görsel stilin yanı sıra, daha iyi dokunma desteği ve iyileştirilmiş klavye desteği dahil daha iyi erişilebilirlik özellikleri vardır.

Microsoft Edge'de kullanıma sunulan yeni form denetimleri artık Chrome 83'te de kullanılabilir. Daha fazla bilgi için Chromium blogunda Form Denetimleri ve Odaklama Güncellemeleri'ne bakın.

Kaynak denemeleri

measureMemory() ile belleği ölçün

Chrome 83'te kaynak denemesi başlatan performance.measureMemory(), sayfanızın bellek kullanımını ölçmeyi ve bellek sızıntılarını tespit etmeyi mümkün kılan yeni bir API'dir.

Bellek sızıntılarını tanıtmak kolaydır:

  • Etkinlik işleyici kaydını iptal etmeyi unutma
  • Bir iframe'den nesne yakalama
  • Bir çalışan kapatılmıyor
  • Dizilerde nesneleri toplama
  • ve diğerleri.

Bellek sızıntıları, sayfaların kullanıcılar tarafından yavaş ve şişirilmiş görünmesine yol açar.

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'de web sayfanızın toplam bellek kullanımını measureMemory() ile izleme bölümüne göz atın.

Native File System API için yapılan güncellemeler

Native File System API, Chrome 83'te yazılabilir akışlar için destek ve dosya tanıtıcılarını kaydetme özelliğine sahip 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 bir akış olduğundan yanıtları bir akıştan diğerine kolayca yönlendirebilirsiniz.

Dosya tanıtıcılarını IndexedDB'ye kaydetmek, durumu depolamanıza veya bir kullanıcının hangi dosyalar üzerinde çalıştığını hatırlamanıza olanak tanır. Örneğin, son düzenlenen dosyaların bir listesini saklayabilir, kullanıcının üzerinde çalıştığı son dosyayı açabilir ve diğer işlemleri yapabilirsiniz.

Bu özellikleri kullanmak için yeni bir kaynak deneme jetonuna ihtiyacınız var. Bu nedenle, tüm ayrıntıları ve yeni kaynak deneme jetonunuzu nasıl alacağınızı öğrenmek için web.dev adresindeki Yerel Dosya Sistemi API'si: Yerel dosyalara erişimi basitleştirme adlı güncellenmiş makalemize göz atın.

Diğer kaynak denemeleri

Kaynak denemesindeki özelliklerin tam listesini inceleyin.

Yeni çapraz kaynak politikaları

Bazı web API'leri, Spectre gibi yan kanal saldırıları riskini artırır. Tarayıcılar bu riski azaltmak için kökler arası erişime kapalı, tercihe dayalı yalıtılmış bir ortam sunar. Kökler arası erişime kapalı durum, document.domain öğesinde değişiklik yapılmasını da engeller. document.domain özelliğinin değiştirilebilmesi aynı site belgeleri arasında iletişime olanak tanır ve aynı kaynak politikasında bir güvenlik açığı olarak kabul edilir.

Eiji'nin yayınına göz atın COOP ve COEP kullanarak web sitenizi "çapraz kaynak izole etme" ile ilgili daha fazla bilgi edinin.

Web hayati verileri

Kullanıcı deneyiminin kalitesini ölçmenin birçok yönü vardır. Kullanıcı deneyiminin bazı yönleri siteye ve bağlama özgü olsa da tüm web deneyimleri için kritik olan ortak bir dizi sinyal ("Önemli Web Verileri") vardır. Bu tür temel kullanıcı deneyimi ihtiyaçları; yükleme deneyimi, etkileşim ve sayfa içeriğinin görsel kararlılığını içerir ve 2020 Core Web Vitals'ın 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, yanıt vermeyi ölçer ve kullanıcıların sayfayla ilk kez etkileşimde bulunmaya çalışırken hissettiği deneyimi ölçer.
  • Cumulative Layout Shift, görsel kararlılığı ölçer ve görünür sayfa içeriğinin beklenmeyen düzen kayması miktarını ölçer.

Tüm bu metrikler kullanıcı merkezli önemli sonuçları yakalar, sahada ölçülebilirdir ve destekleyici laboratuvar teşhis metriği eşdeğerlerini ve araçları içerir. Örneğin, Largest Contentful Paint üst düzey yükleme metriği olsa da izleme ve iyileştirme açısından kritik öneme sahip olan İlk Zengin İçerikli Boyama (FCP) ve İlk Bayt Süresi (TTFB) büyük ölçüde bağımlıdır.

Daha fazla bilgi için Chromium Blogu'ndaki Web Verileri: Sağlıklı bir site için temel metrikler: Web Verileri'ne Giriş başlıklı makaleye göz atın.

Daha birçok avantaj

Gelecekte sizi nelerin beklediğini merak mı ediyorsunuz? Görmek için Fugu API Tracker'a göz atın.

Daha fazla bilgi

Bu bölümde, öne çıkan özelliklerin yalnızca bazıları anlatılmıştır. Chrome 83'teki ek değişiklikler için aşağıdaki bağlantıları kontrol edin.

Abone ol

Videolarımızla ilgili güncel bilgileri edinmek isterseniz 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ı kestirme kadar, ama Chrome 84 yayınlanır yayınlanmaz size anlatmak için burada olacağım: Chrome'daki yenilikler!