Baru di Chrome 66

Pete LePage

Dan masih banyak lagi fitur lainnya.

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

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

CSS Typed Object Model

Jika pernah memperbarui properti CSS melalui JavaScript, Anda telah menggunakan model objek CSS. Namun, fungsi ini menampilkan 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 menambahkan nilai dan menerapkan perubahan saya. Tidak sepenuhnya 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 CSS Typed Object Model baru, nilai CSS ditampilkan sebagai objek JavaScript berjenis, sehingga menghilangkan banyak manipulasi jenis, dan memberikan cara yang lebih masuk akal untuk menggunakan CSS.

Anda mengakses gaya melalui properti .attributeStyleMap atau .styleMap, bukan menggunakan element.style. Fungsi ini menampilkan objek seperti peta yang memudahkan pembacaan atau pembaruan.

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

Dibandingkan dengan CSS Object Model lama, benchmark awal menunjukkan peningkatan operasi per detik sebesar 30%, 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 secara otomatis menangani pembulatan dan pembatasan 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

Eric memiliki postingan bagus dengan beberapa demo dan contoh dalam penjelasannya.

Async Clipboard API

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

Salin & tempel sinkron menggunakan document.execCommand dapat digunakan untuk teks kecil, tetapi untuk hal lainnya, ada kemungkinan besar sifat sinkronnya akan memblokir halaman, sehingga menyebabkan pengalaman yang buruk bagi pengguna. Selain itu, model izin di antara browser tidak konsisten.

Async Clipboard API yang 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 diselesaikan dengan teks.

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

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

Konteks Kanvas Baru BitmapRenderer

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

Secara historis, hal ini berarti membuat tag image, lalu merender kontennya ke canvas. Sayangnya, hal ini 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, keduanya merender secara lebih efisien dan dengan 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 hadir. PaintWorklet dikirimkan 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 AudioWorklet yang menarik di Google Chrome Labs.

Dan banyak lagi!

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

  • TextArea dan Select kini mendukung atribut autocomplete.
  • Menetapkan autocapitalize pada elemen form akan berlaku untuk kolom form turunan apa pun, sehingga meningkatkan kompatibilitas dengan penerapan autocapitalize Safari.
  • trimStart() dan trimEnd() kini tersedia sebagai cara berbasis standar untuk memangkas spasi kosong dari string.

Pastikan untuk melihat Yang baru di Chrome DevTools, untuk mempelajari yang baru di 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 mendapatkan 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.