노란색 다이아몬드 레벨 아이콘 처리로 인해 발생하는 생각

최근 Qzone 옐로우 다이아몬드 아이콘 업데이트를 다루면서 최근 비즈니스 아이콘을 최적화하면서 겪은 몇 가지 문제가 생각나서 모든 분들의 의견을 환영합니다.

실제 작업에서는 아이콘 클래스가 널리 사용되는데, 배열 형태의 계층적 아이콘이 그 특수성을 드러낸다. 이를 구현하는 방법과 이를 더 잘 구현하고 실제 프로젝트에 더 가깝게 적용하는 방법에 대해 다음 두 가지 방향이 함께 논의됩니다.

가정: 비즈니스에는 10개의 사용자 수준이 있고 크고 작은 두 가지 시각적 크기의 아이콘과 "만료된 사용자 및 갱신되지 않은 사용자"의 성능이 있습니다. 총 38개의 아이콘을 데이터베이스에 저장해야 합니다. 전화를 겁니다(아래 그림 참조).

프로젝트의 CSS 프레임워크를 개발할 때 고려해야 할 몇 가지 핵심 사항이 있습니다: 요청 수, 코드 볼륨, 호환성, 이미지 파일 크기, 구성 요소 모듈로 결합할 수 있는지 여부 및 논리적 구현을 ​​용이하게 하는지 여부.

1. 다양한 수준의 아이콘이 다양한 방식으로 널리 사용될 때 너무 많은 파일 요청을 생성하는지 여부
2. 레벨 아이콘의 코드가 구현 시 너무 많은 코드를 사용하는지, 페이지에 실제로 적용되는 코드의 양이 적어서 코드가 비대해지는지 여부.
3. (x) html+css로 출력된 아이콘이 페이지에 적용될 때 페이지의 다른 요소와 호환되는지 여부, 그렇지 않으면 호환성 목표를 달성하기 위해 일련의 코드가 추가됩니다.
4. 아이콘이 병합되면 프로젝트 애플리케이션의 실제 상황을 평가하고 이미지 파일이 너무 커서 대역폭을 소모하는지 확인합니다.
5. 아이콘의 HTML은 고정되어 있으며, className의 특정 숫자가 변수로 사용됩니다. 변수를 수정하면 성능 효과가 나타납니다.

출처: 텐센트 웹팀