Chrome 77'deki yenilikler

Pete LePage

Chrome 77 kullanıma sunuluyor!

Adım Pete LePage. Chrome 77'de geliştiriciler için neler yeni olduğuna göz atalım.

Largest Contentful Paint

Sitenizin gerçek dünya 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ıma sunulan Largest Contentful Paint API, görüntü alanında görünen en büyük içerik öğesinin oluşturulma süresini raporlar 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);

Polat'ın web.dev adresinde Largest Contentful Paint ile ilgili harika bir yayını 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. Genellikle bu, JavaScript 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ı ve mevcut sınırlamaların çoğunu kaldırmayı kolaylaştı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. 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 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şkilendirilmiş ö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 yerel geç yüklemeyi nasıl kaçırdığımdan emin değilim! 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" olan 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 sitesindeki Web için tarayıcı düzeyinde geç yükleme sayfasına göz atın.

Chrome Geliştirici Zirvesi 2019

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

Web platformu için kullanıma sunulacak en son araçlar ve güncellemeler hakkında bilgi edinmek ve doğrudan Chrome mühendislik ekibinden 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 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.