Berikut hal yang perlu Anda ketahui:
- Ada kode status HTTP 103 baru yang membantu browser memutuskan konten apa yang akan dimuat sebelumnya sebelum halaman mulai ditampilkan.
- Local Font Access API memungkinkan aplikasi web mengenumerasi dan menggunakan font yang diinstal di komputer pengguna.
AbortSignal.timeout()
adalah cara yang lebih mudah untuk menerapkan waktu tunggu di API asinkron.- Dan masih banyak fitur lainnya.
Saya Pete LePage. Mari kita pelajari dan lihat yang baru untuk developer di Chrome 103.
Kode status HTTP 103 103 - petunjuk awal
Salah satu cara untuk meningkatkan performa halaman adalah dengan menggunakan petunjuk resource. File ini memberikan "petunjuk" kepada browser tentang hal-hal yang mungkin diperlukannya nanti. Misalnya, memuat file secara otomatis, atau terhubung ke server lain.
<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 mengirim setidaknya bagian halaman.
Bayangkan browser meminta halaman, tetapi server memerlukan beberapa ratus milidetik untuk membuatnya. Hingga browser mulai menerima halaman, browser hanya akan menunggu. Namun, jika server mengetahui bahwa halaman akan selalu memerlukan kumpulan sub-resource tertentu, misalnya, file CSS, beberapa JavaScript, dan beberapa gambar, server dapat langsung merespons dengan kode status HTTP 103 Early Hints yang baru, dan meminta browser untuk memuat ulang sub-resource tersebut.
Kemudian, setelah server membuat halaman, 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 update pada server Anda.
Memulai HTTP 103 Petunjuk awal:
- Penjelasan untuk Petunjuk Awal
- Konfigurasi Apache 2 Early Hints
- Menggunakan Petunjuk Awal di Cloudflare
- Fastly Beyond Server Push: Kode Status 103 Early Hints
API Akses Font Lokal
Font di web selalu menjadi tantangan, terutama untuk aplikasi yang memungkinkan pengguna membuat grafik dan desain mereka sendiri. Hingga saat ini, aplikasi web hanya dapat menggunakan font 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 penting jika Anda perlu menerapkan stack teks kustom Anda sendiri.
Local Font Access API baru memberi aplikasi web kemampuan untuk menghitung font lokal di perangkat pengguna, dan memberikan akses ke data tabel font.
Untuk mendapatkan daftar font yang diinstal di 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;
}
}
Kemudian, panggil window.queryLocalFonts()
. Fungsi ini menampilkan array dari semua font
yang diinstal di 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 tertarik dengan 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 Menggunakan tipografi lanjutan dengan font lokal di web.dev untuk mengetahui detail selengkapnya.
Timeout yang 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
saat ini, jika Anda ingin membatalkan 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
dihentikan setelah jumlah milidetik tertentu. Yang dulunya hanya berupa barisan kode, sekarang hanya satu.
const signal = AbortSignal.timeout(6000);
const resp = fetch(url, { signal });
AbortSignal.timeout()
didukung di Chrome 103, dan sudah ada di Firefox, dan Safari.
Dan banyak lagi!
Tentu saja masih banyak lagi.
- Format file gambar
avif
kini dapat dibagikan oleh Berbagi Web - Chromium kini mencocokkan Firefox dengan mengaktifkan
popstate
segera setelah URL berubah. Urutan peristiwa sekarang adalah:popstate
laluhashchange
di kedua platform. - Selain itu,
Element.isVisible()
memberi tahu Anda apakah elemen terlihat atau tidak.
Bacaan lebih lanjut
Bagian ini hanya membahas beberapa sorotan utama. Lihat link di bawah untuk perubahan tambahan di Chrome 103.
- Yang baru di Chrome DevTools (103)
- Penghentian dan penghapusan di Chrome 103
- Update ChromeStatus.com untuk Chrome 103
- Daftar perubahan repositori sumber Chromium
- Kalender rilis Chrome
Langganan
Untuk terus mendapatkan 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 langsung memberi tahu Anda tentang yang baru di Chrome.