RadeventListener: Kisah Rangka Kerja Sisi Pelanggan

Populariti React bukan tanpa pengkritiknya. Saiz kerangka yang besar (sekitar 120 kib minified) memberi kesan yang signifikan pada masa permulaan, terutamanya apabila hanya bergantung pada rendering sisi klien. Malah penyampaian pelayan dengan penghidratan sisi klien kekal intensif prestasi. Walaupun React cemerlang dalam pengurusan negeri yang kompleks, sumbernya menuntut lebih banyak manfaat dalam aplikasi yang lebih mudah. Ini dapat mengecualikan pengguna dengan perkakasan yang kurang kuat.

Walaupun tempahan saya mengenai overhead prestasi React, saya menghargai model komponennya dan sintaks JSX. Rendering sisi pelayan (atau menggunakan Preact, alternatif pilihan saya) kekal sebagai aset yang berharga. Walau bagaimanapun, menentukan penggunaan sisi pelanggan yang sesuai masih menjadi cabaran. Artikel ini memperincikan penemuan saya untuk mengoptimumkan prestasi bertindak balas untuk pengalaman pengguna yang lebih baik.

Konteks: aplikasi suapan RSS

Aplikasi suapan RSS saya, bylines.fyi , menggunakan JavaScript pada kedua -dua pelayan dan klien. Walaupun saya tidak sememangnya tidak suka rangka kerja pelanggan, pengalaman saya menyoroti dua isu berulang:

1. Rangka kerja boleh mengaburkan platform web yang mendasari, menghalang pemahaman yang mendalam apabila mereka benar -benar bermanfaat.
2. Rangka kerja tidak selalu menjamin pengalaman pengguna yang optimum.

Penyelidikan httparchive Tim Kadlec mengenai prestasi rangka kerja web memperkuat kebimbangan ini, mendedahkan prestasi kurang dari reaksi. Matlamat saya adalah untuk memanfaatkan kelebihan pelayan React semasa mengurangkan kelemahan pelanggannya.

Eksperimen: Navigasi mudah alih bertukar -tukar

Aplikasi RSS saya memerlukan JavaScript sisi pelanggan untuk togol navigasi mudah alih mudah-contoh klasik "keadaan mudah." Saya sering melihat komponen React yang terlalu banyak digunakan untuk tugas -tugas yang mudah, yang membawa kepada overhead prestasi yang tidak perlu. Eksperimen ini, walaupun seolah -olah remeh, berfungsi sebagai penanda aras penting untuk memahami bagaimana skala pilihan kerangka. Adalah penting untuk diperhatikan bahawa kebanyakan pemaju tidak semata -mata bergantung kepada React untuk ciri -ciri kecil seperti itu, tetapi hasilnya menggambarkan implikasi seni bina untuk prestasi runtime.

Keadaan ujian

Eksperimen ini membandingkan tiga pelaksanaan NAV mudah alih di empat peranti:

1. Komponen React Stateful: pelayan yang diberikan dan klien-terhidrasi.
2. Komponen Preact Stateful: pelayan yang diberikan dan klien-terhidrat.
3. Komponen preact tanpa statur: pelayan yang diberikan, tidak terhidrasi; Menggunakan pendengar acara standard.

Peranti termasuk:

1. Nokia 2 Android Phone (Chrome 83)
2. Laptop ASUS X550CC (Windows 10, Chrome 83)
3. IPhone Generasi 1 (Safari 13)
4. IPhone Generasi ke -2 (Safari 13)

Metrik

Metrik berikut diukur untuk setiap pelaksanaan dan peranti:

1. Masa permulaan: termasuk rangka kerja dan penghidratan (React/preact), atau hanya kod pendengar acara (eventListener).
2. Masa penghidratan: subset masa permulaan (React/preact sahaja).
3. Waktu Terbuka NAV Mudah Alih: Rangka kerja mengukur overhead dalam pengendalian acara.

Metodologi

Ujian melibatkan debugging dan profil jauh, merakam masa CPU untuk setiap metrik merentasi sepuluh lelaran setiap senario dan peranti. Prestasi rangkaian bukan faktor.

Hasilnya

Oleh kerana kerumitan data, hasilnya dibentangkan dalam format tabular yang menunjukkan masa CPU minimum, maksimum, median, dan purata. (Jadual terperinci boleh didapati dalam spreadsheet yang disertakan). Penemuan utama termasuk:

• Kos permulaan dan penghidratan yang tinggi React: terutamanya ketara pada Nokia 2 yang rendah.
• Prestasi yang lebih baik Preact: jauh lebih cepat daripada bertindak balas, tetapi masih melebihi belanjawan bingkai yang ideal pada Nokia 2.
• Prestasi pendengar acara unggul: secara konsisten lebih cepat daripada kedua -dua reaksi dan praktik, terutamanya untuk interaksi mudah.

Perbincangan: Tumpukan panggilan cetek

Perbezaan prestasi berpunca dari overhead rangka kerja dan penghidratan. Walaupun sesetengah prestasi perdagangan tidak dapat dielakkan untuk kemudahan pemaju, keseimbangan sering kali terlalu banyak ke arah pengalaman pemaju dengan mengorbankan pengguna. Tumpukan panggilan untuk reaksi dan penghidratan yang telah berlaku menyerlahkan tuntutan pemprosesan yang signifikan, terutama untuk tugas -tugas yang mudah. Menggunakan pendengar acara asli menawarkan pendekatan yang lebih efisien untuk pengurusan negara yang mudah.

Kesimpulan dan Cadangan

Analisis ini tidak dimaksudkan sebagai kritikan yang bertindak balas, melainkan semangat untuk menilai secara kritis pilihan kerangka dan kesan prestasi mereka. Beberapa strategi dapat mengurangkan masalah prestasi:

1. Komponen refactor yang berkesudahan ke komponen tanpa statur di mana mungkin.
2. Elakkan JavaScript dan penghidratan pelanggan untuk komponen tanpa stat.
3. Gunakan pendengar acara bebas kerangka untuk interaksi mudah.
4. Komponen hidrat marlak menggunakan pemerhati persimpangan atau requestIdleCallback .
5. Pertimbangkan Preact sebagai alternatif yang lebih cepat untuk bertindak balas.
6. Menyesuaikan pengalaman pengguna untuk peranti memori rendah menggunakan navigator.deviceMemory .

Mengutamakan ujian prestasi merentasi pelbagai peranti, memastikan keterangkuman bagi pengguna dengan keupayaan perkakasan yang berbeza -beza. Matlamatnya harus menjadi pengalaman web yang cepat dan boleh diakses untuk semua orang.

Terima kasih kepada Eric Bailey untuk maklum balas editorial dan kakitangan CSS-Tricks untuk menerbitkan artikel ini.

Atas ialah kandungan terperinci RadeventListener: Kisah Rangka Kerja Sisi Pelanggan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!