Pensamentos desencadeados pelo processamento de ícones de nível de diamante amarelo

Recentemente, quando estava lidando com a atualização do ícone de diamante amarelo do Qzone, lembrei-me de alguns dos problemas que encontrei na otimização de ícones de negócios recentemente. Reuni minhas idéias e as discuti com todos.

No trabalho real, as classes de ícones são amplamente utilizadas e os ícones hierárquicos semelhantes a arrays mostram sua particularidade. As duas direções a seguir serão discutidas em conjunto, como implementá-lo e como melhor implementá-lo e aplicá-lo mais próximo do projeto real.

Suposição: Existem 10 níveis de usuário no negócio, além de ícones de dois tamanhos visuais, grande e pequeno, além do desempenho de “usuários expirados e não renovados”, um total de 38 ícones precisam ser armazenados no banco de dados para chamando (como mostrado abaixo).

No desenvolvimento do framework CSS do projeto, haverá vários fatores a serem considerados: número de solicitações, volume de código, compatibilidade, tamanho do arquivo de imagem, se pode ser combinado em módulos componentes e facilitar a implementação lógica.

1. Se ícones de muitos níveis diferentes gerarão muitas solicitações de arquivo quando forem amplamente usados ​​de maneiras diferentes;
2. Se o código para ícones de nível usa muito código na implementação e apenas uma pequena quantidade de código é realmente aplicada na página, resultando em código inchado;
3. (x) Quando o ícone gerado por html+css é aplicado à página, se ele é compatível com outros elementos da página, caso contrário uma série de códigos serão adicionados para atingir o objetivo de compatibilidade;
4. Se os ícones forem mesclados, avalie a situação real da aplicação do projeto e veja se o arquivo de imagem será muito grande e consumirá largura de banda;
5. O HTML do ícone é fixo e um determinado número no className é usado como variável. O efeito de desempenho é obtido modificando a variável.

Fonte: Equipe Web Tencent