Gedanken, die durch die Verarbeitung gelber Rauten-Level-Symbole ausgelöst werden

Als ich mich kürzlich mit dem Update der Qzone -Symbole für gelbe Diamanten befasste, fielen mir einige der Probleme ein, auf die ich kürzlich bei der Optimierung von Geschäftssymbolen gestoßen bin. Ich habe meine Gedanken gesammelt und sie mit allen besprochen.

In der Praxis werden häufig Symbolklassen verwendet, und hierarchische Symbole im Array-Stil zeigen ihre Besonderheit. Die folgenden beiden Richtungen werden gemeinsam besprochen, wie man sie umsetzt und wie man sie besser umsetzt und näher am eigentlichen Projekt anwendet.

Annahme: Es gibt 10 Benutzerebenen im Unternehmen, plus Symbole in zwei visuellen Größen, groß und klein, sowie die Leistung von „abgelaufenen und nicht erneuerten Benutzern“, insgesamt müssen 38 Symbole in der Datenbank gespeichert werden Anruf (wie unten gezeigt).

Bei der Entwicklung des CSS-Frameworks des Projekts müssen mehrere Schlüssel berücksichtigt werden: Anzahl der Anforderungen, Codevolumen, Kompatibilität, Bilddateigröße, ob es in Komponentenmodule kombiniert werden kann und die logische Implementierung erleichtert.

1. Ob Symbole auf vielen verschiedenen Ebenen zu viele Dateianfragen generieren, wenn sie auf unterschiedliche Weise häufig verwendet werden;
2. Ob der Code für Ebenensymbole bei der Implementierung zu viel Code verwendet und nur eine kleine Menge Code tatsächlich auf der Seite angewendet wird, was zu aufgeblähtem Code führt;
3. (x) Wenn das von HTML + CSS ausgegebene Symbol auf die Seite angewendet wird, ob es mit anderen Elementen auf der Seite kompatibel ist, andernfalls wird eine Reihe von Codes hinzugefügt, um das Kompatibilitätsziel zu erreichen.
4. Wenn die Symbole zusammengeführt werden, wägen Sie die tatsächliche Situation der Projektanwendung ab und prüfen Sie, ob die Bilddatei zu groß ist und Bandbreite verbraucht.
5. Der HTML-Code des Symbols ist festgelegt und eine bestimmte Zahl im Klassennamen wird als Variable verwendet. Der Leistungseffekt wird durch Ändern der Variablen erzielt.

Quelle: Tencent Webteam