Мысли, вызванные обработкой значков уровней желтого ромба

Недавно, когда я занимался обновлением значка Qzone с желтым ромбом , я вспомнил некоторые проблемы, с которыми недавно столкнулся при оптимизации бизнес-значков. Я собрал свои мысли и обсудил их со всеми. Мы приветствуем все мнения.

В реальной работе широко используются классы значков, а иерархические значки в виде массивов демонстрируют их особенность. Следующие два направления будут обсуждаться вместе: как их реализовать и как лучше реализовать и применить ближе к реальному проекту.

Предположение: В бизнесе 10 уровней пользователей, плюс значки двух визуальных размеров, большого и маленького, а также показатели «просроченных и непродленных пользователей», всего в базе данных необходимо хранить 38 значков для вызов (как показано ниже).

При разработке CSS-фреймворка проекта необходимо учитывать несколько ключевых моментов: количество запросов, объем кода, совместимость, размер файла изображения, можно ли его объединить в составные модули и облегчить логическую реализацию.

1. Будут ли значки разных уровней генерировать слишком много запросов к файлам, когда они широко используются по-разному;
2. Использует ли код для значков уровней слишком много кода при реализации, и на странице фактически применяется лишь небольшой объем кода, что приводит к раздутию кода;
3. (x) Когда к странице применяется значок, выводимый с помощью html+css, совместим ли он с другими элементами на странице, в противном случае для достижения цели совместимости будет добавлен ряд кодов;
4. Если значки объединены, взвесьте реальную ситуацию в приложении проекта и посмотрите, не будет ли файл изображения слишком большим и не будет ли он потреблять полосу пропускания;
5. HTML-код значка фиксирован, а определенное число в имени класса используется в качестве переменной. Эффект производительности достигается за счет изменения переменной.

Источник: веб-команда Tencent.