Baru di Chrome 83

Pete LePage

Chrome 83 sekarang mulai diluncurkan ke stabil.

Berikut hal yang perlu Anda ketahui:

Saya Pete LePage, bekerja dan mengambil gambar dari rumah. mari kita pelajari lebih dalam dan lihat apa yang baru untuk pengembang di Chrome 83!

Jenis tepercaya

Pembuatan skrip lintas situs berbasis DOM merupakan salah satu kerentanan keamanan yang paling umum di web. Sangat mudah untuk memasukkan sesuatu ke halaman Anda secara tidak sengaja. Jenis tepercaya dapat membantu mencegah kerentanan semacam ini, karena Anda harus memproses data sebelum meneruskannya ke fungsi yang berpotensi berbahaya.

Misalnya innerHTML, dengan mengaktifkan jenis tepercaya, jika saya mencoba meneruskan string, pengujian akan gagal dengan TypeError karena browser tidak tahu apakah string dapat dipercaya atau tidak.

// Trusted types turned on
const elem = document.getElementById('myDiv');
elem.innerHTML = `Hello, world!`;
// Will throw a TypeError

Sebagai gantinya, saya perlu menggunakan fungsi aman, seperti textContent, meneruskan jenis tepercaya, atau membuat elemen dan menggunakan appendChild().

// Use a safe function
elem.textContent = ''; // OK

// Pass in a trusted type
import DOMPurify from 'dompurify';
const str = `Hello, world!`;
elem.innerHTML = DOMPurify.sanitize(str, {RETURN_TRUSTED_TYPE: true});

// Create an element
const img = document.createElement('img');
img.src = 'xyz.jpg';
elem.appendChild(img);

Sebelum mengaktifkan jenis tepercaya, Anda sebaiknya mengidentifikasi dan memperbaiki setiap pelanggaran menggunakan header CSP report-only.

Content-Security-Policy-Report-Only: require-trusted-types-for 'script'; report-uri //example.com

Kemudian setelah semuanya terisi, Anda dapat mengaktifkannya dengan benar. Detail lengkapnya ada di Mencegah kerentanan pembuatan skrip lintas situs berbasis DOM dengan Jenis Tepercaya di web.dev.

Pembaruan pada kontrol formulir

Kami menggunakan kontrol formulir HTML setiap hari, dan itu adalah kunci untuk begitu banyak interaktivitas web. Aplikasi ini mudah digunakan, memiliki aksesibilitas bawaan, dan familier bagi pengguna kami. Gaya visual kontrol formulir mungkin tidak konsisten di seluruh browser dan sistem operasi. Dan kita sering kali harus mengirimkan sejumlah aturan CSS hanya untuk mendapatkan tampilan yang konsisten di seluruh perangkat.

Sebelumnya, gaya default kontrol formulir.
Setelah itu, gaya visual kontrol formulir diperbarui.

Saya sangat terkesan dengan upaya yang dilakukan Microsoft untuk memodernisasi tampilan kontrol formulir. Selain gaya visual yang lebih bagus, game ini memberikan dukungan sentuh yang lebih baik, dan aksesibilitas yang lebih baik, termasuk dukungan keyboard yang lebih baik.

Kontrol formulir baru telah tersedia di Microsoft Edge, dan kini tersedia di Chrome 83. Untuk mengetahui informasi selengkapnya, lihat Update pada Kontrol dan Fokus Formulir di blog Chromium.

Uji coba origin

Mengukur memori dengan measureMemory()

Memulai uji coba origin di Chrome 83, performance.measureMemory() adalah API baru yang memungkinkan pengukuran penggunaan memori halaman, dan mendeteksi kebocoran memori.

Kebocoran memori mudah diketahui:

  • Lupa membatalkan pendaftaran pemroses peristiwa
  • Mengambil objek dari iframe
  • Tidak menutup pekerja
  • Mengumpulkan objek dalam array
  • dan seterusnya.

Kebocoran memori menyebabkan halaman tampak lambat dan membengkak bagi pengguna.

if (performance.measureMemory) {
  try {
    const result = await performance.measureMemory();
    console.log(result);
  } catch (err) {
    console.error(err);
  }
}

Lihat Memantau total penggunaan memori halaman web dengan measureMemory() di web.dev untuk mengetahui semua detail API baru.

Update untuk Native File System API

Native File System API memulai uji coba origin baru di Chrome 83 dengan dukungan untuk streaming yang dapat ditulis, dan kemampuan untuk menyimpan handle file.

async function writeURLToFile(fileHandle, url) {
  // Create a FileSystemWritableFileStream to write to.
  const writable = await fileHandle.createWritable();
  // Make an HTTP request for the contents.
  const response = await fetch(url);
  // Stream the response into the file.
  await response.body.pipeTo(writable);
  // pipeTo() closes the destination pipe automatically.
}

Stream yang dapat ditulisi memudahkan penulisan ke file, dan karena merupakan stream, Anda dapat dengan mudah menyalurkan respons dari satu stream ke stream lainnya.

Dengan menyimpan handle file ke IndexedDB, Anda dapat menyimpan status, atau mengingat file mana yang sedang dikerjakan pengguna. Misalnya, menyimpan daftar file yang baru saja diedit, membuka file terakhir yang sedang dikerjakan pengguna, dan sebagainya.

Anda memerlukan token uji coba origin baru untuk menggunakan fitur ini, jadi baca artikel terbaru saya Native File System API: Menyederhanakan akses ke file lokal di web.dev beserta semua detailnya, dan cara mendapatkan token uji coba origin baru Anda.

Uji coba origin lainnya

Periksa daftar lengkap fitur dalam uji coba origin.

Kebijakan lintas origin baru

Beberapa web API meningkatkan risiko serangan side-channel seperti Spectre. Untuk mengurangi risiko tersebut, browser menawarkan lingkungan terisolasi berbasis keikutsertaan yang disebut terisolasi lintas origin. Status yang diisolasi lintas origin juga mencegah modifikasi document.domain. Kemampuan untuk mengubah document.domain memungkinkan komunikasi antara dokumen situs yang sama dan telah dianggap sebagai celah dalam kebijakan asal yang sama.

Lihat postingan Eiji Membuat situs Anda "diisolasi lintas asal" menggunakan COOP dan COEP untuk detail selengkapnya.

Data web

Mengukur kualitas pengalaman pengguna memiliki banyak faset. Meskipun beberapa aspek pengalaman pengguna bersifat spesifik untuk situs dan konteks, ada serangkaian sinyal umum—"Data Web Inti"—yang penting untuk semua pengalaman web. Kebutuhan inti pengalaman pengguna tersebut mencakup pengalaman pemuatan, interaktivitas, dan stabilitas visual konten halaman, dan gabungan tersebut merupakan landasan dari Data Web Inti 2020.

  • Largest Contentful Paint mengukur kecepatan pemuatan yang dirasakan dan menandai titik dalam linimasa pemuatan halaman saat konten utama halaman mungkin telah dimuat.
  • Penundaan Input Pertama mengukur responsivitas dan mengukur pengalaman yang dirasakan pengguna saat mencoba berinteraksi pertama kali dengan halaman.
  • Pergeseran Tata Letak Kumulatif mengukur stabilitas visual dan mengukur jumlah pergeseran tata letak yang tidak terduga dari konten halaman yang terlihat.

Semua metrik ini mencatat hasil penting yang berpusat pada pengguna, dapat diukur di lapangan, dan memiliki alat serta ekuivalen dan alat metrik diagnostik lab. Misalnya, meskipun Largest Contentful Paint adalah metrik pemuatan topline, tetapi sangat bergantung pada First Contentful Paint (FCP) dan Time to First Byte (TTFB), yang tetap penting untuk dipantau dan ditingkatkan.

Untuk mempelajari lebih lanjut, lihat Memperkenalkan Data Web: metrik penting untuk situs yang baik di Blog Chromium untuk mengetahui detail selengkapnya.

Dan lainnya

Ingin tahu apa yang akan terjadi di masa mendatang? Lihat Fugu API Tracker untuk mengetahuinya.

Bacaan lebih lanjut

Ini hanya mencakup beberapa sorotan utama. Periksa link di bawah untuk mengetahui perubahan tambahan di Chrome 83.

Subscribe

Ingin terus mendapatkan video terbaru kami, lalu berlangganan channel YouTube Developer Chrome kami, dan Anda akan mendapatkan notifikasi email setiap kali kami meluncurkan video baru.

Saya Pete LePage, dan saya perlu potong rambut, tetapi setelah Chrome 84 dirilis, saya akan segera memberi tahu Anda -- apa yang baru di Chrome!