Pengoptimuman Prestasi Web & Lighthouse · Pelajaran

Sumber yang Menyekat Pemaparan

Kenal pasti dan kurangkan kesan CSS dan JavaScript yang menyekat pemaparan terhadap masa pemuatan halaman awal.

Pelajaran 2 daripada 412 langkah

Sumber yang Menyekat Pemaparan ialah pelajaran Pengoptimuman Prestasi Web & Lighthouse percuma di CoddyKit. Ini ialah pelajaran 2 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Pengoptimuman Prestasi Web & Lighthouse, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Pengoptimuman Prestasi Web & Lighthouse merangkumi sejumlah 4 pelajaran.

Apakah yang Menyekat Halaman Anda?

Apabila pelayar memuatkan halaman web, pelayar perlu memproses pelbagai sumber seperti HTML, CSS dan JavaScript. Kadangkala, sumber tertentu mesti diproses sepenuhnya sebelum pelayar boleh mula memaparkan sebarang kandungan kepada pengguna.

Sumber ini dipanggil sumber yang menyekat pemaparan. Sumber tersebut menghalang pelayar daripada memaparkan halaman sehingga selesai diproses, lalu melambatkan 'First Contentful Paint'.

Pandangan Pantas: Pemaparan Pelayar

Untuk memaparkan halaman, pelayar melalui beberapa langkah yang dipanggil Laluan Pemaparan Kritikal. Langkah-langkah utama termasuk:

Menghuraikan HTML: Membina Model Objek Dokumen (DOM).
Menghuraikan CSS: Membina Model Objek CSS (CSSOM).
Menggabungkan: Mencipta Pepohon Pemaparan (DOM + CSSOM).
Susun atur: Mengira kedudukan dan saiz elemen.
Mengecat: Melukis piksel pada skrin.

DOM dan CSSOM kedua-duanya diperlukan sebelum Pepohon Pemaparan boleh dibina, menjadikan CSS bahagian penting dalam proses pemaparan.

CSS: Penghalang Pemaparan

Secara lalai, fail CSS luaran ialah penghalang pemaparan. Ini bermakna pelayar akan menghentikan sementara proses pemaparan sehingga semua helaian gaya luaran yang dipautkan dalam <head> HTML anda dimuat turun, dihuraikan dan digunakan.

Hal ini penting kerana pelayar perlu mengetahui rupa elemen sebelum boleh mengecatnya dengan betul. Jika CSS mengambil masa yang lama untuk dimuatkan, pengguna anda akan melihat skrin kosong lebih lama.

Contoh: Sekatan CSS Lalai

Pertimbangkan HTML ringkas ini. Pelayar akan berhenti menghuraikan HTML dan menunggu style.css dimuat turun serta diproses sebelum boleh memaparkan apa-apa.

<!DOCTYPE html>
<html>
<head>
  <title>Blocking CSS</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Welcome!</h1>
  <p>This content is waiting.</p>
</body>
</html>

CSS Bersyarat dengan `media`

Anda boleh menjadikan sesetengah CSS tidak menghalang pemaparan dengan menggunakan atribut media dalam tag <link>. Ini memberitahu pelayar bahawa helaian gaya hanya digunakan dalam keadaan tertentu (contohnya, untuk cetakan atau saiz skrin tertentu).

Jika syarat media tidak sepadan dengan persekitaran paparan semasa, pelayar masih akan memuat turun CSS tersebut, tetapi ia tidak akan menghalang pemaparan awal.

<link rel="stylesheet" href="print.css" media="print">
<link rel="stylesheet" href="mobile.css" media="(max-width: 600px)">

Gaya Penting Sebaris

Satu lagi strategi untuk mengurangkan CSS yang menghalang pemaparan ialah memasukkan gaya kritikal secara sebaris. Ini ialah peraturan CSS minimum yang diperlukan untuk memaparkan kandungan 'di atas lipatan' (perkara yang dilihat pengguna terlebih dahulu).

Dengan meletakkan gaya ini terus dalam tag <style> di dalam <head> HTML, pelayar tidak perlu membuat permintaan rangkaian tambahan, lalu mempercepatkan pemaparan awal. CSS yang selebihnya dan tidak kritikal boleh dimuatkan secara tak segerak.

JavaScript Menghentikan Segalanya

Sama seperti CSS, JavaScript juga boleh menghalang pemaparan. Apabila pelayar menemui tag <script> tradisional (tanpa atribut async atau defer), ia menghentikan sementara penghuraian HTML.

Kemudian, pelayar memuat turun, menghuraikan dan melaksanakan fail JavaScript tersebut. Penghuraian HTML hanya disambung selepas skrip selesai dilaksanakan. Hal ini boleh melambatkan pemaparan dengan ketara.

Contoh: Sekatan JS Lalai

Di sini, pelayar akan menghentikan sementara penghuraian dokumen HTML apabila menemui script.js. Jika script.js besar atau lambat dimuatkan, elemen <h1> dan <p> tidak akan dihuraikan atau dipaparkan sehingga skrip selesai.

<!DOCTYPE html>
<html>
<head>
  <title>Blocking JS</title>
  <script src="script.js"></script>
</head>
<body>
  <h1>Content Below Script</h1>
  <p>This waits for the script.</p>
</body>
</html>

`async` & `defer` untuk Skrip

HTML menyediakan dua atribut untuk tag <script> bagi mengelakkan JavaScript daripada menghalang pemaparan:

async: Memuat turun skrip secara selari dengan penghuraian HTML. Melaksanakannya sebaik sahaja selesai dimuat turun, mungkin sebelum penghuraian HTML selesai. Sesuai untuk skrip yang berdikari.
defer: Memuat turun skrip secara selari dengan penghuraian HTML. Melaksanakannya hanya selepas penghuraian HTML selesai sepenuhnya, tetapi sebelum peristiwa DOMContentLoaded. Mengekalkan susunan pelaksanaan.

Contoh Kod: JS Tidak Menyekat

Dengan menambahkan async atau defer, pelayar boleh terus menghuraikan HTML semasa skrip dimuat turun. Ini meningkatkan prestasi yang dirasai.

<!DOCTYPE html>
<html>
<head>
  <title>Non-Blocking JS</title>
  <script async src="analytics.js"></script>
  <script defer src="main-app.js"></script>
</head>
<body>
  <h1>Page Content</h1>
  <p>This renders without waiting for scripts.</p>
</body>
</html>

Kenal Pasti Penghalang!

Antara sumber berikut, yang manakah biasanya dianggap menghalang pemaparan secara lalai?

Jawab dalam pelajaran interaktif

Rumusan Utama

Sumber yang menghalang pemaparan melambatkan paparan halaman web anda. CSS luaran dan JavaScript tradisional kedua-duanya boleh menghalang proses pemaparan pelayar.

Untuk CSS: Gunakan atribut media untuk pemuatan bersyarat dan pertimbangkan untuk memasukkan gaya kritikal secara sebaris.
Untuk JavaScript: Gunakan async untuk skrip yang berdikari atau defer untuk skrip yang bergantung pada DOM, supaya muat turun boleh dilakukan secara selari dan pelaksanaan tidak menyekat.

Mengoptimumkan sumber ini ialah langkah penting untuk mencapai prestasi web yang lebih pantas!

Percuma untuk bermula

Pelajari Pengoptimuman Prestasi Web & Lighthouse dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 12
Pelajaran: 48

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Sumber yang Menyekat Pemaparan” percuma?

Ya — teks penuh “Sumber yang Menyekat Pemaparan” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus Pengoptimuman Prestasi Web & Lighthouse, tingkat taraf kepada CoddyKit PRO. Kursus Pengoptimuman Prestasi Web & Lighthouse merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Sumber yang Menyekat Pemaparan”?

Kenal pasti dan kurangkan kesan CSS dan JavaScript yang menyekat pemaparan terhadap masa pemuatan halaman awal. Anda berlatih Pengoptimuman Prestasi Web & Lighthouse menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Pengoptimuman Prestasi Web & Lighthouse?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Pengoptimuman Prestasi Web & Lighthouse di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 2 daripada 4.

Berapa lamakah pelajaran “Sumber yang Menyekat Pemaparan” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Pengoptimuman Prestasi Web & Lighthouse ini?

Ya. Setiap pelajaran Pengoptimuman Prestasi Web & Lighthouse menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

← Kembali ke Pengoptimuman Prestasi Web & Lighthouse