黄色いひし形のレベルアイコンの処理によって引き起こされる思考

最近、Qzone の黄色いひし形のアイコンの更新に取り組んでいたときに、最近ビジネス アイコンを最適化する際に遭遇したいくつかの問題を思い出し、意見をまとめて皆さんと議論しました。

実際の業務ではアイコンクラスが広く使われており、その特徴を示すのが配列状の階層アイコンです。以下の 2 つの方向性、つまり実装方法と、より適切に実装して実際のプロジェクトに近づける方法について一緒に説明します。

前提: ビジネスには 10 のユーザー レベルがあり、さらに大小 2 つの視覚サイズのアイコン、および「有効期限が切れたユーザーと更新されていないユーザー」のパフォーマンスを考慮して、合計 38 個のアイコンをデータベースに保存する必要があります。 (以下に示すように) 呼び出します。

プロジェクトの CSS フレームワークの開発では、リクエストの数、コードの量、互換性、画像ファイルのサイズ、コンポーネント モジュールに結合して論理的な実装を容易にできるかどうかなど、いくつかの点を考慮する必要があります。

1. さまざまなレベルのアイコンがさまざまな方法で広く使用されている場合、アイコンが多すぎるファイル要求を生成するかどうか。
2. レベル アイコンのコードが実装で使用するコードが多すぎるかどうか、実際にページに適用されるコードは少量で、結果的にコードが肥大化するかどうか。
3. (x) html+css によって出力されたアイコンがページに適用されるとき、それがページ上の他の要素と互換性があるかどうか。そうでない場合は、互換性の目標を達成するために一連のコードが追加されます。
4. アイコンが結合される場合は、プロジェクト アプリケーションの実際の状況を比較検討し、画像ファイルが大きすぎて帯域幅を消費するかどうかを確認します。
5. アイコンの HTML は固定されており、className 内の特定の数値が変数として使用され、変数を変更することでパフォーマンス上の効果が得られます。

出典:テンセントウェブチーム