この記事では主に、CSS を記述する際のパフォーマンスの最適化と、スプライト画像やサイズ設定などの一般的な議論のポイントを含む、メンテナンスの必要な最適化に関する提案の概要を紹介します。それは非常に熱いものであり、すべての開発者が「知って」「できるようになった」後に必ず通過しなければならない、「どうやってうまくやるのか」という段階でもあります。パフォーマンスは、さまざまなデバイスやさまざまなネットワーク条件でのユーザー エクスペリエンスに関係します。また、多くの要因にも影響されます。この記事では、CSS で高いパフォーマンスを実現する方法について説明します。

HTML と CSS 自体のパフォーマンスの問題は顕著ではありませんが、可読性と保守性の向上を前提として、コードの実行と解析が高速化できれば、さらに効果的です。

簡単に言えば、ブラウザーで素早く解析して照合できる CSS セレクターは効率的なセレクターです。

まず、ブラウザが CSS をどのように解析するかを知る必要があります

例:

.nav ul.list li p{}

私たちの一般的な考え方は、最初に nav クラスを見つけ、次にクラスに含まれる ul を見つけ、次にリストの子孫を見つけることです。 in ul li のすべての p は、つまり、左から右へです。しかし、これは事実でしょうか？何？何？ ~

真実はその逆です!それはどういう意味ですか？つまり、最初のボックスから開始して徐々に範囲を狭めるのではなく、「ストリーキング」ボックス p (トラバースに相当) から開始して、その後 li を見つける、などということになります。彼らの間での消費については私が説明するまでもなく。この原則を理解することが重要です。効率的なセレクターとは、より高速なマッチングとより少ない検索を意味します。したがって、セレクターを定義するときは、最初の一致の数を最小限に抑え、一致する検索の全体の数を最小限に抑える必要があります。

上記の説明はこれらの原則に従っています

(1) ワイルドカードの使用を避けてください

(2) タグセレクターと単一属性セレクターをキーセレクターとして使用しないでください

(3) ID セレクターの前に追加しないでください タグ名

( 4) セレクターであまりにも多くのレベルを定義しないようにしてください。レベルが少ないほど、CSS と DOM 構造の間の結合度も下がり、スタイルの保守性が向上します

(PS: 正直に言うと、上記の「要約すると、上記について知っておくべき点は 2 つあります。最初の点は、CSS のパフォーマンスの問題は特に小さいプロジェクトでは顕著ではありません。 2 番目の点は、ID セレクターの定義には一意性があるという利点がありますが、定義できる ID が多すぎると再利用性が低下し、メンテナンスが困難になるため、使用はお勧めできません。 IDを複数回。

今日の Web ページでは、画像の割合とその重要性を誰もが知っています。では、ユーザーが Web ページを開いたときのエクスペリエンスを向上させるために、画像を適切に処理し、画像のスタイルを設定するにはどうすればよいでしょうか?以下にいくつかの意見があります:

私の個人的な経験では、デザイン案に従ってページを作成し、バックエンドに渡しました。彼は突然私のところに来てこう言いました。「やあ、見てください、ここで何かが間違っています。私がそれを見たとき、それはひどいものでした。そして、私は幅を定義していなかったことを思い出しました。」画像の高さ（デザイン案から直接切り出す必要はありません）、CSSスタイルで幅と高さを定義するのを間違えたようです。ということで、これは次回ページを作成する際に気を付けるべき点として後々考えてみました。この意見を見て、もっと良いことが分かりました。 まず、画像を美しくするために、デザイナーは必要なサイズを超える画像を作成します。次に、同じ画像がサムネイルなど、ページ上のさまざまな場所で複数回使用されることがあります。通常の写真と大きな写真。ここで問題が発生します。画像の元のサイズが実際の要求と異なる場合、スタイル スケーリングを使用すると、CPU に余分な計算処理が発生し、ブラウザでの画像のレンダリング時間が増加します。また、ネットワーク送信プロセスにより多くの帯域幅が占有され、ダウンロード時間も長くなります。したがって、ベスト プラクティスは、必要な部分に別の画像セットを作成して、最初のページ読み込み時に画像をより速く表示できるようにすることです。

を使用して、点在する画像を1つの大きな画像に統合し、背景の配置にはCSSを使用します。利点は、リクエストの数が減り、画像の全体的な読み込み速度が向上することです。 しかし、いくつかの欠点もあります:

たとえば、複数の画像を結合して大きな画像を作成するには、正確な計算と慎重な位置調整が必要であり、単純に手作業で作成するのは非常に複雑です。 (幸いなことに、これを行うのに役立つツールがいくつかあります。)

さらに、背景画像のサイズが変更され、元の領域が変更できない場合は、既存の画像を元の位置に維持するようにしてください。元の位置に修正する必要がある場合は、残りの画像スタイルを修正する必要があり、非常に面倒な作業になります。新しく追加した写真は最後に配置するのが最適です。

また、不適切な使用はパフォーマンスの問題を引き起こす可能性があります。最大の問題はメモリの消費です。制作中に計画を立てずにランダムに配置すると、画像が非常に大きくなり、多くのメモリを占有する可能性があります。

いくつかのベスト プラクティスを次に示します:

一般的に開発プロセス中、画像は頻繁に変更または置き換えられるため、この時点でスプライト技術を使用すると、開発コストが大幅に増加します。

2.「スプライト」写真を適切に整理します

すべての写真を 1 つの写真に収めたい場合は、問題が発生し、メンテナンスがあまり便利ではなくなります。組織の背景画像は、主にモジュールと背景画像のスタイルに応じて分類されます。例えば、表示用のサムネイルをまとめて配置したり、コメントやいいね、上下矢印などのアイコンをまとめて配置したりするなどです。

3.「スプライト」画像のサイズとサイズを制御する

大きなサイズの画像は多くのメモリを使用するため、長さと幅を掛けて適切なサイズに制御する必要があります。 2500 を超えず、サイズは 200kb 以内である必要があります

4. 背景画像ユニット間の距離と背景画像の位置を合理的に制御します

この原則は、他の無関係な背景画像が領域に表示されるのを防ぐことです。背景画像が要素サイズより小さい場合

5. スプライトの処理に関連するツールを使用する

3. CSS コードの量を減らす

(1) 簡潔な CSS ルールを定義します

(2) 同じ定義をマージする

(3) 無効な定義を削除する

その他の CSS の高パフォーマンスの実践

(1) @import の使用を避ける

(2) IE ブラウザの固有のスタイル、画像フィルターや CSS 式の使用は避けてください

css3 のベスト プラクティス

ブラウザのサポートを確認する

必要なブラウザプレフィックスを追加します

1. ツールを使用して CSS 属性にブラウザーの接頭辞を追加します

Prefixr、開発の後の段階でコードを処理できます。必要なプレフィックスを自動的に追加し、不要なプレフィックスを削除します。

Autoprefixer は、開発プロセスの自律性をさらに高めたい場合に使用できます。開発者は、ブラウザのサポート範囲をカスタマイズすることもでき、複数の開発環境に統合することもできます。 cssFx、*css Agent*、および -prefix-free などのいくつかのツールも利用できます。

2. CSS 前処理技術の助けを借りて

現在一般的なものには、css3 スタイルの特性に基づいてテンプレート スタイルを定義する方法があります。 利点は、多くのコードの重複を回避し、1 つの定義のみを維持する必要があることです。

3. ブラウザーのプレフィックスを過剰に追加しないでください

すべてのブラウザーと互換性を持たせるために、一部の開発者は、どうしてもすべてのブラウザーのプレフィックスを CSS コードに追加します。ブラウザの数が多すぎると、ブラウザの解析パフォーマンスが低下し、同時に、一部のプレフィックス付き属性がブラウザでサポートされなくなる可能性があります。

4. CSS3標準属性定義を追加する

標準属性定義とは何ですか?ブラウザの接頭辞は必要ありません。CSS3 を使用する多くの場所では、最後に標準の属性定義が記述されることに気づいたかもしれません。ブラウザが標準属性をサポートしている場合、以前に付加されたプレフィックスの定義を上書きすることができるため、CSS3 における標準の属性定義は、ブラウザのバージョンアップに伴って、ブラウザのプレフィックスが付加された定義が徐々に削除されます。更新しました。

もちろん、もう 1 つ注意すべき点は、一部の属性は現在 Only webkit または Only firefox に属しているため、標準定義や他のブラウザー プレフィックスを記述する必要がないことです。

CSS3 の新機能の互換性処理で良い仕事をしてください

互換性について言えば、非常に一般的な角丸や透明な画像など、IE の下位バージョンについて言及します。場合によっては、次のようにダウングレードすることがあります。フィルターまたは JavaScript、ボックス サイズ変更、変換を使用する場合は、Modernizr を使用することをお勧めします。このフレームワークには、多くの新しい CSS3 機能に対する互換性ソリューションが含まれています。

どのソリューションを使用しても、パフォーマンスの低下を引き起こすため、ルールなしに乱用することはできません。依然として、誰もが比較検討して選択する必要があります。 HTML5 をより効率的に使用する方法を提案する Web サイトをお勧めします: html5please。 Web サイトでは、CSS3 の新機能を使用方法に応じて 3 つのカテゴリに分類しています:

(1) 直接使用

にはほとんどの新機能が含まれており、border-radius などの一部の機能自体は互換性に影響しません。メディアクエリなど、複数の背景画像など劣化処理を追加する必要がある場合は、単一の背景画像または背景色を代替として設定する必要があります。

(2) 慎重に使用してください

この部分は主にパフォーマンスの問題です。たとえば、大きな領域を占める要素にボックス シャドウが適用されると、ページのスクロール時やマウス操作時に重大なパフォーマンスの問題が発生します。ホバリングしています。

(3)

の使用を避ける この部分は、リフレクションなど特定のブラウザのみをサポートしている可能性があるため、使用を避ける必要があります。

要約すると、CSS を使用してパフォーマンスを向上させる方法は数多くありますが、その影響がそれほど明らかではないようで、多くの人が便宜のために任意に使用する可能性があるため、それらは簡単に無視できます。自分の才能を活かして、効果が得られる限り好きなものを書いてください。これも少しネガティブです。優秀なエンジニアになるという目標を忘れていませんか？ ！ ~~CSS ルールは難しくありませんが、完璧を追求する必要があります。ぜひ書いて大切にしてください！ ~

高メンテナンスCSS

CSSの特徴は何ですか?

簡単に言うと、使用方法: インライン、埋め込み、外部、インポート。要素のスタイルを設定する方法: 要素のタグ名、クラス名、ID、さまざまなセレクター、およびそれらの組み合わせ。したがって、標準的な制限がない場合は、間違いなく混乱が生じ、CSS コードの保守が困難になります。

CSS コードを効率的に整理するにはどうすればよいですか?

明確な構造と明確なモジュール。合理的なコード編成構造により、コードの再利用性と保守性が向上し、開発の複雑さが軽減されます。では、どのように整理すればよいのでしょうか？

1 つ目は、コード ファイルを整理することです。コード ファイルは、一般カテゴリとビジネス カテゴリの 2 つの主要カテゴリに分類できます。 次に、リセット用のファイルがあります。一般的な名前は、reset、default、normalize などです。

ページダイアログボックス、プロンプトボックス、ヘッダー、ボトム、サイドバーなど、複数のページで使用される共通モジュールといくつかの基本スタイルを保存するために使用されるファイルがあり、多くの場合mod、commonなどの名前が付けられます。 、このように 各ページはコードの再利用を向上させるために参照されます。

さらに、古いバージョンの IE と互換性のあるスタイルを保存するにはファイルが必要です。これには 2 つの利点があります:

まず、非 IE ブラウザーのスタイル ファイルを読み込む負担が軽減されます

2 つ目は、IE の場合です。ファイル サーバーを使用すると、変更するファイルは 1 つだけで済み、変更するために複数のファイルを検索する必要はありません。もちろん、ブラウザーの互換性の問題に対処するときの 1 つの原則は、互換性の問題が発生しない他のソリューションがあるかどうかです。そうでない場合は、互換性が必要な部分を別のファイルに配置します。

残りの css スタイル ファイルはビジネス モジュールに使用されます。原則として、各モジュールのスタイル ファイルは異なるフォルダーに配置されます。

これは問題を引き起こす可能性があります。1 つのページに多くのファイルをインポートする必要があるのではないでしょうか?ページの読み込み中に http リクエストが大量に発生するのではありませんか?実際、ファイルの分割は開発とメンテナンスを容易にするためだけであり、公開するときに複数のファイルを圧縮して 1 つのファイルに結合するために使用されるため、複数のファイルを導入することを心配する必要はありません。

上記はファイルの編成に関するものであるため、スタイルステートメントもファイル内の特定のルールに従って編成する必要があります。 たとえば、モジュール内の要素のレベルに従って、それらが同じレベルにある場合は、ページ上の要素の位置に従って、上から下へ、または複数の要素がある場合には左から右へ。同じ宣言を共有する場合は、共通のスタイルを最初に宣言する必要があります。 これでは十分ではないと思われる場合は、less や sass など、変数、継承、操作、関数などの CSS 動的言語機能を提供する、より高度なメソッドを使用できます。

上記はいくつかの一般的な方向から説明されていますが、以下でいくつかの点について説明します

CSSリセットを使用してブラウザの表示効果を統一します

まず第一に、HTMLタグには独自のスタイルがありますが、異なるブラウザでは問題が発生します。 、タグのデフォルトのスタイルが異なるため、これらの違いのいくつかは開発に問題を引き起こしました。2004 年には、undohtml.Css という最初のリセット スタイル ファイルが開発されました。その後、さまざまなリセット プランが存在します。このプランには合計 1 行のコード *{margin: 0; padding: 0;} が含まれています。すべてのラベルのデフォルトのマージンとパディングのスタイルがリセットされましたが、欠点の 1 つは、その後の開発の複雑さが増し、全体的な開発効率を効果的に向上させることができないことです。さらに、このソリューションのパフォーマンスも低く、ページ要素が多い場合にはページ レンダリングのパフォーマンスに影響します。したがって、人々は徐々により良いリセット方法を模索しています。現在、Eric Meyer によって開発された Reset CSS や Yahoo のフロントエンド テクノロジー チームによって開発された YUI Reset CSS など、多くの人気のあるリセット ソリューションがあります。実際、すべてのプロジェクトに適した 1 つのソリューションは存在しないため、他の人のソリューションを参考にして、自分のプロジェクトに適したソリューションを設計するのが最善です。

以下の点を考慮する必要があります:

(1) HTML5 の新しいタグは、そのデフォルトの表示スタイルが以前のバージョンの IE で定義されていないため、表示スタイルをリセットする必要があります。

(2) ブラウザーのpadding、margin、borderタグの違いは主にこれら3つのスタイルに関連するデフォルトのスタイルによって引き起こされますが、すべての要素のmargin、padding、borderをリセットする必要はありません。実際の状況に応じてリセットする必要があります。

(3) フォント設定

~

、、などのセマンティックタグにはデフォルトのフォントが設定されていますが、実際に必要なフォントのサイズや太さはデフォルトとは異なります。 、一般的なプロジェクトではリセットされます。

(4) 他の要素のスタイルのリセット 典型的な例には、li のデフォルトのリスト項目スタイル、テーブルのセル間のデフォルトのスペース、リンクの下線などが含まれます。

CSS の並べ替えを定義する

CSS はあまり論理的ではなく、ツールの助けを借りずにランダムに記述しても機能に影響を与えないため、気にする人はほとんどいませんが、それでも並べ替えは可能です。

例:

1. クリーナー

2. 定義の重複を防止

4. フォローアップメンテナンスを迅速に配置できます

1. タイプ別表示とフローティング、位置、サイズ、フォントなど。

2. アルファベット順に並べる利点は、ルールが簡単なことです

3. スタイルで定義された文字の長さで並べます

実際のアプリケーションでは、A のようなものを使用することをお勧めします。 ただし、これをフロントエンド エンジニアが単独で行うのは困難です。作成プロセス中に最も効率的な方法で記述し、コードを送信するときに CSS を並べ替えるためのツールを使用できます。効率が向上するだけでなく、その後のコードの読み取りとメンテナンスも容易になります。無料ツールの 1 つは CSScomb です。

CSS のウェイトを合理的に利用してコードの再利用性を向上させます

ウェイトとは、つまり、CSS のさまざまな種類のセレクターの優先順位により、優先順位の高いスタイルが優先順位の低いスタイルを上書きします。体重に関するより具体的なルールについては、情報を確認してください。ここでは詳しく説明しません。 ここでは、セレクターの重みに応じて適切なセレクターを定義する方法について説明します:

(1) ID セレクターは使用しないようにします

1 つのページ内に 2 つの同一の ID を定義することはできません。 ID セレクターの重みが非常に高いです。ID セレクターを使用する要素のスタイルをオーバーライドする場合は、その要素に新しいセレクターを追加するか、! を使用する必要があります。重要なのは、その結果、再利用できないスタイル コードが多くなるということです。ベスト プラクティスは、可能な限り、低重みのセレクターを基本スタイルとして使用することです。

(2) サブセレクターのレベルを下げる

これは、サブセレクターの全体的な重みを減らすプロセスでもあります。同時に、レベルが少ないほど、HTML 構造への依存度が低くなります。 CSS のレベルが多すぎるもう 1 つの理由は、sass などのツールの乱用です。これは、スタイルを定義するためにネストと参照を使用できるため、私が最初に CSS を使い始めたときに認識していた問題でもあります。多くの労力がかかりますが、最終的にはファイルをコンパイルする必要があります。それほど多くのコードを繰り返し入力する必要はありませんが、生成されるコードは依然として大量になります。セレクターレベルを下げることに特別な注意を払う必要があります。

(3) CSSクラスセレクターを組み合わせて使用​​する

この方法を使用すると、開発者はCSSスタイルカバレッジの問題を考慮する必要がなくなり、セレクターの重みを計算するプロセスが回避され、同時にコードの再利用性が向上します組み合わせの概念は、複雑な親クラス内の変数部分と安定部分を分離することです。安定部分はメインクラスとして使用され、変数部分はいくつかの単純なクラスに分割されます。 HTML 構造への依存を減らし、コードの再利用性を向上させる役割もあります。

IE ブラウザと互換性を持たせるにはどうすればよいですか?

IE ブラウザーの IE8 以下のバージョンは、常にフロントエンド開発者の心を痛めてきました。それらと互換性を持たせるために追加された余分なコードはハックコードになるため、人々はそのコードを書きたがらないことがよくあります。 IE ブラウザとの互換性を実現するための実践的な方法をいくつか紹介します。

(1) IE ブラウザーの一般的なスタイル互換性の問題についてよく理解してください

1 つのタイプはブラウザ自体のバグであり、もう 1 つのタイプは標準と互換性がない、または標準をまだサポートしていません。

(2) スタイル互換のコードを分離

ブラウザのバージョンに応じてコードファイルを整理し、判断ステートメントを使用してオンデマンドでロードします

em、px、または%?

このトピックについて話す理由は、現在、ページの機能がますます増えており、ページにアクセスするために使用されるデバイスがますます多くなっているため、ページのレイアウトとサイズが非常に難しくなっているためです。ページ上の要素のサイズは、フォントや画像のサイズなどもレイアウトと密接に関係します。これを考慮して、フロントエンド開発では、ページ レイアウトを改善する方法に注目し始めました。その中心的な考え方は、ページ要素のサイズとフォント サイズを相対値に設定することです。フォントの相対単位には、em、ex、ch、rem が含まれます。詳細に入る必要はありません。説明すべき情報はさらにあります。以下にいくつかのベストプラクティスを示します:

(1) 相対サイズを設定してみます

いわゆる相対サイズの設定は、ページ全体のレイアウトが適応的であることを意味するものではなく、全体のサイズを固定サイズにすることができます。またはページのデザインに応じて自動的にサイズを調整します。

(2) 要素のサイズが予測可能な場合にのみ絶対サイズを使用します

たとえば、デザインで全体の幅、サイドバーの幅、ヘッダーとフッターの固定高さなどの絶対幅の使用が必要な場合写真やビデオを表示する場合、これらのマルチメディア要素を表示する際には、適切な固定サイズが最良の結果をもたらします。

(3) em を使用してフォント サイズを設定する

px を使用してフォント サイズを設定することはスケーラブルではありません。また、フォント サイズの設定にパーセンテージを使用することも一般的ではありませんが、フォント サイズの設定に em を使用するのが最善の方法です。フォント 設定のレベルが上がると、この方法では実際にメンテナンスのコストが増加します。このため、CSS3 では、ルート要素のフォント サイズに基づいて計算される rem 単位が導入されており、現在、IE8 を除いてこの問題は回避されています。以下、ほとんどのブラウザ、すべてのサーバーがサポートしています。

この記事の多くのことは、初心者に何らかのガイダンスと助けになることを願っています。皆さんも少しずつ実践していく中で、感じたこと、経験、教訓などがあると思いますが、それを頻繁にまとめて次の実践に活かしていくことはとても有益だと思います。一緒に作りましょう！ ~

上記がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連する推奨事項:

CSS パフォーマンスを向上させる方法

以上がCSS を使用してコードを記述するときの高いパフォーマンスのまとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。