Bagaimana penyemak imbas web memberikan dokumen HTML

Penyemak imbas menghancurkan html ke dalam pokok dom secara berperingkat apabila bait diterima. 2. Sumber luaran seperti CSS dan JavaScript dimuatkan secara asynchronously, dengan CSS menjadi penyekat dan JavaScript biasa yang menghalang parser. 3. CSS dihuraikan ke dalam CSSOM, pokok peraturan gaya yang, digabungkan dengan DOM, membentuk pokok yang diberikan. 4. Pokok render dibina menggunakan hanya elemen yang kelihatan dan gaya yang dikira. 5. Susun atur (atau reflow) mengira kedudukan dan saiz tepat setiap elemen bermula dari akar. 6. Lukisan menukarkan pokok render ke dalam data piksel dengan melukis teks, warna, sempadan, dan elemen visual lain pada lapisan. 7. Komposit menggabungkan lapisan ini dalam urutan yang betul untuk menghasilkan imej skrin akhir dengan cekap. Seluruh saluran paip -parsing, membina pokok, susun atur, lukisan, dan komposit -occurs dalam milisaat dan mengulangi perubahan, membolehkan laman web interaktif yang cepat dan interaktif.

Apabila anda membuka laman web, penyemak imbas anda melalui satu siri langkah untuk menjadikan HTML mentah (dan sumber yang berkaitan seperti CSS dan JavaScript) ke dalam halaman interaktif yang diberikan sepenuhnya. Proses ini dipanggil saluran paip rendering . Begini bagaimana pelayar web membuat dokumen HTML:

1. Parsing HTML ke DOM

Langkah pertama ialah membaca fail HTML dan menukarnya ke dalam format berstruktur yang boleh dilakukan oleh pelayar boleh berfungsi dengan: Model Objek Dokumen (DOM) .

• Penyemak imbas membaca html byte oleh byte dan menghidupkannya ke dalam token (seperti <div> , <code> , atribut, teks).
• Tanda -tanda ini kemudiannya berubah menjadi nod , yang dianjurkan ke dalam struktur pokok yang dipanggil pokok dom .
• DOM mewakili struktur dan kandungan dokumen dan boleh diakses melalui JavaScript.

Nota : DOM dibina secara berperingkat. Sebaik sahaja potongan HTML dimuat turun, parsing bermula - ia tidak menunggu keseluruhan fail.



---

2. Memuatkan sumber luaran

Semasa menghuraikan HTML, penyemak imbas menemui rujukan kepada sumber luaran:

• Fail CSS ( <link rel="stylesheet"> )
• Fail JavaScript ( <script src="..."></script> )
• Imej, fon, dll.

Ini dimuat turun secara asynchronously (selari), tetapi:


• CSS adalah penyekat : penyemak imbas menunggu untuk diberikan sehingga CSS dihuraikan kerana gaya mempengaruhi susun atur.
• JavaScript adalah parser-blocking (secara lalai) : Apabila parser memukul tag <script></script> biasa, ia menjeda HTML parsing untuk mengambil dan melaksanakan skrip-kecuali skrip menggunakan async atau defer .

---

3. Parsing CSS dan membina CSSOM

Penyemak imbas CSS (dari fail luaran, <style></style> tag, atau gaya inline) ke dalam model objek CSS (CSSOM) .

• CSSOM adalah struktur seperti pokok yang memetakan peraturan CSS kepada unsur-unsur.
• Tidak seperti DOM, CSSOM tidak awam , tetapi ia menentukan bagaimana unsur -unsur digayakan.
• Ia juga menyekat , bermakna penyemak imbas tidak akan melukis apa-apa sehingga CSSOM siap.

Bersama -sama, Dom dan CSSOM membentuk pokok render .

---

4. Membina pokok render

Penyemak imbas menggabungkan DOM dan CSSOM untuk membuat pokok render :

• Termasuk hanya elemen yang kelihatan (contohnya, tidak termasuk display: none atau <script></script> , <meta> ).
• Setiap nod dalam pokok render telah mengira gaya (selepas menyelesaikan warisan, cascading, dan lain -lain).
• Pokok ini mewakili apa yang sebenarnya akan dicat di skrin.

---

5. Susun atur (reflow)

Sekarang bahawa penyemak imbas tahu unsur -unsur yang akan diberikan dan gaya mereka, ia mengira:

• Di mana setiap elemen harus muncul di halaman (kedudukan, saiz).
• Proses ini dipanggil susun atur atau reflow .
• Ia bermula dari akar pokok render (biasanya elemen ) dan mengira geometri rekursif untuk setiap nod.

Langkah ini adalah mahal , terutamanya untuk susun atur yang kompleks.

---

6. Lukisan (rasterisasi)

Selepas susun atur, penyemak imbas melukis piksel:

• Pokok render dipecah menjadi lapisan .
• Setiap lapisan dicat ke dalam bitmap (imej berasaskan piksel) dalam ingatan.
• Ini melibatkan lukisan teks, warna, sempadan, bayang -bayang, dll.
• Pelayar moden boleh memecah kandungan ke dalam pelbagai lapisan untuk prestasi (contohnya, menggunakan will-change atau transform ).

---

7. komposit

Akhirnya, penyemak imbas komposit lapisan dicat:

• Lapisan ditarik mengikut urutan yang betul untuk membentuk imej skrin akhir.
• Langkah ini mengendalikan elemen bertindih, ketelusan, z-indeks, dll.
• Ia dioptimumkan supaya hanya berubah lapisan yang dicat semula atau direkodkan semula (misalnya, semasa animasi).

---

Bonus: Impak JavaScript

JavaScript boleh mengganggu atau mengubah suai keseluruhan proses ini:

• Skrip boleh membaca atau mengubah suai DOM dan CSSOM.
• Kaedah panggilan seperti window.getComputedStyle() atau offsetHeight memaksa pelayar untuk secara serentak melakukan susun atur - berpotensi menyebabkan masalah prestasi jika dilakukan berulang kali.

---

Ringkasan Paip Rendering

1. Parse HTML → Bina Dom
2. Parse CSS → Bina CSSOM
3. Campurkan Dom CSSOM → Render Tree
4. Susun atur: Kirakan geometri
5. Cat: Tukar ke piksel
6. Komposit: Lapisan dan paparan output akhir

---

Keseluruhan proses ini berlaku dengan cepat - selalunya dalam milisaat - dan boleh mengulangi apabila perubahan berlaku (contohnya, interaksi pengguna, kemas kini JavaScript). Memahami aliran ini membantu pemaju menulis lebih cepat, laman web yang lebih cekap.

Pada asasnya, rendering adalah cara penyemak imbas untuk mengubah kod menjadi sesuatu yang dapat anda lihat dan berinteraksi.