Panduan Pemula ke Model Objek CSS (CSSOM)

Banyak berlaku di antara permintaan HTTP yang pertama dan juga penghantaran akhir halaman web. Pemancaran data dan saluran perantaraan pelayar memerlukan banyak teknologi yang berbeza, salah satunya ialah Model Objek CSS, atau CSSOM.

Model Objek CSS mengambil kod CSS, dan menjadikan setiap pemilih ke dalam struktur pokok untuk memudahkan parsing. Mungkin tidak penting bagi pemaju memahami sepenuhnya konsep ini, tetapi topik yang berharga untuk belajar jika anda ingin mengetahui lebih lanjut mengenai bagaimana pelayar membuat kod ke dalam tapak web yang berfungsi.

Dalam jawatan ini, saya akan menampung asas-asas Model Objek CSS, dan menunjukkan kepada anda bagaimana ia berfungsi.

Apa itu CSSOM?

Istilah Model Objek CSS menggambarkan a peta semua pemilih CSS & sifat yang berkaitan untuk setiap pemilih. Gaya ini boleh menjadi elemen akar atau mempunyai anak-anak bersarang.

CSSOM sangat mirip dengan DOM dalam HTML, yang bermaksud Model Objek Dokumen. Kedua-duanya adalah sebahagian daripada laluan persembahan kritikal yang merupakan satu siri langkah yang mesti berlaku betul membuat laman web. Semua proses ini berlaku secara automatik, disebalik tabir.

Jadi mengapa CSSOM penting? Ia adalah peta yang digunakan oleh penyemak imbas betul membuat gaya CSS di laman web. Tidak ada cara mudah untuk memberitahu komputer bahawa semua perenggan dalam .kandungan utama div mesti mempunyai ketinggian baris tambahan.

Penyelesaiannya ialah Model Objek CSS yang mana memaparkan semua elemen dan sifat dari kod CSS anda.

CSSOM menjadikannya lebih mudah untuk penyemak imbas menjadikan gaya pada halaman. Seluruhnya adalah sangat teknikal tetapi ia cukup memahami sedikit tentang proses itu, terutamanya jika anda membina laman web.

Bagaimana ia berfungsi

Kedua-dua DOM dan CSSOM adalah digunakan secara meluas oleh semua pelayar web untuk mentafsirkan dan menjadikan laman web. Rajah di bawah adalah dari panduan Asas Web Google Developers, dan menerangkan bagaimana DOM diberikan dalam pelayar web.

Dalam kedua-dua DOM & CSSOM, semua maklumat adalah ditukar daripada bait ke dalam peta digital yang menjadikan setiap elemen dalam dokumen web. Proses ini berfungsi seperti berikut:

1. Penyemak imbas muat turun HTML untuk laman web.
2. Semasa memproses HTML, parser mungkin bertemu dengan elemen pautan merujuk lembaran gaya luaran.
3. Lembaran gaya CSS ini kemudiannya dihuraikan ke dalam peta menggunakan spesifikasi Model Objek CSS.
4. Kod yang dihasilkan kemudiannya boleh digunakan untuk elemen dalam DOM.

Semua ini berlaku dengan sangat cepat, dan berlaku dengan setiap permintaan halaman tunggal. Rajah lain di bawah ini mempamerkan satu contoh pokok struktur CSSOM.

Perhatikan bagaimana sesetengah sifat dalam rajah mempunyai warna fon kelabu yang lebih ringan. Ciri-ciri ini adalah diwarisi dari ibu bapa. Oleh kerana badan mempunyai saiz fon tertentu, semua elemen dalam badan juga mendapat saiz fon kecuali ia ditindih.

Struktur HTML dan CSS adalah ditukar menjadi token yang kemudiannya boleh difahami sebagai nod oleh penyemak imbas. Nod ini seperti objek dalam struktur pokok yang mentakrifkan bagaimana keseluruhan halaman perlu dibina.

CSSOM dan DOM sepenuhnya model data yang berasingan, oleh itu mereka dipisahkan secara berasingan antara satu sama lain. Tetapi mereka berdua struktur pokok yang serupa, dan kedua-duanya melayani tujuan yang sama: memberikan pelayar struktur untuk membuat dan mengenal pasti unsur-unsur yang berbeza pada halaman.

Mengapa Pembangun Web Harus Diperhatikan

Sejak semua rendering berlaku pada backend, anda tidak perlu bimbang tentang pokok CSSOM. Tetapi ia boleh menjadi berguna untuk memahami bagaimana ia berfungsi.

Satu perkara yang harus diingat adalah bahawa CSSOM mesti dimuatkan sepenuhnya sebelum halaman web akan dipaparkan, kerana ia akan menentukan bagaimana setiap elemen pada halaman seharusnya kelihatan seperti. Jika halaman dimuatkan sebelum CSSOM, ia akan muncul sebagai HTML biasa dahulu, diikuti dengan gaya beberapa saat kemudian.

Pelayar khusus mengelakkannya kerana ia akan mengelirukan untuk mengakhiri pengguna. Dan patut dicatat bahawa CSSOM tidak boleh cache; ia mesti dicipta pada setiap halaman.

Fail CSS sebenar boleh di-cache untuk memuatkan aset lebih cepat tetapi menjadikan halaman dalam penyemak imbas sentiasa memerlukan menjalankan parser CSSOM. Ini juga bermakna bahawa JavaScript boleh memberi kesan negatif terhadap rendering dan prestasi.

Saya sangat mengesyorkan membaca artikel ini untuk mengetahui lebih lanjut tentang sumber CSS / JS luaran dan masa beban mereka.

Cara terbaik untuk mengoptimumkan laman web anda ialah dengan membuat kerajinan lata semula jadi sumber yang mana dimuatkan sejajar.

Adalah dimungkinkan untuk memanipulasi CSSOM menggunakan JavaScript kerana secara teknikal adalah API JS. Tetapi ia tidak berfungsi dengan banyaknya berbanding dengan JavaScript DOM manipulasi.

Alasan yang lebih besar untuk belajar tentang CSSOM adalah untuk mendidik diri anda sendiri mengenai bagaimana laman web sebenarnya berfungsi.

Terdapat banyak perkara yang kami ambil dengan mudah untuk memastikan Internet berjalan dengan lancar. Apabila anda memahami sedikit lebih lanjut mengenai keseluruhan proses, anda dapat memvisualisasikan bagaimana keseluruhannya bersama, dan semoga mendapat penghargaan untuk kewujudan World Wide Web.

Bacaan lanjut

Saya berharap intro ini dapat memberi anda idea kukuh mengenai Model Objek CSS, dan bagaimana ia mempengaruhi halaman web. Di sana tidak banyak memanipulasi dalam CSSOM, jadi ia berbeza sedikit dari DOM.

Walau bagaimanapun, ia masih merupakan teknologi kritikal dalam pembangunan web, dan ia harus menjelaskan aspek utama penyemak imbas.

Terdapat banyak sumber lain yang membincangkan CSSOM, dan bagaimana ia berfungsi. Sekiranya anda ingin mengetahui lebih lanjut, berikut adalah beberapa kiriman yang saya cadangkan:

• Tinjauan Model Objek CSS
• Meneroka CSSOM: Membuat Penganalisis Objek CSS
• Apa Yang Harus Diketahui Setiap Pengembang Frontend Mengenai Renderan Laman Web