Chrome 77'deki yenilikler

Pete LePage

Chrome 77 kullanıma sunuldu!

Ben Pete LePage. Şimdi Chrome 77'de geliştiricilere yönelik yenilikleri görelim!

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ü belirtmez. İlk Boyama ve İlk Zengin İçerikli Boyama, yalnızca deneyimin başlangıcını yakalamalıdır. İlk Anlamlı Boyama daha iyidir, ama karmaşık ve bazen yanlıştır.

Chrome 77'den itibaren kullanılabilen Largest Contentful Paint API, görüntü alanında görünür olan en büyük içerik öğesinin oluşturma süresini bildirir ve sayfadaki ana içeriğin 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);

Bir sayfa genellikle aşamalar halinde yüklendiğinden sayfadaki en büyük öğe değişebilir. Bu nedenle, analiz hizmetinize yalnızca son largest-contentful-paint etkinliğini 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 sitesinde Largest Contentful Paint ile ilgili harika bir yayını var.

Yeni form özellikleri

Birçok geliştirici, mevcut öğelerin görünüm ve tarzını özelleştirmek veya tarayıcıda yerleşik olmayan yeni denetimler oluşturmak için özel form kontrolleri oluşturur. Bu genellikle JavaScript'in ve gizli <input> öğelerinin kullanılmasını içerir, 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 kaldırır.

formdata etkinliği

formdata etkinliği, tüm JavaScript kodlarının form gönderimine katılmasına izin veren alt düzey bir API'dir. Bunu kullanmak için etkileşimde bulunmak istediğiniz forma bir formdata etkinlik işleyici 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 tutan bir FormData nesnesini içeren formdata etkinliğini tetikler. Ardından, formdata etkinlik işleyicinizde, gönderilmeden önce formdata öğesini güncelleyebilir veya değiştirebilirsiniz.

Formla ilişkili özel öğeler

Formla ilişkili özel öğeler, özel öğeler ve yerel kontroller arasındaki boşluğu kapatmaya yardımcı olur. Statik formAssociated özelliği eklemek, tarayıcıya özel öğeyi diğer tüm form öğeleri gibi işlemesini bildirir. Yerel kontrollerle tutarlılık sağlamak için name, value ve validity gibi giriş öğelerinde bulunan 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 yetenekli form kontrolleri sayfasına göz atın.

Yerel geç yükleme

Son videomda yerel geç yüklemeyi neden kaçırdığımdan emin değilim. Oldukça şaşırtıcı, bu yüzden şimdi ekliyorum. Geç yükleme, ekran dışı <img> veya <iframe> gibi kritik olmayan kaynakların yüklenmesini, gerekli olana kadar erteleyerek sayfanızın performansını artırmanıza olanak tanıyan bir tekniktir.

Chrome 76'dan itibaren tarayıcı, özel geç yükleme kodu yazmanıza veya ayrı bir JavaScript kitaplığı kullanmanıza gerek kalmadan geç yüklemeyi sizin yerinize halleder.

Tarayıcıya bir resim veya iframe'in geç yüklenmesini istediğinizi bildirmek için loading="lazy" özelliğini kullanın. "Ekranın üst kısmındaki" resimler ve iframe'ler normal şekilde yüklenir. Aşağıdakiler ise yalnızca kullanıcı yakınlarında kaydırdığında getirilir.

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

Ayrıntılar için web.dev'de Tarayıcı düzeyinde geç yükleme sayfasına göz atın.

Chrome Geliştirici Zirvesi 2019

Chrome Geliştirici Zirvesi 11-12 Kasım tarihlerinde düzenlenecek.

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

Etkinlik, YouTube kanalımızda canlı olarak yayınlanacak. Dilerseniz Chrome Dev Summit 2019 web sitesinden de davet isteğinde bulunabilirsiniz.

Diğer ölçütler

Bunlar, geliştiriciler için Chrome 77'de yapılan değişikliklerden sadece birkaçı. Elbette daha birçok şey var.

Kaynak denemesi olarak kullanılabilen Contact Picker API, kullanıcıların kişi listelerinden bir giriş veya giriş seçmesine ve seçilen kişilerle ilgili sınırlı ayrıntıları bir web sitesiyle paylaşmasına olanak tanıyan, isteğe bağlı yeni bir seçicidir.

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

Daha fazla bilgi

Burada, öne çıkan özelliklerin yalnızca bir kısmı ele alınıyor. Chrome 77'deki ek değişiklikler için aşağıdaki bağlantıları kontrol edin.

Abone ol

Videolarımızla ilgili güncel bilgileri almak isterseniz Chrome Developers YouTube kanalımıza abone olun. Yeni bir video sunduğumuzda e-posta bildirimi alırsınız.

Ben Pete LePage. Chrome 78 yayınlanır yayınlanmaz, size Chrome'daki yenilikleri anlatacağım.