CSS yang memblokir render

Ilya Grigorik
Ilya Grigorik
X Beranda

Dipublikasikan: 31 Maret 2014

Secara default, CSS diperlakukan sebagai aset pemblokiran render, yang berarti browser tidak akan merender konten yang diproses hingga CSSOM dibuat. Pastikan CSS Anda tetap ramping, kirimkan secepat mungkin, dan gunakan jenis dan kueri media untuk membatalkan pemblokiran rendering.

Dalam pembuatan pohon render, kita melihat bahwa jalur rendering penting memerlukan DOM dan CSSOM untuk membuat pohon render. Hal ini menimbulkan implikasi performa yang penting: HTML dan CSS adalah aset pemblokiran render. HTML jelas, karena tanpa DOM kita tidak akan memiliki apa pun untuk dirender, tetapi persyaratan CSS mungkin kurang jelas. Apa yang akan terjadi jika kita mencoba merender halaman umum tanpa memblokir rendering di CSS?

Ringkasan

  • Secara default, CSS diperlakukan sebagai aset pemblokiran render.
  • Jenis media dan kueri media memungkinkan kita menandai beberapa aset CSS sebagai non-pemblokiran render.
  • Browser mendownload semua aset CSS, terlepas dari perilaku pemblokiran atau non-pemblokiran.
Halaman seluler New York Times dengan CSS
Halaman seluler New York Times tanpa CSS (FOUC)

Contoh sebelumnya, yang menampilkan situs New York Times dengan dan tanpa CSS, menunjukkan alasan rendering diblokir hingga CSS tersedia—tanpa CSS, halaman ini relatif tidak dapat digunakan. Pengalaman di sebelah kanan sering disebut sebagai Flash of Unstyled Content (FOUC). Browser memblokir rendering hingga memiliki DOM dan CSSOM.

CSS adalah aset pemblokiran render. Dapatkan CSS ke klien sesegera dan secepat mungkin untuk mengoptimalkan waktu hingga render pertama.

Namun, bagaimana jika kita memiliki beberapa gaya CSS yang hanya digunakan dalam kondisi tertentu, misalnya, saat halaman dicetak atau diproyeksikan ke monitor besar? Akan lebih baik jika kita tidak perlu memblokir rendering pada aset ini.

"Jenis media" dan "kueri media" CSS memungkinkan kita menangani kasus penggunaan ini:

<link href="style.css" rel="stylesheet" />
<link href="print.css" rel="stylesheet" media="print" />
<link href="other.css" rel="stylesheet" media="(min-width: 40em)" />

Kueri media terdiri dari jenis media dan nol atau beberapa ekspresi yang memeriksa kondisi fitur media tertentu. Misalnya, deklarasi lembar gaya pertama kita tidak memberikan jenis atau kueri media, sehingga berlaku dalam semua kasus; artinya, selalu memblokir render. Di sisi lain, deklarasi style sheet kedua hanya berlaku saat konten dicetak—mungkin Anda ingin mengatur ulang tata letak, mengubah font, dan pertimbangan desain penting lainnya untuk dicetak. Oleh karena itu, deklarasi style sheet ini tidak perlu memblokir rendering halaman saat pertama kali dimuat. Terakhir, deklarasi style sheet terakhir memberikan "kueri media", yang dieksekusi oleh browser: jika kondisinya cocok, browser akan memblokir rendering hingga style sheet didownload dan diproses.

Dengan menggunakan kueri media, kita dapat menyesuaikan presentasi dengan kasus penggunaan tertentu, seperti tampilan versus cetak, dan juga kondisi dinamis seperti perubahan orientasi layar, peristiwa pengubahan ukuran, dan lainnya. Saat mendeklarasikan aset lembar gaya, perhatikan jenis dan kueri media; keduanya sangat memengaruhi performa jalur rendering penting.

Pertimbangkan contoh berikut:

<link href="style.css" rel="stylesheet" />
<link href="style.css" rel="stylesheet" media="all" />
<link href="portrait.css" rel="stylesheet" media="orientation:portrait" />
<link href="print.css" rel="stylesheet" media="print" />
  • Deklarasi pertama memblokir render dan cocok dalam semua kondisi.
  • Deklarasi kedua juga memblokir render: "all" adalah jenis default, jadi jika Anda tidak menentukan jenis, jenis tersebut akan ditetapkan secara implisit ke "all". Oleh karena itu, deklarasi pertama dan kedua sebenarnya setara.
  • Deklarasi ketiga memiliki kueri media dinamis, yang dievaluasi saat halaman dimuat. Bergantung pada orientasi perangkat saat halaman dimuat, portrait.css mungkin atau mungkin tidak memblokir render.
  • Deklarasi terakhir hanya diterapkan saat halaman dicetak ("print") sehingga tidak memblokir render saat halaman pertama kali dimuat di browser.

Terakhir, perhatikan bahwa "pemblokiran render" hanya mengacu pada apakah browser harus menahan rendering awal halaman pada aset tersebut. Dalam kedua kasus tersebut, browser masih mendownload aset CSS, meskipun dengan prioritas yang lebih rendah untuk aset non-pemblokiran.

Masukan