Berpisah dengan CSS-in-JS

CSS-dalam-JS

'CSS-in-JS' ialah aliran yang bermula daripada komponen gaya dan mentakrifkan penggayaan dalam Javascript.

komponen gaya, Emosi, Mantine, dsb.

merit

1. Skop yang digunakan adalah kecil.
   1. Skop CSS boleh dikurangkan dengan menggunakan modul css
Ia ditakrifkan di tempat yang sama dengan komponen
2. . (colocation)
3. Pembolehubah JavaScript boleh digunakan.

keburukan

1. Terdapat overhed masa jalan
2. Anda mesti memuat turun Css dalam fail perpustakaan JS.
   1. Emosi ialah 7.9KB.
   2. Mantine ialah 134KB!

kelemahan yang besar

1. Memasukkan peraturan CSS kerap menyebabkan banyak kerja pengiraan.
   1. Membandingkan Emosi dan CSS
   2. Terdapat peningkatan prestasi kira-kira 50% apabila menggunakan CSS.
2. Apabila menggunakan SSR, pelbagai isu timbul.
   1. Jika anda melihat repo Emosi, terdapat banyak isu.

Perbandingan prestasi dunia sebenar

Kami mengukur prestasi dengan membandingkan CSS-in-JS dan Tailwind menggunakan kod yang sebenarnya digunakan dalam pengeluaran

Persediaan

• CSS-in-JS menggunakan Mantine (berdasarkan Emosi).
• Pengukuran prestasi menggunakan alat React dev.
• Sasaran pengukuran prestasi ialah Jadual 30 * 5 (nama komponen: SheetTable).

skrin

Kemajuan percubaan

Apabila anda menekan butang
• , skrin di atas dipaparkan
• Hidupkan rakaman dalam React Profiler dan tekan butang untuk merakam pemaparan skrin.
• Mengukur masa pemaparan SheetTable.
• Lakukan sebanyak 5 kali dan hitung purata.

CSS-in-JS (Mantine)

Angin ekor

hasil

• Masa pemaparan telah dikurangkan sebanyak kira-kira 36%.
• Walaupun hanya menukar satu kod sel telah menghasilkan peningkatan prestasi yang ketara. (Sudah tentu, kebanyakannya adalah sel)
• Pada monitor 60Hz, 1 bingkai ialah 16ms, tetapi 3 bingkai -> Ia menjadi 2 bingkai

kesimpulan

• Menggunakan CSS yang dijana secara statik adalah jauh lebih baik dari segi prestasi.
• Gunakan Tailwind melainkan anda perlu menggunakan pembolehubah JS.
• (Tambahan) Untuk memperkenalkan SSR, adalah mudah untuk meninggalkan CSS-in-JS.

Ruj

[1] https://dev.to/srmagura/why-were-breaking-up-wiht-css-in-js-4g9b

Atas ialah kandungan terperinci Berpisah dengan CSS-in-JS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!