Baru di Chrome 77

Pete LePage

Chrome 77 sekarang sudah diluncurkan!

Saya Pete LePage, mari selami dan lihat apa yang baru untuk developer di Chrome 77!

Largest Contentful Paint (LCP)

Memahami dan mengukur performa situs Anda di dunia nyata mungkin sulit. Metrik seperti load, atau DOMContentLoaded, tidak memberi tahu Anda apa yang dilihat pengguna di layar. First Paint, dan First Contentful Paint, hanya merekam awal pengalaman. First Meaningful Paint lebih baik, tetapi kompleks, dan terkadang salah.

Largest Contentful Paint API, yang tersedia mulai Chrome 77, melaporkan waktu render elemen konten terbesar yang terlihat di area pandang dan memungkinkan pengukuran saat konten utama halaman dimuat.

Untuk mengukur Largest Contentful Paint, Anda harus menggunakan Performance Observer, dan mencari peristiwa largest-contentful-paint.

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);

Karena halaman sering dimuat secara bertahap, elemen terbesar di halaman mungkin akan berubah, jadi Anda hanya boleh melaporkan peristiwa largest-contentful-paint terakhir ke layanan analisis.

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

Phil memiliki postingan bagus tentang Largest Contentful Paint di web.dev.

Kemampuan formulir baru

Banyak developer membuat kontrol formulir kustom, baik untuk menyesuaikan tampilan dan nuansa elemen yang ada, maupun untuk membuat kontrol baru yang tidak disertakan dalam browser. Biasanya, hal ini melibatkan penggunaan JavaScript dan elemen <input> tersembunyi, tetapi ini bukan solusi yang sempurna.

Dua fitur web baru, yang ditambahkan di Chrome 77, memudahkan pembuatan kontrol formulir kustom, dan menghapus banyak batasan yang ada.

Peristiwa formdata

Peristiwa formdata adalah API tingkat rendah yang memungkinkan kode JavaScript apa pun berpartisipasi dalam pengiriman formulir. Untuk menggunakannya, tambahkan pemroses peristiwa formdata ke formulir yang ingin Anda gunakan untuk berinteraksi.

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

Saat pengguna mengklik tombol kirim, formulir akan mengaktifkan peristiwa formdata, yang mencakup objek FormData yang menyimpan semua data yang dikirim. Kemudian, di pengendali peristiwa formdata, Anda dapat memperbarui atau mengubah formdata sebelum dikirim.

Elemen kustom yang terkait formulir

Elemen kustom yang terkait dengan formulir membantu menjembatani kesenjangan antara elemen kustom dan kontrol native. Menambahkan properti formAssociated statis akan memberi tahu browser untuk memperlakukan elemen kustom seperti semua elemen formulir lainnya. Anda juga harus menambahkan properti umum yang ditemukan di elemen input, seperti name, value, dan validity untuk memastikan konsistensi dengan kontrol native.

class MyCounter extends HTMLElement {
  static formAssociated = true;

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

Lihat Kontrol formulir yang lebih canggih di web.dev untuk mengetahui semua detailnya.

Pemuatan lambat native

Saya tidak yakin mengapa saya melewatkan pemuatan lambat native di video terakhir saya. Ini cukup menarik, jadi saya akan menyertakannya sekarang. Pemuatan lambat adalah teknik yang memungkinkan Anda menunda pemuatan resource non-penting, seperti <img> di luar layar, atau <iframe> - hingga diperlukan, sehingga meningkatkan performa halaman Anda.

Mulai Chrome 76, browser akan menangani pemuatan lambat untuk Anda, tanpa perlu menulis kode pemuatan lambat kustom, atau menggunakan library JavaScript terpisah.

Untuk memberi tahu browser bahwa Anda ingin gambar, atau iframe dimuat lambat, gunakan atribut loading="lazy". Gambar dan iframe yang "di atas lipatan" akan dimuat secara normal. Dan yang ada di bawah, hanya diambil saat pengguna men-scroll di dekatnya.

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

Lihat Pemuatan lambat tingkat browser untuk web di web.dev untuk mengetahui detailnya.

Chrome Dev Summit 2019

Chrome Dev Summit akan diselenggarakan pada 11 dan 12 November.

Ini adalah peluang bagus untuk mempelajari alat dan update terbaru yang akan datang ke platform web, serta mendengar langsung dari tim engineer Chrome.

Acara ini akan di-streaming secara live di channel YouTube kami, atau jika Anda ingin menghadiri secara langsung, Anda dapat meminta undangan di situs Chrome Dev Summit 2019.

Dan banyak lagi!

Ini hanyalah beberapa perubahan di Chrome 77 untuk developer, tentu saja, masih banyak lagi.

Contact Picker API, yang tersedia sebagai uji coba origin, adalah pemilih on-demand baru yang memungkinkan pengguna memilih entri atau entri dari daftar kontak mereka dan membagikan detail terbatas dari kontak yang dipilih dengan situs.

Selain itu, ada unit pengukuran baru di intl.NumberFormat API.

Bacaan lebih lanjut

Bagian ini hanya membahas beberapa sorotan utama. Lihat link di bawah untuk mengetahui perubahan tambahan di Chrome 77.

Langganan

Ingin terus mendapatkan info terbaru tentang video kami, subscribe ke channel YouTube Chrome Developers, dan Anda akan mendapatkan notifikasi email setiap kali kami meluncurkan video baru.

Saya Pete LePage, dan segera setelah Chrome 78 dirilis, saya akan langsung memberi tahu Anda -- apa yang baru di Chrome.