Pensamientos desencadenados por el procesamiento de íconos de nivel de diamante amarillo

Recientemente, cuando estaba lidiando con la actualización del ícono del diamante amarillo de Qzone, recordé algunos de los problemas que encontré al optimizar los íconos comerciales recientemente. Reuní mis pensamientos y los discutí con todos. Agradecemos todas las opiniones.

En el trabajo real, las clases de iconos se utilizan ampliamente y los iconos jerárquicos en forma de matriz muestran sus particularidades. Las siguientes dos direcciones se discutirán juntas, cómo implementarlas y cómo implementarlas mejor y aplicarlas más cerca del proyecto real.

Supuesto: Hay 10 niveles de usuario en el negocio, además de íconos de dos tamaños visuales, grande y pequeño, así como el rendimiento de "usuarios vencidos y no renovados", se deben almacenar un total de 38 íconos en la base de datos para llamando (como se muestra a continuación).

En el desarrollo del marco CSS del proyecto, habrá varias claves a considerar: número de solicitudes, volumen de código, compatibilidad, tamaño del archivo de imagen, si se puede combinar en módulos de componentes y facilitar la implementación lógica.

1. Si los íconos de muchos niveles diferentes generarán demasiadas solicitudes de archivos cuando se usen ampliamente de diferentes maneras;
2. Si el código para los íconos de nivel usa demasiado código en la implementación y solo se aplica una pequeña cantidad de código en la página, lo que resulta en un código inflado;
3. (x) Cuando el icono generado por html + css se aplica a la página, si es compatible con otros elementos de la página; de lo contrario, se agregará una serie de códigos para lograr el objetivo de compatibilidad;
4. Si los íconos están fusionados, sopese la situación real de la aplicación del proyecto y vea si el archivo de imagen será demasiado grande y consumirá ancho de banda;
5. El HTML del icono es fijo y un cierto número en el nombre de clase se utiliza como variable. El efecto de rendimiento se logra modificando la variable.

Fuente: Equipo web de Tencent