Baru di Chrome 64

Pete LePage

Dan masih ada banyak lagi!

Saya Pete LePage. Mari pelajari lebih dalam dan lihat hal-hal baru untuk developer di Chrome 64.

Ingin daftar lengkap perubahan? Lihat daftar perubahan repositori sumber Chromium.

ResizeObserver

Melacak saat ukuran elemen berubah bisa sedikit merepotkan. Kemungkinan besar, Anda akan menambahkan pemroses ke peristiwa resize dokumen, lalu memanggil getBoundingClientRect atau getComputedStyle. Namun, keduanya dapat menyebabkan {i>layout thrashing<i}.

Dan bagaimana jika jendela browser tidak berubah ukurannya, tetapi ada elemen baru yang ditambahkan ke dokumen? Atau Anda menambahkan display: none ke elemen? Keduanya dapat mengubah ukuran elemen lain di dalam halaman.

ResizeObserver memberi tahu Anda setiap kali ukuran elemen berubah, dan memberikan tinggi dan lebar baru untuk elemen, sehingga mengurangi risiko layout thrashing.

Seperti Pengamat lainnya, penggunaannya cukup sederhana, yaitu membuat objek ResizeObserver dan meneruskan callback ke konstruktor. Callback akan diberi array ResizeOberverEntries–satu entri per elemen yang diamati–yang berisi dimensi baru untuk elemen.

const ro = new ResizeObserver( entries => {
  for (const entry of entries) {
    const cr = entry.contentRect;
    console.log('Element:', entry.target);
    console.log(`Element size: ${cr.width}px × ${cr.height}px`);
    console.log(`Element padding: ${cr.top}px ; ${cr.left}px`);
  }
});

// Observe one or multiple elements
ro.observe(someElement);

Lihat ResizeObserver: Ini seperti document.onresize untuk Elements untuk detail lebih lanjut dan contoh dunia nyata.

Saya benci tab-under. Bias ini terjadi karena halaman membuka pop-up ke tujuan tertentu DAN menavigasi halaman. Biasanya salah satunya adalah iklan atau sesuatu yang tidak Anda inginkan.

Mulai Chrome 64, jenis navigasi ini akan diblokir, dan Chrome akan menampilkan beberapa UI native kepada pengguna sehingga mereka dapat mengikuti pengalihan jika diinginkan.

import.meta

Saat menulis modul JavaScript, Anda sering kali menginginkan akses ke metadata khusus host terkait modul saat ini. Chrome 64 kini mendukung properti import.meta dalam modul dan menampilkan URL untuk modul sebagai import.meta.url.

Hal ini sangat membantu jika Anda ingin me-resolve resource yang terkait dengan file modul, bukan dokumen HTML saat ini.

Dan banyak lagi!

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

  • Chrome kini mendukung tangkapan bernama dan escape properti Unicode dalam ekspresi reguler.
  • Nilai preload default untuk elemen <audio> dan <video> sekarang adalah metadata. Tindakan ini akan menyelaraskan Chrome dengan browser lain dan membantu mengurangi penggunaan bandwidth serta resource dengan memuat metadata saja, bukan media itu sendiri.
  • Anda kini dapat menggunakan Request.prototype.cache untuk melihat mode cache Request dan menentukan apakah suatu permintaan merupakan permintaan pemuatan ulang atau tidak.
  • Dengan Focus Management API, Anda kini dapat memfokuskan elemen tanpa men-scroll ke elemen tersebut dengan atribut preventScroll.

window.alert()

Oh, dan satu lagi! Meskipun ini sebenarnya bukan "fitur pengembang", hal itu membuat saya senang. window.alert() tidak lagi menghadirkan tab latar belakang ke latar depan. Sebagai gantinya, pemberitahuan akan ditampilkan saat pengguna beralih kembali ke tab tersebut.

Tidak ada lagi pengalihan tab acak karena ada yang mengaktifkan window.alert pada saya. Saya melihat Google Kalender lama Anda.

Pastikan untuk subscribe ke channel YouTube kami, dan Anda akan menerima notifikasi email setiap kali kami meluncurkan video baru.

Saya Pete LePage, dan segera setelah Chrome 65 dirilis, saya akan ada di sini untuk memberi tahu Anda -- apa yang baru di Chrome!