Baru di Chrome 63

Pete LePage

Dan masih ada banyak lagi.

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

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

Impor modul dinamis

Mengimpor modul JavaScript sangat berguna, tetapi cara ini bersifat statis, sehingga Anda tidak dapat mengimpor modul berdasarkan kondisi runtime.

Untungnya, hal itu berubah di Chrome 63, dengan sintaksis impor dinamis yang baru. Hal ini memungkinkan Anda memuat kode secara dinamis ke dalam modul dan skrip saat runtime. Atribut ini dapat digunakan untuk memuat skrip dengan lambat hanya saat diperlukan, sehingga meningkatkan performa aplikasi Anda.

button.addEventListener('click', event => {
  import('./dialogBox.js')
  .then(dialogBox => {
    dialogBox.open();
  })
  .catch(error => {
    /* Error handling */
  });
});

Daripada memuat seluruh aplikasi saat pengguna pertama kali membuka halaman Anda, Anda dapat mengambil resource yang diperlukan untuk login. Beban awal Anda kecil dan luar biasa. Kemudian, setelah pengguna login, muat sisanya, dan Anda siap melanjutkan.

Iterator dan generator asinkron

Menulis kode yang melakukan iterasi apa pun dengan fungsi async bisa sangat buruk. Bahkan, itu adalah bagian inti dari pertanyaan {i>coding<i} wawancara favorit saya.

Kini, dengan async generator functions dan protokol iterasi asinkron, penggunaan atau implementasi sumber data streaming menjadi efisien, dan pertanyaan coding saya menjadi jauh lebih mudah.

async function* getChunkSizes(url) {
  const response = await fetch(url);
  const b = response.body;
  for await (const chunk of magic(b)) {
    yield chunk.length;
  }
}

Iterator asinkron dapat digunakan dalam loop for-of dan juga untuk membuat iterator asinkron kustom Anda sendiri melalui factory iterator asinkron.

Perilaku scroll

Scroll adalah salah satu cara paling mendasar untuk berinteraksi dengan halaman, tetapi pola tertentu sulit untuk ditangani. Misalnya, fitur tarik untuk refresh browser, yang menggeser ke bawah di bagian atas halaman, akan melakukan hard reload.

Sebelumnya, dengan pemuatan ulang halaman penuh.

Setelah itu, hanya muat ulang konten.

Dalam beberapa kasus, Anda mungkin ingin mengganti perilaku tersebut dan memberikan pengalaman Anda sendiri. Itulah yang dilakukan progressive web app Twitter, saat Anda menarik ke bawah, bukan memuat ulang seluruh halaman, aplikasi ini hanya menambahkan tweet baru ke tampilan saat ini.

Chrome 63 kini mendukung properti overscroll-behavior CSS, sehingga memudahkan penggantian perilaku scroll tambahan default browser.

Anda dapat menggunakannya untuk:

Bagian terbaiknya, overscroll-behavior tidak berpengaruh negatif terhadap performa halaman Anda.

Perubahan UI izin

Saya suka notifikasi push web, tetapi saya sangat kesal dengan banyaknya situs yang meminta izin saat pemuatan halaman, tanpa konteks apa pun - dan saya tidak sendiri.

90% dari semua permintaan izin diabaikan atau diblokir untuk sementara.

Di Chrome 59, kami mulai mengatasi masalah ini dengan memblokir sementara izin jika pengguna menolak permintaan tiga kali. Kini di m63, Chrome untuk Android akan membuat dialog modal permintaan izin.

Ingat, ini bukan hanya untuk notifikasi push, ini juga untuk semua permintaan izin. Jika Anda meminta izin pada waktu yang tepat dan dalam konteks, kami mendapati bahwa pengguna dua setengah kali lebih mungkin untuk memberikan izin.

Dan banyak lagi!

Ini hanyalah beberapa perubahan di Chrome 63 untuk developer, dan masih banyak lagi.

  • finally kini tersedia pada instance Promise dan dipanggil setelah Promise dipenuhi atau ditolak.
  • Device Memory JavaScript API yang baru membantu Anda memahami batasan performa dengan memberikan petunjuk tentang jumlah total RAM pada perangkat pengguna. Anda dapat menyesuaikan pengalaman saat runtime, sehingga mengurangi kompleksitas pada perangkat kelas bawah, sehingga memberikan pengalaman yang lebih baik kepada pengguna dengan lebih sedikit rasa frustrasi.
  • Intl.PluralRules API memungkinkan Anda membuat aplikasi yang memahami pluralisasi bahasa tertentu dengan menunjukkan bentuk jamak mana yang berlaku untuk angka dan bahasa tertentu. Dan dapat membantu dengan angka ordinal.

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 64 dirilis, saya akan memberi tahu Anda apa yang baru di Chrome!