Chrome 77 kullanıma sunuldu!
- Largest Contentful Paint ile sitenizin performansını daha iyi bir şekilde izleyebilirsiniz.
- Formlar'a yeni özellikler sunulmaktadır.
- Yerel geç yükleme kullanıma sunuldu.
- Chrome DevSummit 2019, 11-12 Kasım 2019 tarihleri arasında gerçekleştirilecek.
- Ve daha fazlası.
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.
- Chrome Geliştirici Araçları'ndaki yenilikler (77)
- Chrome 77 için desteğin sonlandırılması ve kaldırılması
- Chrome 77 için ChromeStatus.com güncellemeleri
- Chrome 77'de JavaScript'teki yenilikler
- Chromium kaynak deposu değişiklik listesi
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.