Baru di Chrome 66

Dan masih ada banyak lagi!

Saya Pete LePage. Mari selami dan lihat hal-hal baru untuk developer di Chrome 66.

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

Model Objek Berjenis CSS

Jika Anda pernah memperbarui properti CSS melalui JavaScript, berarti Anda telah menggunakan model objek CSS. Namun, fungsi 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, lalu menambah nilai 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 Model Objek Berjenis CSS yang baru, nilai CSS diekspos sebagai objek JavaScript yang diketik, sehingga menghilangkan banyak manipulasi jenis, dan memberikan cara yang lebih logis untuk bekerja dengan CSS.

Daripada menggunakan element.style, Anda mengakses gaya melalui properti .attributeStyleMap atau .styleMap. Mereka menampilkan 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 peningkatan operasi per detik sekitar 30% - 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 bug yang disebabkan oleh lupa mentransmisikan nilai dari string ke angka, dan otomatis menangani pembulatan dan klem nilai. Selain itu, ada beberapa metode baru yang cukup rapi untuk menangani konversi unit, aritmetika, dan kesetaraan.

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-nya.

Async Clipboard API

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

Salin & tempel sinkron menggunakan document.execCommand dapat digunakan untuk sedikit teks, tetapi untuk hal lainnya, kemungkinan sifat sinkron akan memblokir halaman, sehingga menyebabkan pengalaman yang buruk bagi pengguna. Dan model izin antar-browser tidak konsisten.

Async Clipboard API baru adalah pengganti yang berfungsi 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() menampilkan Promise yang akan di-resolve atau ditolak, bergantung pada apakah teks yang kita teruskan berhasil disalin.

Demikian pula, teks dapat dibaca dari papan klip dengan memanggil getText() dan menunggu Promise yang ditampilkan untuk di-resolve dengan teks.

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

Lihat postingan dan demo Jason dalam penjelasan. Dia juga memiliki contoh yang menggunakan fungsi async.

Konteks Canvas Baru BitmapRenderer

Elemen canvas memungkinkan Anda memanipulasi grafis pada tingkat piksel. Anda dapat menggambar grafik, memanipulasi foto, atau bahkan melakukan pemrosesan video real time. Namun, kecuali jika memulai dengan canvas kosong, Anda memerlukan cara untuk merender gambar pada canvas.

Secara historis, hal ini berarti membuat tag image, lalu merender kontennya ke canvas. Sayangnya, itu berarti browser perlu menyimpan beberapa salinan gambar di 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. Anotasi kini merender secara lebih efisien dan lebih sedikit jank dengan bekerja secara asinkron dan menghindari duplikasi memori.

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 dalam Chrome 65, dan kini 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, yang mengurangi latensi dan meningkatkan stabilitas throughput.

Ada beberapa contoh AudioWorklet menarik di Google Chrome Labs.

Dan banyak lagi!

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

  • TextArea dan Select kini mendukung atribut autocomplete.
  • Menyetel autocapitalize pada elemen form akan diterapkan ke setiap kolom formulir turunan, sehingga meningkatkan kompatibilitas dengan implementasi autocapitalize Safari.
  • trimStart() dan trimEnd() kini tersedia sebagai cara berbasis standar untuk memangkas spasi kosong dari string.

Pastikan untuk melihat Baru di Chrome DevTools, guna mempelajari yang baru untuk DevTools di Chrome 66. Selain itu, jika Anda tertarik dengan Progressive Web App, lihat serial video Roadshow PWA yang baru. Kemudian, klik tombol subscribe di channel YouTube kami, dan Anda akan menerima notifikasi email setiap kali kami meluncurkan video baru.

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