Pikiran dipicu oleh pemrosesan ikon tingkat berlian kuning

Baru-baru ini, ketika saya berurusan dengan pembaruan ikon berlian kuning Qzone, saya teringat beberapa masalah yang saya temui dalam mengoptimalkan ikon bisnis baru-baru ini. Saya mengumpulkan pemikiran saya dan mendiskusikannya dengan semua orang.

Dalam pekerjaan sebenarnya, kelas ikon banyak digunakan, dan ikon hierarki seperti array menunjukkan kekhasannya. Dua arah berikut akan dibahas bersama, bagaimana menerapkannya dan bagaimana menerapkannya dengan lebih baik dan menerapkannya lebih dekat dengan proyek sebenarnya.

Asumsi: Ada 10 level pengguna dalam bisnis, ditambah ikon dari dua ukuran visual, besar dan kecil, serta kinerja "pengguna kedaluwarsa dan tidak diperpanjang", total 38 ikon perlu disimpan dalam database untuk panggilan (seperti yang ditunjukkan di bawah).

Dalam pengembangan kerangka CSS proyek, akan ada beberapa kunci yang perlu dipertimbangkan: jumlah permintaan, volume kode, kompatibilitas, ukuran file gambar, apakah dapat digabungkan ke dalam modul komponen dan memfasilitasi implementasi logis.

1. Apakah ikon dari berbagai tingkatan akan menghasilkan terlalu banyak permintaan file ketika digunakan secara luas dengan cara yang berbeda;
2. Apakah kode untuk ikon level menggunakan terlalu banyak kode dalam implementasinya, dan hanya sejumlah kecil kode yang benar-benar diterapkan pada halaman, sehingga menyebabkan kode membengkak;
3. (x) Ketika keluaran ikon oleh html+css diterapkan ke halaman, apakah kompatibel dengan elemen lain di halaman, jika tidak, serangkaian kode akan ditambahkan untuk mencapai tujuan kompatibilitas;
4. Jika ikon digabungkan, pertimbangkan situasi sebenarnya dari aplikasi proyek dan lihat apakah file gambar akan terlalu besar dan menghabiskan bandwidth;
5. HTML ikon sudah diperbaiki, dan nomor tertentu di className digunakan sebagai variabel. Efek kinerja dicapai dengan memodifikasi variabel.

Sumber: Tim Web Tencent