Baru di Chrome 64

Pete LePage

Dan masih banyak lagi fitur lainnya.

Saya Pete LePage. Mari kita pelajari lebih lanjut dan lihat apa yang baru untuk developer di Chrome 64.

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

ResizeObserver

Melacak kapan perubahan ukuran elemen bisa sedikit menyakitkan. Kemungkinan besar, Anda akan melampirkan pemroses ke peristiwa resize dokumen, lalu memanggil getBoundingClientRect atau getComputedStyle. Tapi, keduanya dapat menyebabkan {i>layout thrashing<i}.

Bagaimana jika ukuran jendela browser tidak berubah, tetapi elemen baru ditambahkan ke dokumen? Atau Anda menambahkan display: none ke elemen? Kedua hal tersebut dapat mengubah ukuran elemen lain dalam halaman.

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

Seperti Observer lainnya, penggunaannya cukup sederhana, buat objek ResizeObserver dan teruskan 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 Elemen untuk detail selengkapnya dan contoh di dunia nyata.

Saya tidak suka tab-under. Anda pasti tahu, ini adalah saat halaman membuka pop-up ke beberapa tujuan 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 memungkinkan mereka mengikuti pengalihan jika diinginkan.

import.meta

Saat menulis modul JavaScript, Anda sering kali ingin mengakses metadata khusus host tentang 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 saat Anda ingin me-resolve resource yang relatif terhadap file modul, bukan dokumen HTML saat ini.

Dan banyak lagi!

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

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

window.alert()

Oh, satu lagi! Meskipun sebenarnya bukan "fitur pengembang", ini membuat saya senang. window.alert() tidak lagi membawa 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 sesuatu yang memicu window.alert pada saya. Saya melihat Google Kalender lama Anda.

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

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