Apakah cara utama mengoptimumkan prestasi frontend?

Question

IT Interview Practice · Accepted Answer

**Optimumkan bahagian perjalanan pengguna yang benar-benar perlahan, kemudian ukur sama ada perubahan itu membantu.** Bundle yang lebih kecil berguna apabila ia memperbaik pengalaman atau mengurangkan kos yang berkaitan.

Katakan pelanggan menggunakan telefon biasa untuk membuka halaman produk, lambat melihat imej utama dan mengalami kelewatan ketika memilih variasi. Pemuatan dan interaksi ialah masalah berbeza; satu pengoptimuman mungkin tidak menyelesaikan kedua-duanya.

## 1. Kenal pasti gejala melalui ukuran yang mewakili pengguna

Pilih perjalanan, peranti dan keadaan rangkaian yang penting kepada produk. Gunakan ukuran pengguna sebenar untuk mengenal pasti kumpulan yang terjejas dan ujian pelayar terkawal untuk menghasilkan semula masalah. Komputer riba pembangunan yang berkuasa boleh menyembunyikan kelewatan yang dialami pelanggan.

- LCP mengukur bila elemen kandungan kelihatan yang terbesar dipaparkan, membantu menilai pengalaman pemuatan.
- INP menerangkan tahap respons terhadap interaksi pengguna sepanjang lawatan ke halaman.
- CLS mengukur perubahan susun atur yang tidak dijangka, seperti kandungan bergerak apabila imej muncul.

[Core Web Vitals](https://web.dev/articles/vitals) ini menerangkan aspek pengalaman yang berbeza. Padankannya dengan tugas sebenar, seperti berjaya memilih variasi dan memasukkannya ke dalam troli, supaya pembaikan satu angka tidak menyembunyikan fungsi yang rosak.

## 2. Cari perkara yang melambatkan kandungan penting

Periksa garis masa permintaan, atau request waterfall, yang menunjukkan bila sumber ditemui, dimuat turun dan selesai. Untuk halaman produk ini, imej utama mungkin hanya mula dimuatkan selepas JavaScript dimuat turun dan permintaan API selesai.

```text
HTML -> JavaScript -> Product API -> Main image
```

Memampatkan imej membantu muat turunnya, tetapi menemuinya lebih awal boleh menghapuskan masa menunggu sebelumnya. Pertimbangkan untuk memasukkan kandungan produk yang berguna dalam HTML awal melalui pemaparan pelayan atau penjanaan statik apabila sesuai. Semak kemutakhiran data, kos pelayan dan JavaScript yang masih diperlukan untuk menjadikan kandungan itu interaktif.

## 3. Kurangkan pemindahan dan pelaksanaan yang tidak perlu

Selepas memahami laluan kritikal, buang kerja yang tidak membantu paparan semasa. Utamakan perubahan yang berkait dengan kelewatan yang diukur dan bukannya menggunakan semua teknik tanpa pertimbangan.

- Sediakan imej dengan saiz dan format yang sesuai. Muatkan imej di luar skrin secara tertangguh, tetapi jangan melambatkan imej utama yang pengguna sedang tunggu.
- Pisahkan kod mengikut laluan atau ciri supaya halaman produk tidak memuatkan antara muka pentadbiran yang tidak digunakan.
- Buang kebergantungan yang tidak diperlukan dan semak skrip pihak ketiga, yang boleh menggunakan masa rangkaian serta kerja utas utama.
- Mampatkan respons teks yang sesuai dan cache aset statik berversi. Tetapkan dasar selamat yang berasingan untuk data peribadi pengguna.

Fail lebih kecil mengurangkan pemindahan, tetapi pelayar masih perlu menghurai dan menjalankan kod. Semak kesan terhadap rangkaian dan CPU sebelum menganggap perubahan berjaya.

## 4. Baiki punca interaksi perlahan

Jika pemilihan variasi lambat, profilkan utas utama yang mengendalikan kebanyakan skrip dan pemaparan halaman. Pengiraan panjang boleh menghalangnya daripada memberi respons walaupun semua fail sudah dimuatkan.

Pecahkan kerja panjang kepada bahagian kecil atau pindahkan pengiraan yang sesuai kepada worker. Bagi input yang kerap berubah, elakkan permintaan tidak perlu dan cegah respons lama daripada menimpa pilihan baharu. Gunakan memoization apabila ukuran menunjukkan pengiraan berulang mahal, bukan sebagai tambahan wajib.

Untuk senarai yang sangat panjang, memaparkan hanya bahagian yang kelihatan boleh mengurangkan kerja, tetapi kekalkan navigasi papan kekunci dan kebolehcapaian. Sediakan ruang untuk imej dan kandungan yang muncul lewat bagi mengelakkan susun atur melompat. Perubahan ini menangani gejala berbeza, jadi sahkan setiap satunya terhadap masalah asal.

## 5. Sahkan keseluruhan perjalanan selepas perubahan

Ulang ujian terkawal yang sama, kemudian pantau hasil pengguna sebenar selepas keluaran. Selain metrik prestasi, semak ketepatan produk, akses papan kekunci, penyelesaian troli dan sebarang peningkatan beban backend.

Tetapkan had praktikal untuk sumber yang penting dan pantau kemerosotan. Skor makmal yang baik sahaja tidak mencukupi jika pelanggan sebenar masih menunggu atau tidak dapat menyelesaikan tugas. **Hasil akhirnya perlu berupa perjalanan yang lebih pantas, stabil dan boleh digunakan, disokong ukuran sebelum dan selepas perubahan.**

1. Kenal pasti gejala melalui ukuran yang mewakili pengguna

2. Cari perkara yang melambatkan kandungan penting

3. Kurangkan pemindahan dan pelaksanaan yang tidak perlu

4. Baiki punca interaksi perlahan

5. Sahkan keseluruhan perjalanan selepas perubahan

Soalan berkaitan