Panduan Pemula untuk Model Objek CSS (CSSOM)

Banyak terjadi di antara permintaan HTTP pertama dan pengiriman terakhir dari halaman web. Transmisi data dan jalur render peramban memerlukan banyak teknologi berbeda, salah satunya adalah Model Objek CSS, atau CSSOM.

CSS Object Model mengambil kode CSS, dan menjadikan setiap pemilih menjadi struktur pohon untuk penguraian yang lebih mudah. Mungkin tidak penting bagi pengembang untuk memahami konsep ini sepenuhnya, tetapi ini adalah topik berharga untuk dipelajari jika Anda ingin mempelajari lebih lanjut cara browser merender kode menjadi situs web yang berfungsi.

Dalam posting ini, saya akan membahas dasar-dasar Model Objek CSS, dan menunjukkan kepada Anda cara kerjanya.

Apa itu CSSOM??

Istilah CSS Object Model menggambarkan a peta semua pemilih CSS & properti yang relevan untuk setiap pemilih. Gaya ini dapat berupa elemen root atau memiliki anak bersarang.

CSSOM sangat mirip dengan DOM dalam HTML, yang merupakan singkatan dari Document Object Model. Keduanya merupakan bagian dari jalur render kritis yang merupakan serangkaian langkah yang harus terjadi merender situs web dengan benar. Semua proses ini terjadi secara otomatis, dibalik layar.

Jadi mengapa CSSOM penting? Ini adalah peta yang digunakan oleh browser merender gaya CSS dengan benar di halaman web. Tidak ada cara mudah untuk memberi tahu komputer bahwa semua paragraf dalam .isi utama div harus memiliki ketinggian garis ekstra.

Solusinya adalah CSS Object Model yang mana memetakan semua elemen dan properti dari kode CSS Anda.

CSSOM memudahkan peramban render gaya pada halaman. Semuanya sangat teknis tetapi perlu memahami sedikit tentang prosesnya, terutama jika Anda membangun situs web.

Bagaimana itu bekerja

Baik DOM dan CSSOM adalah digunakan secara luas oleh semua browser web untuk menafsirkan dan merender halaman web. Diagram di bawah ini dari panduan Dasar-Dasar Web Pengembang Google, dan menjelaskan bagaimana caranya DOM dirender di browser web.

Baik di DOM & CSSOM, semua informasi adalah dikonversi dari byte ke peta digital yang membuat setiap elemen dalam dokumen web. Prosesnya bekerja sebagai berikut:

1. Browser mengunduh HTML untuk halaman web.
2. Saat memproses HTML, pengurai dapat menabrak elemen tautan referensi stylesheet eksternal.
3. Lembar style CSS ini kemudian diurai menjadi peta menggunakan spesifikasi Model Objek CSS.
4. Kode yang dihasilkan kemudian bisa diterapkan pada elemen dalam DOM.

Semua ini terjadi dengan sangat cepat, dan terjadi dengan setiap permintaan satu halaman. Diagram lain di bawah ini menampilkan sebuah contoh struktur pohon CSSOM.

Perhatikan bagaimana beberapa properti dalam diagram memiliki warna font abu-abu yang lebih terang. Properti-properti ini diwarisi dari induknya. Karena body memiliki ukuran font tertentu, semua elemen di dalam body juga mendapatkan ukuran font itu kecuali diganti.

String HTML dan CSS adalah dikonversi menjadi token yang kemudian bisa dipahami sebagai node oleh browser. Node-node ini seperti objek dalam struktur pohon yang menentukan bagaimana seluruh halaman harus dibangun.

CSSOM dan DOM sepenuhnya model data terpisah, oleh karena itu mereka diurai secara terpisah satu sama lain. Tapi mereka berdua punya struktur pohon yang serupa, dan keduanya memiliki tujuan yang sama: memberi struktur pada browser untuk membuat dan mengidentifikasi berbagai elemen pada halaman.

Mengapa Pengembang Web Harus Peduli

Karena semua rendering terjadi di backend, Anda benar-benar tidak perlu terlalu khawatir tentang pohon CSSOM. Tetapi bisa bermanfaat untuk memahami cara kerjanya.

Satu hal yang perlu diingat adalah bahwa CSSOM harus dimuat sepenuhnya sebelum halaman web akan ditampilkan, karena akan menentukan bagaimana setiap elemen pada halaman akan terlihat seperti. Jika halaman dimuat sebelum CSSOM, itu akan muncul sebagai HTML biasa terlebih dahulu, diikuti oleh gaya beberapa detik kemudian.

Browser secara khusus menghindari itu karena akan membingungkan pengguna akhir. Dan perlu dicatat bahwa CSSOM tidak bisa di-cache; itu pasti diciptakan kembali pada setiap halaman.

File CSS yang sebenarnya dapat di-cache untuk memuat aset lebih cepat tetapi merender halaman di browser selalu membutuhkan menjalankan parser CSSOM. Ini juga berarti bahwa JavaScript dapat berdampak negatif pada rendering dan kinerja.

Saya sangat merekomendasikan membaca artikel ini untuk mempelajari lebih lanjut tentang sumber daya CSS / JS eksternal dan waktu muatnya.

Cara terbaik untuk mengoptimalkan situs Anda adalah dengan membuat a kaskade alami sumber daya yang dimuat secara bersamaan.

Dimungkinkan untuk memanipulasi CSSOM menggunakan JavaScript karena secara teknis JS API. Tapi itu tidak melayani banyak tujuan dibandingkan dengan manipulasi JavaScript DOM.

Alasan yang lebih besar untuk belajar tentang CSSOM adalah untuk lebih mendidik diri sendiri tentang bagaimana sebenarnya situs web bekerja.

Ada banyak hal yang kita anggap remeh yang membuat internet berjalan dengan lancar. Ketika Anda memahami sedikit lebih banyak tentang keseluruhan proses, Anda dapat memvisualisasikan bagaimana keseluruhannya terjadi, dan mudah-mudahan mendapatkan apresiasi atas keberadaan World Wide Web.

Bacaan lebih lanjut

Saya harap pengantar ini dapat memberi Anda gagasan yang solid tentang apa Model Objek CSS itu, dan bagaimana pengaruhnya terhadap halaman web. Sana tidak banyak untuk dimanipulasi dalam CSSOM, jadi sedikit berbeda dari DOM.

Namun itu masih merupakan teknologi penting dalam pengembangan web, dan itu harus menjelaskan aspek-aspek utama rendering browser.

Ada banyak sumber daya lain yang membahas CSSOM, dan cara kerjanya. Jika Anda ingin mempelajari lebih lanjut, berikut adalah beberapa posting yang saya rekomendasikan:

• Ikhtisar Model Objek CSS
• Menjelajahi CSSOM: Membuat Penganalisa Objek CSS
• Apa Yang Harus Diketahui Setiap Pengembang Tentang Rendering Webpage