Pensées déclenchées par le traitement des icônes de niveau de diamant jaune

Récemment, lorsque je traitais de la mise à jour de l' icône du diamant jaune Qzone, je me suis souvenu de certains des problèmes que j'ai rencontrés récemment lors de l'optimisation des icônes d'entreprise. J'ai rassemblé mes réflexions et en ai discuté avec tout le monde. Nous acceptons toutes les opinions.

Dans le travail réel, les classes d'icônes sont largement utilisées et les icônes hiérarchiques en forme de tableau montrent leur particularité. Les deux orientations suivantes seront discutées ensemble, comment les mettre en œuvre et comment mieux les mettre en œuvre et les appliquer plus près du projet réel.

Hypothèse : Il existe 10 niveaux d'utilisateurs dans l'entreprise, plus des icônes de deux tailles visuelles, grande et petite, ainsi que les performances des « utilisateurs expirés et non renouvelés », un total de 38 icônes doivent être stockées dans la base de données pour appel (comme indiqué ci-dessous).

Dans le développement du framework CSS du projet, il y aura plusieurs clés à considérer : le nombre de requêtes, le volume de code, la compatibilité, la taille du fichier image, s'il peut être combiné en modules de composants et faciliter une mise en œuvre logique.

1. Si les icônes de nombreux niveaux différents généreront trop de demandes de fichiers lorsqu'elles sont largement utilisées de différentes manières ;
2. Si le code des icônes de niveau utilise trop de code dans l'implémentation et que seule une petite quantité de code est réellement appliquée sur la page, ce qui entraîne un code gonflé ;
3. (x) Lorsque l'icône générée par html+css est appliquée à la page, si elle est compatible avec d'autres éléments de la page, sinon une série de codes sera ajoutée pour atteindre l'objectif de compatibilité ;
4. Si les icônes sont fusionnées, évaluez la situation réelle de l'application du projet et voyez si le fichier image sera trop volumineux et consommera de la bande passante ;
5. Le HTML de l'icône est fixe et un certain nombre dans className est utilisé comme variable. L'effet de performance est obtenu en modifiant la variable.

Source : équipe Web de Tencent