CSS Pemblokir Render

Secara default, CSS diperlakukan sebagai resource pemblokir render, artinya browser tidak akan merender konten yang diproses sampai WebView dibuat. Pastikan CSS Anda tetap rapi, kirimkan secepat mungkin, serta gunakan jenis dan kueri media untuk membatalkan pemblokiran rendering.

Dalam konstruksi pohon render, kita melihat bahwa jalur rendering penting memerlukan DOM dan WebView untuk membuat pohon render. Hal ini menimbulkan implikasi performa yang penting: baik HTML maupun CSS merupakan resource pemblokir render. HTML sudah jelas, karena tanpa DOM kita tidak akan memiliki apa pun untuk dirender, namun persyaratan CSS mungkin kurang jelas. Apa yang akan terjadi jika kita mencoba merender halaman biasa tanpa memblokir rendering pada CSS?

Ringkasan

  • Secara default, CSS diperlakukan sebagai sumber daya pemblokir render.
  • Jenis media dan kueri media memungkinkan kita untuk menandai sebagian sumber daya CSS sebagai non-pemblokiran render.
  • Browser akan mendownload semua aset CSS, terlepas dari perilaku pemblokiran atau non-pemblokiran.
NYTimes dengan CSS
The New York Times dengan CSS
NYTimes tanpa CSS
The New York Times tanpa CSS (FOUC)

Contoh di atas, yang menampilkan situs web NYTimes dengan dan tanpa CSS, menunjukkan mengapa rendering terblokir hingga CSS tersedia---tanpa CSS, halaman tersebut relatif tidak dapat digunakan. Pengalaman di sebelah kanan sering disebut sebagai "Flash of Unstyled Content" (FOUC). Browser memblokir rendering hingga memiliki baik DOM maupun WebView.

CSS adalah sumber daya pemblokir render. Hubungi klien secepat dan secepat mungkin guna mengoptimalkan waktu render pertama.

Namun, bagaimana jika kita memiliki sebagian gaya CSS yang hanya digunakan dalam kondisi tertentu, misalnya, saat halaman sedang dicetak atau diproyeksikan ke monitor besar? Sebaiknya kita tidak memblokir rendering pada resource 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 stylesheet pertama kita tidak menyediakan jenis atau kueri media, sehingga berlaku dalam semua kasus; artinya, deklarasi itu selalu memblokir render. Di sisi lain, deklarasi stylesheet kedua hanya berlaku saat konten sedang dicetak---mungkin Anda ingin menyusun ulang tata letak, mengubah font, dan seterusnya, sehingga deklarasi stylesheet ini tidak perlu memblokir rendering halaman saat pertama kali dimuat. Terakhir, deklarasi stylesheet terakhir menyediakan "kueri media", yang dieksekusi oleh browser: jika kondisinya cocok, browser akan memblokir rendering hingga lembar gaya didownload dan diproses.

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

Mari kita lihat beberapa contoh praktik:

<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 adalah pemblokiran render dan cocok dalam semua kondisi.
  • Deklarasi kedua juga merupakan pemblokiran render: "all" adalah tipe default sehingga jika Anda tidak menetapkan tipe apa pun, secara implisit akan disetel 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 merupakan pemblokir render.
  • Deklarasi terakhir hanya diterapkan ketika halaman sedang dicetak sehingga bukan pemblokir render saat halaman pertama kali dimuat di browser.

Terakhir, perhatikan bahwa "pemblokiran render" hanya mengacu pada apakah browser harus menahan rendering awal untuk halaman pada sumber daya tersebut. Dalam kasus mana pun, browser tetap mengunduh aset CSS, walaupun dengan prioritas lebih rendah untuk sumber daya yang bukan pemblokir.

Masukan