Adakah CSS menyekat parsing dan rendering? Analisis terperinci

pemuatan, analisis dan aplikasi CSS dalam pengoptimuman prestasi laman web: Tema utama

Pemuatan, analisis dan aplikasi CSS adalah pautan utama pengoptimuman prestasi web. Memahami proses ini adalah penting untuk mengoptimumkan masa pemuatan halaman dan meningkatkan pengalaman pengguna. Berikut ini akan meneroka analisis dan rendering CSS untuk menyekat DOM, dan mekanisme di belakangnya.

beban css dan parsing dom

dom parsing

DOM (Model Objek Dokumen) Analisis merujuk kepada proses penyemak imbas menukarkan aliran html byte yang diterima ke dalam pokok dom.

Semasa analisis dokumen HTML, apabila parser menemui sumber -sumber yang tidak terkawal (seperti skrip tak segerak), ia akan cuba memuat turun sumber selari dan terus menghuraikan dokumen pada masa yang sama.
• Adakah CSS menghalang analisis DOM?

CSS sendiri tidak menghalang analisis DOM. Dalam erti kata lain, penyemak imbas akan terus menganalisis HTML dan membina pokok Dom.

Walau bagaimanapun, CSS akan menyekat rendering DOM dan pelaksanaan JavaScript. Ini bermakna walaupun pokok DOM boleh dibina, penyemak imbas tidak akan melakukan operasi rendering sebelum menganalisis CSS yang berkaitan (iaitu, pokok CSSOM). Ini adalah untuk memastikan bahawa halaman dipaparkan dengan betul pada skrin untuk mengelakkan re -ranging dan re -tainting.

Apabila penyemak imbas menganalisis HTML untuk menghasilkan pokok DOM, ia juga memuat turun fail CSS selari dan mula membina CSSOM (model objek CSS). Pembinaan DOM dan CSSOM berlaku pada masa yang sama, yang bermaksud bahawa muat turun dan analisis CSS tidak akan menghalang pembinaan DOM.
pokok cssom dan rendering

pokok cssom

CSSOM (model objek CSS) adalah struktur data yang selari dengan DOM dan mengandungi semua maklumat CSS pada halaman. Pelayar menggunakannya untuk membina pokok rendering.

Apabila penyemak imbas bertemu tag atau

tag, ia akan menghentikan rendering, mengutamakan pemuatan dan parsing CSS, dan membina pokok CSSOM.
• Pembinaan pokok rendering <link></link> <style>
Pokok rendering adalah hasil gabungan pokok Dom dan pokok cssom, yang bermaksud bahawa penyemak imbas akan diberikan.

Sebelum pokok cssom selesai, pokok rendering tidak dapat dibina, kerana pokok rendering memerlukan maklumat gaya semua elemen DOM.

• Proses ini boleh diwakili oleh carta:

Kenapa CSS memuatkan JavaScript blok?

1. Pastikan pengiraan gaya yang tepat : Jika JavaScript cuba mengubah suai DOM atau mengira gaya apabila CSS tidak dimuatkan sepenuhnya dan dihuraikan, maklumat gaya yang diambil oleh JavaScript mungkin tidak tepat. Untuk mengelakkan ini, penyemak imbas memastikan bahawa semua CS yang berkaitan dimuatkan dan dianalisis sebelum pelaksanaan JavaScript, supaya pengambilan skrip semula gaya akhir elemen DOM.
Elakkan re -peninjauan dan re -empirit
2. : Jika JavaScript dibenarkan untuk melaksanakan apabila CSSOM tidak lengkap, ia boleh mengubah suai DOM berdasarkan maklumat gaya yang tidak lengkap. Sebaik sahaja CSSOM selesai, penyemak imbas mungkin perlu mengembalikan dan menyusun semula unsur -unsur yang diberikan untuk mengurangkan kecekapan rendering dengan ketara. Ketergantungan pada perintah analisis
: Semasa parsing HTML, apabila penyemak imbas menemui tag
3. , ia akan segera memulakan memuatkan CSS. Apabila ia menemui atribut (tidak atau atribut), ia akan menggantung parsing dom untuk melaksanakan skrip. Jika CSS tidak dimuat sepenuhnya, pelaksanaan skrip mungkin bergantung kepada maklumat gaya yang tidak lengkap. Oleh itu, penyemak imbas sedang menunggu skrip sebelum CSSOM siap. <link href="..." rel="stylesheet"></link> <script> async Menulis CSS dalam JavaScript akan menyekat rendering DOM? defer
Sama ada untuk menulis gaya CSS dalam JavaScript akan menyekat rendering DOM bergantung pada kaedah aplikasi dan masa gaya. Ini melibatkan proses rendering pelayar, terutama hubungan antara JavaScript, CSS dan DOM. Mari kita bincangkan secara terperinci:

secara langsung mengubahsuai gaya elemen

Apabila gaya CSS digunakan secara langsung dengan mengubahsuai atribut

elemen DOM dalam JavaScript (contohnya,

), operasi tersebut biasanya tidak menghalang analisis DOM. Walau bagaimanapun, mereka boleh menyekat proses rendering, kerana penyemak imbas mesti menghitung semula gaya dan boleh mencetuskan pengembalian semula dan re -tainting:

style Restoran element.style.color = 'red';: Apabila saiz, struktur, atau sifat -sifat tertentu elemen berlaku, penyemak imbas perlu menghitung semula kedudukan dan saiz mereka.

lukis
• : Apabila penampilan visual perubahan elemen (seperti warna atau sempadan) tetapi tidak menjejaskan saiz atau strukturnya, ini akan menunjukkan penyemak imbas untuk mengulangi unsur -unsur.
sisipan dinamik atau
• label Jika javascript dinamik menambah
atau

tag ke

, ia akan menjejaskan rendering: <style>

• blok rendering : Penyemak imbas mesti digantung untuk menghuraikan peraturan CSS yang baru dimasukkan sebelum mereka dapat terus memberikan. Ini boleh menyebabkan kelewatan rendering yang teruk, terutamanya apabila fail CSS besar atau keadaan rangkaian tidak baik.
Kesan prestasi
• : Operasi berulang, seperti memasukkan tag dalam kitaran, boleh menyebabkan penyusunan semula pendua dan penapisan semula, yang serius mempengaruhi prestasi halaman. <style>
CSS dalam JavaScript tidak menghalang atau ditangguhkan dengan baik, terutamanya apabila generasi dinamik dan gaya aplikasi.

Kesimpulan

Walaupun pemuatan CSS tidak menghalang analisis DOM, ia akan menyekat rendering DOM. Pemuatan CSS juga akan menyekat berikut -Up JavaScript.

Kami Leapcell, projek Node.js tuan rumah anda adalah pilihan pertama.

---

Leapcell digunakan untuk jagaan web, tugas tak segerak dan generasi seterusnya Redis tanpa platform pelayan:

Sokongan multi -language

Gunakan node.js, python, pergi atau karat untuk pembangunan.

penggunaan projek tanpa had percuma

Anda hanya perlu membayar yuran penggunaan -no permintaan, tiada bayaran.

faedah kos yang tidak tertandingi

Dibayar mengikut penggunaan, tidak ada kos terbiar.

Sebagai contoh: $ 25 menyokong 6.94 juta permintaan, dengan purata masa tindak balas sebanyak 60 milisaat.

Pengalaman pemaju yang dipermudahkan

• UI intuitif, tetapan mudah.

Paip CI/CD automatik penuh dan integrasi Gitops.

Petunjuk Real -Time dan rekod log memberikan pandangan operasi.

pengembangan mudah dan prestasi tinggi
Sambungan automatik untuk mengendalikan tinggi dan penggabungan dengan mudah.
Perbelanjaan Operasi Zero -hanya fokus pada pembinaan.

Ketahui lebih banyak maklumat dalam dokumen!

• ikuti x: @leapcellhq
baca blog kami

Atas ialah kandungan terperinci Adakah CSS menyekat parsing dan rendering? Analisis terperinci. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!