Baru di Chrome 66

Pete LePage

Dan masih ada banyak lagi!

Saya Pete LePage. Mari kita selami dan lihat apa yang baru untuk developer di Chrome 66.

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

Model Objek Jenis CSS

Jika Anda pernah memperbarui properti CSS melalui JavaScript, Anda telah menggunakan CSS model objek. Namun, metode ini mengembalikan semuanya sebagai string.

el.style.opacity = 0.3;
console.log(typeof el.style.opacity);
> 'string' // A string!?

Untuk menganimasikan properti opacity, saya harus mentransmisikan string ke angka, kemudian menambah nilainya dan menerapkan perubahan saya. Tidak terlalu ideal.

function step(timestamp) {
  const currentOpacity = parseFloat(el.style.opacity);
  const newOpacity = currentOpacity + 0.01;
  element.style.opacity = newOpacity;
  if (newOpacity <= 1) {
    window.requestAnimationFrame(step);
  }
}

Dengan Typed Object Model CSS yang baru, nilai CSS ditampilkan seperti yang diketik objek JavaScript, menghilangkan banyak manipulasi jenis, dan menyediakan cara yang lebih masuk akal untuk bekerja dengan CSS.

Daripada menggunakan element.style, Anda mengakses gaya melalui .attributeStyleMap atau .styleMap. Metode ini mengembalikan objek seperti peta yang membuatnya mudah dibaca atau diperbarui.

el.attributeStyleMap.set('opacity', 0.3);
const oType = typeof el.attributeStyleMap.get('opacity').value;
console.log(oType);
> 'number' // Yay!

Dibandingkan dengan Model Objek CSS lama, tolok ukur awal menunjukkan persentase 30% peningkatan operasi per detik - sesuatu yang sangat penting untuk animasi JavaScript.

el.attributeStyleMap.set('opacity', 0.3);
el.attributeStyleMap.has('opacity'); // true
el.attributeStyleMap.delete('opacity');
el.attributeStyleMap.clear(); // remove all styles

Hal ini juga membantu menghilangkan {i>bug<i} yang disebabkan oleh lupa untuk mendapatkan nilai dari string ke angka, dan secara otomatis menangani pembulatan dan penjepit masing-masing. Ditambah lagi, ada beberapa metode baru yang rapi untuk menangani unit konversi, aritmatika dan persamaan.

el.style.opacity = 3;
const opacity = el.computedStyleMap().get('opacity').value;
console.log(opacity);
> 1

Erik memiliki postingan yang bagus dengan beberapa demo dan contoh dalam penjelasan kami.

Async Clipboard API

const successful = document.execCommand('copy');

Salinan sinkron & menempelkan menggunakan document.execCommand tidak masalah untuk sedikit teks, tapi untuk hal lainnya, kemungkinan besar itu adalah alami akan memblokir laman, sehingga menyebabkan pengalaman yang buruk bagi pengguna. dan model izin akses antar-browser tidak konsisten.

Asynchronous Clipboard API yang baru adalah pengganti yang bekerja secara asinkron, dan terintegrasi dengan API izin untuk memberikan pengalaman yang lebih baik bagi pengguna.

Teks dapat disalin ke papan klip dengan memanggil writeText().

navigator.clipboard.writeText('Copy me!')
  .then(() => {
    console.log('Text is on the clipboard.');
  });

Karena API ini asinkron, fungsi writeText() akan menampilkan Promise yang akan diselesaikan atau ditolak tergantung pada apakah teks yang berhasil disalin.

Demikian pula, teks dapat dibaca dari papan klip dengan memanggil getText() dan menunggu Promise yang dikembalikan untuk diselesaikan dengan teks.

navigator.clipboard.getText()
  .then((text) => {
    console.log('Clipboard: ', text);
  });

Lihat postingan dan demo Jaka di penjelasan kami. Ia juga memiliki contoh yang menggunakan fungsi async.

Konteks Kanvas Baru BitmapRenderer

Elemen canvas memungkinkan Anda memanipulasi grafis pada level piksel, dapat menggambar grafik, memanipulasi foto, atau bahkan melakukan pemrosesan video secara waktu nyata. Namun, kecuali jika Anda memulai dengan canvas kosong, Anda memerlukan cara untuk merender gambar di canvas.

Secara historis, itu berarti membuat tag image, lalu merendernya isi ke canvas. Sayangnya, itu berarti browser perlu menyimpan beberapa salinan gambar dalam memori.

const context = el.getContext('2d');
const img = new Image();
img.onload = function () {
  context.drawImage(img, 0, 0);
}
img.src = 'llama.png';

Mulai Chrome 66, ada konteks rendering asinkron baru yang menyederhanakan tampilan objek ImageBitmap. Sekarang mereka merender lebih banyak secara efisien dan minim jank dengan bekerja secara asinkron dan menghindari memori duplikasi.

Untuk menggunakannya:

  1. Panggil createImageBitmap dan berikan blob gambar untuk membuat gambar.
  2. Ambil konteks bitmaprenderer dari canvas.
  3. Kemudian transfer gambar.
const image = await createImageBitmap(imageBlob);
const context = el.getContext('bitmaprenderer');
context.transferFromImageBitmap(image);

Selesai, saya telah merender gambar.

AudioWorklet

Worklet sudah masuk! PaintWorklet diluncurkan di Chrome 65, dan sekarang kami mengaktifkan AudioWorklet secara default di Chrome 66. Jenis Worklet baru ini dapat digunakan untuk memproses audio di thread audio khusus, menggantikan ScriptProcessorNode lama yang berjalan di thread utama. Setiap AudioWorklet berjalan dalam cakupan globalnya sendiri, mengurangi latensi dan meningkatkan stabilitas throughput.

Ada beberapa contoh menarik dari AudioWorklet di Lab Google Chrome.

Dan banyak lagi!

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

  • TextArea dan Select kini mendukung atribut autocomplete.
  • Menyetel autocapitalize pada elemen form akan diterapkan ke semua formulir turunan {i>field<i}, meningkatkan kompatibilitas dengan implementasi Safari autocapitalize.
  • trimStart() dan trimEnd() kini tersedia sebagai cara berbasis standar memangkas spasi kosong dari string.

Pastikan untuk melihat Baru di Chrome DevTools, untuk mempelajari apa yang baru di DevTools di Chrome 66. Jika Anda tertarik, Progressive Web App, lihat Serial video Roadshow PWA. Lalu, klik tombol subscribe di channel YouTube, dan Anda akan mendapatkan notifikasi email setiap kali kami meluncurkan video baru.

Saya Pete LePage, dan segera setelah Chrome 67 dirilis, saya akan benar kami akan memberi tahu Anda -- yang baru di Chrome!