Berikut hal yang perlu Anda ketahui:
- Ada kode status HTTP 103 baru yang membantu browser menentukan konten yang akan di-pramuat sebelum halaman mulai dimuat.
- Local Font Access API memberi aplikasi web kemampuan untuk memerinci dan menggunakan font yang diinstal di komputer pengguna.
AbortSignal.timeout()
adalah cara yang lebih mudah untuk menerapkan waktu tunggu pada API asinkron.- Dan masih banyak lagi.
Saya Pete LePage. Mari selami dan lihat apa yang baru untuk pengembang di Chrome 103.
Kode status HTTP 103 103 - petunjuk awal
Salah satu cara untuk meningkatkan performa halaman adalah menggunakan petunjuk resource. Tag tersebut memberikan "petunjuk" kepada browser tentang hal-hal yang mungkin diperlukan nantinya. Misalnya, memuat file di awal atau menghubungkan ke server yang berbeda.
<link as="font" crossorigin="anonymous"
href="..." rel="preload">
<link as="font" crossorigin="anonymous"
href="..." rel="preload">
<link href="cdn.example.com"
rel="preconnect">
Namun, browser tidak dapat menindaklanjuti petunjuk tersebut hingga server mengirimkan setidaknya bagian halaman.
Bayangkan browser meminta halaman, tetapi server memerlukan beberapa ratus milidetik untuk membuatnya. Sampai {i>browser<i} mulai menerima laman, browser hanya akan duduk di sana dan menunggu. Namun, jika server mengetahui bahwa halaman akan selalu memerlukan sekumpulan subresource tertentu, misalnya file CSS, beberapa JavaScript, dan beberapa gambar, server dapat langsung merespons dengan kode status Petunjuk Awal HTTP 103 yang baru, dan meminta browser untuk melakukan pramuat sub-resource tersebut.
Kemudian, setelah halaman dibuat, server dapat mengirimkannya dengan respons HTTP 200 normal. Saat halaman masuk, browser sudah mulai memuat resource yang diperlukan.
Karena ini adalah kode status HTTP baru, penggunaannya memerlukan pembaruan pada server Anda.
Mulai menggunakan Petunjuk awal HTTP 103:
- Penjelasan untuk Petunjuk Awal
- Konfigurasi Petunjuk Awal Apache 2
- Menggunakan Petunjuk Awal di Cloudflare
- Fastly Beyond Server Push: Kode Status Petunjuk Awal 103
API Akses Font Lokal
Font di web selalu menjadi tantangan, dan terutama untuk aplikasi yang memungkinkan pengguna membuat grafik dan desain mereka sendiri. Sampai saat ini, aplikasi web hanya bisa menggunakan {i>font<i} web. Tidak ada cara untuk mendapatkan daftar font yang telah diinstal pengguna di komputer mereka. Selain itu, tidak ada cara untuk mengakses data tabel font lengkap, yang sangat penting jika Anda perlu mengimplementasikan stack teks kustom Anda sendiri.
Local Font Access API yang baru memberi aplikasi web kemampuan untuk menghitung font lokal di perangkat pengguna, dan menyediakan akses ke data tabel font.
Untuk mendapatkan daftar font yang diinstal pada perangkat, Anda harus meminta izin terlebih dahulu.
// Ask for permission to use the API
try {
const status = await navigator.permissions.request({
name: 'local-fonts',
});
if (status.state !== 'granted') {
throw new Error('No Permission.');
}
} catch (err) {
if (err.name !== 'TypeError') {
throw err;
}
}
Lalu, panggil window.queryLocalFonts()
. Metode ini menampilkan array dari semua font
yang diinstal pada perangkat pengguna.
const opts = {};
const pickedFonts = await self.queryLocalFonts();
for (const fontData of pickedFonts) {
console.log(fontData.postscriptName);
console.log(fontData.fullName);
console.log(fontData.family);
console.log(fontData.style);
}
Jika hanya ingin melihat sebagian font, Anda dapat memfilternya dengan menambahkan
parameter postscriptNames
.
const opts = {
postscriptNames: [
'Verdana',
'Verdana-Bold',
'Verdana-Italic',
],
};
const pickedFonts = await self.queryLocalFonts(opts);
Lihat artikel Tom yang berjudul Menggunakan tipografi lanjutan dengan font lokal di web.dev untuk mengetahui detail selengkapnya.
Waktu Tunggu Lebih Mudah dengan AbortSignal.timeout()
Dalam JavaScript, AbortController
dan AbortSignal
digunakan untuk membatalkan
panggilan asinkron.
Misalnya, saat membuat permintaan fetch()
, Anda dapat membuat
AbortSignal
dan meneruskannya ke fetch()
. Jika Anda ingin membatalkan fetch()
sebelum ditampilkan, panggil abort()
pada instance AbortSignal
. Hingga
sekarang, jika Anda ingin membatalkan langganan setelah jangka waktu tertentu, Anda harus menggabungkannya dalam setTimeout()
.
const controller = new AbortController();
const signal = controller.signal;
const resp = fetch(url, { signal });
setTimeout(() => {
// abort the fetch after 6 seconds
controller.abort();
}, 6000);
Untungnya, hal itu menjadi lebih mudah dengan metode statis timeout()
baru di
AbortSignal
. Metode ini menampilkan objek AbortSignal
yang otomatis
dibatalkan setelah jumlah milidetik yang ditentukan. Kode yang dulunya hanya sedikit
baris kode, kini hanya satu.
const signal = AbortSignal.timeout(6000);
const resp = fetch(url, { signal });
AbortSignal.timeout()
didukung di Chrome 103, dan sudah ada di Firefox, serta Safari.
Dan banyak lagi!
Tentu saja masih banyak lagi.
- Format file gambar
avif
kini dapat dibagikan oleh Berbagi Web - Chromium kini cocok dengan Firefox dengan mengaktifkan
popstate
segera setelah URL berubah. Urutan peristiwa sekarang adalah:popstate
, laluhashchange
di kedua platform. - Dan
Element.isVisible()
akan memberi tahu Anda apakah suatu elemen terlihat atau tidak.
Bacaan lebih lanjut
Artikel ini hanya mencakup beberapa sorotan utama. Periksa link di bawah untuk mengetahui perubahan tambahan di Chrome 103.
- Yang baru di Chrome DevTools (103)
- Penghentian dan penghapusan Chrome 103
- Update ChromeStatus.com untuk Chrome 103
- Daftar perubahan repositori sumber Chromium
- Kalender rilis Chrome
Langganan
Untuk terus mengikuti info terbaru, subscribe ke channel YouTube Chrome Developers, dan Anda akan mendapatkan notifikasi email setiap kali kami meluncurkan video baru.
Saya Pete LePage, dan segera setelah Chrome 104 dirilis, saya akan ada di sini untuk memberi tahu Anda apa yang baru di Chrome!