Memahami pemaparan dalam penyemak imbas: Bagaimanakah DOM dijana?-tutorial js-php.cn

Memahami pemaparan dalam penyemak imbas: Bagaimanakah DOM dijana?

Linda Hamilton

Lepaskan： 2024-11-11 20:14:03

asal

847 orang telah melayarinya

Dalam artikel sebelum ini kami belajar tentang DOM dan CSSOM, jika anda masih ragu-ragu tentang dua perkataan ini saya syorkan membaca dua siaran di bawah:

Memahami pemaparan dalam penyemak imbas: DOM
Memahami pemaparan dalam penyemak imbas: CSSOM

Untuk mengimbas kembali, DOM ialah struktur yang digunakan oleh penyemak imbas untuk memaparkan halaman kami. Walau bagaimanapun, data internet tidak dihantar dalam bentuk DOM, jadi perlu ada proses sebelum DOM sedia untuk digunakan oleh penyemak imbas.

Pada ketika ini anda mungkin tertanya-tanya bagaimana data bergerak di internet?

Setiap kali kami mengakses tapak web, pertukaran berlaku dalam corak yang kami panggil pelanggan x pelayan.

Dalam pertukaran ini, pelanggan (pelayar anda) meminta pelayan untuk mengakses tapak web www.cristiano.dev, yang bertindak balas dengan semua kandungan tapak web yang diminta, tetapi kandungan ini datang dalam bentuk bait dan dengan cara yang jauh daripada html/css/js yang kita tahu.

Entendendo renderização no browser: Como o DOM é gerado?

Apa yang akan diterima oleh penyemak imbas daripada pelayan ialah urutan bait.

Untuk coretan kecil html ini yang disediakan oleh pelayan:

<!doctype html>
<html>
  <head>
    <title>Um título</title>
  </head>
  <body>
    <a href="#">Um link</a>
    <h1>Um cabeçalho</h1>
  </body>
</html>

Salin selepas log masuk

Pelayar akan menerima dalam bait sesuatu seperti ini:

3C21646F63747970652068746D6C3E0A3C68746D6C3E0A20203C686561643E0A202020203C7469746C653E556D2074C3AD74756C6F3C2F7469746C653E0A20203C2F686561643E0A20203C626F64793E0A202020203C6120687265663D2223223E556D206C696E6B3C2F613E0A202020203C68313E556D2063616265C3A7616C686F3C2F68313E0A20203C2F626F64793E0A3C2F68746D6C3E

Salin selepas log masuk

Walau bagaimanapun, penyemak imbas tidak boleh memaparkan halaman dengan hanya maklumat ini. Untuk reka letak kami dipasang, penyemak imbas akan melakukan beberapa langkah sebelum mempunyai DOM.

Langkah-langkah ini ialah:

Penukaran
Tokenisasi
Lexing

Penukaran: Bait kepada aksara

Entendendo renderização no browser: Como o DOM é gerado?

Dalam langkah ini penyemak imbas membaca data mentah daripada rangkaian atau cakera dan menukarnya kepada aksara berdasarkan pengekodan yang dinyatakan dalam fail, contohnya, UTF-8.

Pada asasnya ia adalah langkah di mana penyemak imbas menukar bait kepada kod dalam format yang kita tulis dalam kehidupan seharian kita.

Tokenisasi: Aksara untuk token

Entendendo renderização no browser: Como o DOM é gerado?

Pada peringkat ini, penyemak imbas menukar rentetan aksara kepada unit kecil yang dipanggil token. Setiap permulaan, penghujung teg dan kandungan dikira, selain itu, setiap token mempunyai set peraturan tertentu.

Contohnya, teg mempunyai atribut yang berbeza daripada teg

Tanpa langkah ini, kami hanya akan mempunyai sekumpulan teks tanpa makna untuk penyemak imbas dan pada akhir proses ini html asas kami akan ditandakan seperti ini:

➔ Token: DOCTYPE, Nilai: html

➔ Token: StartTag, Nama: html

➔ Token: StartTag, Nama: kepala

➔ Token: StartTag, Nama: tajuk

Contoh tajuk ➔ Token: Watak, Data: Contoh tajuk

➔ Token: EndTag, Nama: tajuk

➔ Token: StartTag, Nama: p

Hello Dunia! ➔ Token: Watak, Data: Hello dunia!

➔ Token: EndTag, Nama: p

Token ialah perkataan atau simbol individu dalam teks. "Tokenisasi" ialah proses memecahkan teks kepada perkataan, frasa atau simbol yang lebih kecil.

Lexing: Token untuk nod

Langkah lexing (analisis leksikal) bertanggungjawab untuk menukar token kepada objek, tetapi ini bukan DOM lagi. Pada masa ini, penyemak imbas menjana bahagian terpencil DOM, di mana setiap teg akan diubah menjadi objek dengan atribut yang membawa maklumat yang berkaitan dengan atribut, teg induk, teg anak, dsb.

Hasilnya selepas lexing tag kami

ia akan menjadi seperti ini:

<!doctype html> <html> <head> <title>Um título</title> </head> <body> <a href="#">Um link</a> <h1>Um cabeçalho</h1> </body> </html>
Salin selepas log masuk
Salin selepas log masuk

Pembinaan DOM: Nod untuk DOM

Kami akhirnya mencapai peringkat pembinaan DOM!

Pada ketika ini, penyemak imbas akan mempertimbangkan perhubungan antara teg html dan akan menggabungkan nod ke dalam struktur data pepohon yang mewakili perhubungan ini secara hierarki. Sebagai contoh: objek html ialah ibu bapa objek badan, badan ialah ibu bapa objek perenggan, sehingga keseluruhan perwakilan dokumen dibuat.

Pada akhir pembinaan, contoh html kami menjadi pokok objek seperti ini:

3C21646F63747970652068746D6C3E0A3C68746D6C3E0A20203C686561643E0A202020203C7469746C653E556D2074C3AD74756C6F3C2F7469746C653E0A20203C2F686561643E0A20203C626F64793E0A202020203C6120687265663D2223223E556D206C696E6B3C2F613E0A202020203C68313E556D2063616265C3A7616C686F3C2F68313E0A20203C2F626F64793E0A3C2F68746D6C3E
Salin selepas log masuk
Salin selepas log masuk

Rekap

Proses untuk membina DOM adalah rumit dan berlaku dalam langkah berikut:

Penukaran: HTML diterima oleh penyemak imbas dan ditukar daripada bait kepada aksara.

Tokenisasi: Aksara diubah menjadi token yang mewakili bahagian html (teg, atribut, teks).

Lexing: Token disusun ke dalam nod objek

DOM: Objek disusun dalam struktur data seperti pepohon dalam cara hierarki.

Proses yang serupa juga berlaku untuk CSSOM, yang terdiri daripada penukaran, tokenisasi dan lexing.

Kesimpulan

Anda pasti tertanya-tanya di mana anda akan mengaplikasikan pengetahuan ini sepanjang perkembangan hari ke hari anda...

Memang benar maklumat jenis ini tidak akan diminta dengan kerap, tetapi adalah penting untuk memahami cara penyemak imbas, alat kerja bahagian hadapan utama, berfungsi pada dasarnya.

Pengetahuan ini juga akan menjadi sangat berharga untuk memahami topik seterusnya yang akan kami bahas di sini: Cat, cat semula, aliran dan aliran semula.

terima kasih banyak!!

Terima kasih kerana tiba di sini!

Saya harap anda belajar sesuatu yang baharu sepanjang pembacaan ini.

Jumpa lagi nanti!

Rujukan

Membina Model Objek

Menyahbina Web: Perenderan Halaman

Atas ialah kandungan terperinci Memahami pemaparan dalam penyemak imbas: Bagaimanakah DOM dijana?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!