Chrome 77'deki yenilikler

Pete LePage

Chrome 77 kullanıma sunuldu.

Adım Pete LePage. Chrome 77'de geliştiriciler için neler yeni olduğunu inceleyelim.

Largest Contentful Paint

Sitenizin gerçek dünyadaki performansını anlamak ve ölçmek zor olabilir. load veya DOMContentLoaded gibi metrikler, kullanıcının ekranda ne gördüğünü size söylemez. İlk Boyama ve İlk Zengin İçerikli Boyama, yalnızca deneyimin başlangıcını yakalar. İlk Anlamlı Boyama daha iyidir ancak karmaşıktır ve bazen yanlıştır.

Chrome 77'den itibaren kullanılabilen Largest Contentful Paint API, görüntü alanında görünen en büyük içerik öğesinin oluşturma süresini bildirir ve sayfanın ana içeriğinin ne zaman yüklendiğini ölçmeyi mümkün kılar.

Largest Contentful Paint'i ölçmek için bir Performans Gözlemcisi kullanmanız ve largest-contentful-paint etkinliklerini aramanız gerekir.

let lcp;
const po = new PerformanceObserver((eList) => {
  const e = eList.getEntries();
  const last = e[e.length - 1];
  lcp = last.renderTime || last.loadTime;
});

const poOpts = {
  type: 'largest-contentful-paint',
  buffered: true
}
po.observe(poOpts);

Sayfalar genellikle aşamalı olarak yüklendiğinde sayfadaki en büyük öğenin değişmesi olasıdır. Bu nedenle, yalnızca son largest-contentful-paint etkinliğini analiz hizmetinize bildirmeniz gerekir.

addEventListener('visibilitychange', function fn() {
  const visState = document.visibilityState;
  if (lcp && visState === 'hidden') {
    sendToAnalytics({'lcp': lcp});
    removeEventListener('visibilitychange', fn, true);
  }
}, true);

Phil'in web.dev'de Largest Contentful Paint hakkında harika bir makalesi var.

Yeni form özellikleri

Birçok geliştirici, mevcut öğelerin görünümünü ve tarzını özelleştirmek veya tarayıcıda yerleşik olmayan yeni kontroller oluşturmak için özel form kontrolleri oluşturur. Bu genellikle JavaScript ve gizli <input> öğelerinin kullanılmasını gerektirir ancak mükemmel bir çözüm değildir.

Chrome 77'de eklenen iki yeni web özelliği, özel form denetimleri oluşturmayı kolaylaştırır ve mevcut sınırlamaların çoğunu ortadan kaldırır.

formdata etkinliği

formdata etkinliği, herhangi bir JavaScript kodunun form gönderme işlemine katılmasına olanak tanıyan düşük düzey bir API'dir. Bu özelliği kullanmak için etkileşimde bulunmak istediğiniz forma bir formdata etkinlik dinleyicisi ekleyin.

const form = document.querySelector('form');
form.addEventListener('formdata', ({formData}) => {
  formData.append('my-input', myInputValue);
});

Kullanıcı gönder düğmesini tıkladığında form, gönderilen tüm verileri içeren bir FormData nesnesi içeren formdata etkinliğini tetikler. Ardından, formdata etkinlik işleyicinizde formdata öğesini gönderilmeden önce güncelleyebilir veya değiştirebilirsiniz.

Formla ilişkili özel öğeler

Formla ilişkilendirilmiş özel öğeler, özel öğeler ile yerel kontroller arasındaki boşluğu doldurmaya yardımcı olur. Statik bir formAssociated özelliği eklemek, tarayıcıya özel öğeyi diğer tüm form öğeleri gibi ele almasını söyler. Yerleşik denetimlerle tutarlılık sağlamak için giriş öğelerinde bulunan name, value ve validity gibi ortak özellikleri de eklemeniz gerekir.

class MyCounter extends HTMLElement {
  static formAssociated = true;

  constructor() {
    super();
    this._internals = this.attachInternals();
    this._value = 0;
  }
  ...
}

Tüm ayrıntılar için web.dev'deki Daha güçlü form kontrolleri başlıklı makaleye göz atın.

Yerel geç yükleme

Son videomda neden yerel gecikmeli yüklemeyi atladığımı bilmiyorum. Oldukça etkileyici olduğu için şimdi ekledim. Yavaş yükleme, ekran dışındaki <img>'ler veya <iframe>'ler gibi kritik olmayan kaynakların yüklenmesini, ihtiyaç duyulana kadar ertelemenize olanak tanıyan bir tekniktir. Bu sayede sayfanızın performansı artar.

Chrome 76'dan itibaren, özel yavaş yükleme kodu yazmanıza veya ayrı bir JavaScript kitaplığı kullanmanıza gerek kalmadan tarayıcı yavaş yüklemeyi sizin için yönetir.

Tarayıcıya bir resim veya iframe'ın yavaş yüklenmesini istediğinizi belirtmek için loading="lazy" özelliğini kullanın. "Sayfanın üst kısmında" bulunan resimler ve iFrame'ler normal şekilde yüklenir. Aşağıdakiler ise yalnızca kullanıcı ekranı kaydırarak bu öğelere yaklaştığında getirilir.

<img src="image.jpg" loading="lazy" width="400" height="250" alt="...">

Ayrıntılar için web.dev'deki Web için tarayıcı düzeyinde geç yükleme başlıklı makaleyi inceleyin.

Chrome Geliştirici Zirvesi 2019

Chrome Dev Summit 11-12 Kasım'da gerçekleşecek.

Bu etkinlik, web platformuna eklenen en yeni araçlar ve güncellemeler hakkında bilgi edinmek ve doğrudan Chrome mühendislik ekibinden bilgi almak için mükemmel bir fırsattır.

Etkinlik, YouTube kanalımızda canlı olarak yayınlanacak. Dilerseniz Chrome Dev Summit 2019 web sitesinden davetiye isteğinde bulunarak etkinliğe bizzat katılabilirsiniz.

Diğer özellikler

Bunlar, Chrome 77'deki geliştiricilere yönelik değişikliklerden yalnızca birkaçıdır. Elbette daha birçok değişiklik vardır.

Kaynak deneme sürümü olarak sunulan Contact Picker API, kullanıcıların kişi listelerinden bir veya daha fazla giriş seçmesine ve seçilen kişilerin sınırlı bilgilerini bir web sitesiyle paylaşmasına olanak tanıyan yeni bir isteğe bağlı seçicidir.

Ayrıca intl.NumberFormat API'de yeni ölçü birimleri de var.

Daha fazla bilgi

Bu, önemli noktalardan yalnızca bazılarını kapsar. Chrome 77'deki 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.

Adım Pete LePage. Chrome 78 yayınlanır yayınlanmaz Chrome'daki yenilikleri size bildirmek için burada olacağım.