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

高パフォーマンスの CSS

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

1. 効率的な 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を複数回。

2. CSS 関連の画像処理

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

(1) 画像のサイズを設定しないでください

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

(2) CSS「スプライト画像」

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

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

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

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

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

1. プロジェクトの後半で CSS スプライトテクノロジを適用します

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

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

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

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

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

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

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

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

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

ウェブサイト全体の読み込み速度を向上させる重要な手段は、コードファイルのネットワーク転送速度を向上させます。コード圧縮に加えて、コードを合理化することも手段です。

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

関連するルールをマージし、簡潔な属性値を定義します

マージルールとは、フォントにマージできるフォントファミリー、フォントサイズ、フォントの太さなどを指します。。カラー値: color、#33AAFF などの単純な属性値は #3AF などに簡略化できます。

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

Webページには必ず類似性の高いモジュールがいくつか存在するため、同じ部分は一度定義し、異なる部分は別々に定義することができます。また、CSS では多くのプロパティを継承できるため、適切な場所で 1 回定義するだけで済みます。

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

無効な定義は、ページ関数の表示には影響しませんが、ページ表示のパフォーマンスに影響を与えます。コード量が増加する一方で、ブラウザーが解析する時間も増加します。コード。無効な定義には、無効なルールや無効なスタイル属性が含まれます。これらは通常、開発プロセス中に導入され、直感的に判断することができません。この場合、Chrome 独自のツールなどを使用して、CSS で無効なスタイルを見つけることができます。。

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

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

@import インポートされた新しいスタイルファイルはページの並行ダウンロードを妨げ、ファイルの全体的な読み込み時間が長くなります。

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

画像フィルターを使用すると、画像の読み込み時にブラウザの読み込みとレンダリングがブロックされ、追加のメモリオーバーヘッドが増加します。 CSS 式の機能は、CSS プロパティを動的に設定することです。式には互換性の問題だけでなく、パフォーマンスの問題もあります。たとえば、ブラウザのサイズが変更されたり、ウィンドウが変更されたりすると、ブラウザは頻繁に計算を実行し、大量のパフォーマンスを消費します。同じ効果は JavaScript でも実現できます。

css3 のベストプラクティス

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

css3 を使用する過程で、最もよく聞かれる質問は次のとおりです。互換性はどうですか?まさか、CSS の開発によって、これまで遭遇した多くの解決困難な問題に対して、より良い解決策が提供されるとは思わずにはいられません。 PC 側には、非常に批判の多い IE シリーズがあり、モバイル側ではより優れたものになりますが、一部はまだあまり良くありません。したがって、ブラウザのサポートを確認することはほぼ必須となっています。使用する機能が装飾的なものであり、全体的な状況に影響を与えない場合は、互換性の問題をあまり考慮する必要はありません。設計要件によるものであり、すべてのブラウザをサポートする必要がある場合は、特に注意を払う必要があります。開発者は、caniuse.com、css3 Click Chart、CSS コンテンツ、ブラウザーの互換性などのオンラインツールを選択して、互換性を確認できます。

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

CSS を使用したばかりの友人にとって、Web サイトのソースコードに「-webkit-、-moz-」などの文字が時々表示されると、奇妙に感じるかもしれません。これは何ですか？これらは、さまざまなブラウザの製造元によって追加されたプレフィックスに対応します。

ブラウザが CSS3 をサポートする場合、標準定義の初期バージョンのみが実装される可能性があるため、コードにブラウザのプレフィックスを追加することも無力な行為となり、コードがより複雑になります。そして維持するのがさらに困難になります。

ただし、「完璧」を期すためにすべてのブラウザーと互換性がある必要はありません。一般に、ブラウザーまたはシステムのバージョンの市場シェアと割合に応じて、プレフィックスを追加するかどうか、および追加するプレフィックスの数を決定できます。ブラウザを使用するターゲットユーザーの種類。そして、段階的な開発とシステムとブラウザの継続的なアップグレードと更新により、プレフィックスを使用する必要性は減少すると信じています。

また問題ですが、必要なプレフィックスを追加する必要があるということは、それでも必要な場合はかなり面倒ではないでしょうか。同じルールを 3 ～ 4 回記述する必要があり、多くの場所で使用される可能性があります。どうすればよいでしょうか。心配しないでください。いくつかの対策があります:

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) フォント設定