H5+C3 がフロントエンド インターフェイスを最適化する方法

今回は、H5+C3 でフロントエンド インターフェースを最適化する方法と、H5+C3 でフロントエンド インターフェースを最適化するための注意事項について説明します。実際のケースを見てみましょう。

ウェブサイトのフロントエンドの最適化は現在多くの人が関心を持っていることであり、多くの人にとって今必要な作業でもあります。では、フロントエンドの最適化を向上させるために HTML と CSS をどのように使用すればよいでしょうか?次の記事ではフロントエンドの最適化に関するヒントをいくつか紹介していますので、ご興味があれば一緒に学びましょう。

ウェブコンテンツ

http リクエストの数を減らします

Web サイトの応答時間のほとんどは、Web リソースのダウンロードに費やされます。ここでのリソースとは、画像、CSS、JS、Flash などを指します。ここで説明するリクエストの数を減らすことが、応答時間を短縮する鍵となります。

大まかに言うと、次の 2 つのタイプに分類できます。 1 つは、ページのデザインを簡素化してリクエストの数を減らすことです。

次に、Web ページ上のより複雑なスクリプトまたは CSS ファイルでは、複数のスクリプトを使用したり、それらを 1 つのファイルにパッケージ化したりすることができます。画像では、CSS スプライト (画像結合テクノロジ) を使用して複数の画像を 1 つの画像に結合し、CSS を使用して画像のコンテンツを制御します。この画像をどこに表示するかによって、リクエストの数が減ります。このセクションの内容については、JD.com の以下のセクションの

CSS の配置

を参照してください。 ページジャンプは避けてください

ページジャンプを避ける目的は何ですか?つまり、クライアントはサーバーからジャンプ応答を受信すると、サーバー応答内の場所で指定されたアドレスに従ってリクエストを再送信します

。 例:

今、ソースコード時代を訪れた学生にソースコードフォーラムに入ってもらいたいのですが、これがサーバーサイドの301リダイレクトの実装方法です

。 リライトエンジンオン

RewriteCond %{HTTP_HOST} !^www.itsource.cn$ [NC]//これはクライアントによって要求されたアドレスです

RewriteRule ^(.*)$ http://bbs.itsource.cn/$1 [R=301,L]//これはクライアントが実際に見る Web ページです

遅延読み込み

ここで説明している遅延読み込みでは、最初に Web ページに最初に読み込まれる最小のコンテンツが何かを知る必要があり、残りのコンテンツは遅延読み込みを使用して実装できます。

最も典型的な方法は、

JavaScript

がコンテンツの読み込みを遅延させる可能性があるというものです。この方法は、Web ページの開発時に、まず Web ページが JavaScript を使用せずに通常のページ効果を表示できることを確認し、その後、遅延読み込みスクリプトを使用して、いくつかの高度な機能効果を実現します。やってる。 先を読み込んでいます

この方法は上記の方法のちょうど逆で、Web ページにいくつかのリソースを事前にロードすることを意味します。

の 3 つのカテゴリに分類されます。 1. 無条件早期ロード

この方法は、Web ページが読み込まれた直後に他のコンテンツを読み込むことです。たとえば、淘宝網は読み込みが完了した後にいくつかの写真を読み込みます

。 2. 条件付き読み込み

Baidu 検索など、ユーザーが入力した情報に基づいて、ロードする必要があるコンテンツを推測します。

期待どおりにロードしています

これはもう少し高度なもので、通常、ユーザーのアクセス動作により、古い Web ページのローカル キャッシュが存在する場合に、デザイナーが事前に追加できない状況が発生します。コンテンツの一部が古い Web ページにキャッシュされ、そのコンテンツが新しい Web サイトで使用される場合があります。この場合、新しい Web ページは最初にいくつかのリソースをローカル エリアにダウンロードします。

DOM 要素の数を減らす

Web ページ内の要素が多すぎると、Web ページのパフォーマンスにも影響し、Web ページやスクリプトの実行の負荷も増加することが考えられます。 JS で何らかの効果を実現したい場合、まず関連する情報を見つけてから、関連する操作を実行する必要がありますか? Web ページに要素が多すぎる場合、明らかな時間差が生じますか?したがって、DOM 要素の数を減らしても、Web ページのパフォーマンスに影響します。

ドメイン名に基づいてコンテンツを分割する

他の大規模な Web サイトを見ると、画像のアドレスが Web サイトのメインのドメイン名と異なっていることが多く、関連リソースを保存するために複数のドメイン名が使用されているのはなぜでしょうか。実際、ブラウザには通常、同じドメイン名に対するダウンロード接続の数に制限があります。ドメイン名に基づいてダウンロード コンテンツを分割すると、ブラウザ内の並列ダウンロード接続の数が間接的に増加する可能性があります。 Web サイト全体のダウンロード リソース容量が大幅に向上します。これにより、パフォーマンスを最適化する効果が得られます。

iframe の数を減らします

前回はiframeの使い方についてお話しましたが、実際のプロジェクトではメリットとデメリットに注意して利用してください。

利点:

遅いコンテンツの読み込みに使用でき、スクリプトを並行してダウンロードできます

短所:

空のコンテンツで iframe を使用すると、読み込み時間がかかり、ページが読み込めなくなります

404を避けてください

404 は、一般的なサーバー リソースが見つかりません。まず、ユーザー エクスペリエンスに影響を及ぼし、役に立たない情報を返すページが開きます。次に、外部スクリプトを Web ページにロードする必要があり、404 が返されます。これにより、他のスクリプトのダウンロードがブロックされるだけでなく、クライアントはダウンロードされたコンテンツ (404) を Javascript として解析します。

CSS

スタイルシートを上部に固定します

Web コンテンツは上から下に読み込まれるため、Web ページの読み込みを高速化するために、CSS スタイルを Web ページの先頭に配置するよう最善を尽くします。これは、多くのコンテンツを含む Web ページにとっては非常に重要であり、少なくとも重要になります。白い画面でもユーザーをページを待たせることがなく、このユーザー エクスペリエンスも非常に優れています。

スタイル シートを一番下に置くと、ほとんどのブラウザは実装時に再描画を回避しようとするため、ブラウザがダウンロードされた Web ページのレンダリングを拒否する状況が発生します。したがって、これも重要なポイントです。

CSS 式

を避ける 基本的な CSS3 に精通している友人の中には、その強力な開始機能に常に感心しており、CSS プロパティを動的に設定するために CSS 式を使用することを好む人もいます。これは IE5 ～ IE8 でサポートされており、式は他のブラウザでは無視されます。

他の CSS 式の問題は、それらが私たちが考えているよりもはるかに多く再計算されることであるため、不適切な使用によって引き起こされる過剰なパフォーマンスのオーバーヘッドを防ぐために、これらの式の使用を避けるよう努めています。

@importの代わりにリンクタグを使用してください

Web ページのデザインでは、CSS を参照するためにリンク タグを使用し、@import を使用しないようにしてください。その理由は非常に単純で、Web ページのコンテンツの下部に CSS スタイルを配置するためであることがわかります。 。

写真

画像を最適化する

Web ページの制作では、バナーなどの画像の読み込みが非常に遅く、Web サイトの速度にも数百 K から数メガバイトの範囲で影響を与えることがわかります。では、そのような写真を最適化する余地はあるのでしょうか? ?

今日はデザイナーがよく利用する画像最適化プラットフォーム、Zhitu.comを紹介します

ご覧のとおり、元の画像と最適化された (スマート イメージ) 画像の差は 500 K を超えています。画像が多数ある Web サイトの場合、サイト全体のすべての画像を最適化すると、次のようになります。どれだけのトラフィックが節約されることでしょう！したがって、これらの画像の最適化を強くお勧めします。

空の画像ソースを避ける

img タグを使用するときは、空の画像 src の使用を避けるようにしてください。空の画像 src を使用しても、ブラウザーはサーバーにリクエストを送信することになり、時間とサーバー リソースが完全に無駄になります。特に毎日多くの人がサイトにアクセスする場合、このような空リクエストによる被害は無視できません

CSS スプライトを最適化する

Spirite で画像を横に配置すると、縦に配置するとファイル サイズが大きくなります

Spirite では、PNG8 形式に適応するには、近い色を組み合わせることで色数を減らすことができます。 聖霊像の中央に大きな隙間を残さないでください。これによってファイル サイズが大幅に増加することはありませんが、ユーザー エージェントが画像をピクセル マップに解凍するために必要なメモリが少なくなります。

HTML で画像を拡大縮小しないでください

ページに合わせて画像を拡大縮小するために大きな画像を使用することは避けてください。小さな画像が必要な場合は、小さな画像を使用してください。理由は非常に単純です。携帯電話ユーザーの場合、これは依然としてかなりのトラフィックが発生するため、全体的な効果を達成するために大きな画像をロードするのではなく、さまざまなデバイスで最適な効果を実現できます。ウェブサイトに特化した時代。

小さくてキャッシュ可能な favicon.ico を使用してください

一般に、企業 Web サイトや Web マスターはアイコン ファイル favicon.ico を追加することを好みます。サーバーにファイルがあるかどうかに関係なく、ブラウザはこのアイコンを要求しようとします。したがって、このアイコンが存在することと、ファイルができるだけ小さいこと、できれば 1,000 未満の有効期限を設定する必要があります

。 概要:

最後に、この記事は主に初心者レベルの Web デザイナーを対象としています。この記事の内容では、HTML、CSS、JavaScript、画像などについてのみ説明します。もちろん、他の方法もいくつかありますが、それについては次の記事で説明します。

もちろん、上記で説明したフロントエンド最適化の一般的なヒントは理解できましたか? Web ページにこれと同様のエラーを含めないでください。そうしないと、ユーザー エクスペリエンスに大きな影響を及ぼします。結局のところ、今は WEB2.0 の時代です。ユーザーが Web ページに満足していない場合、それは開発者に不利です。いいえ、ですから、より優れた、より優れた Web ページを作成するために、私たちはこれらの細部にできるだけ注意を払います。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

H5 リンクの使用

H5 テキスト書式設定を使用する方法

H5+C3+JS を使用してフロアジャンプ効果を実現する

以上がH5+C3 がフロントエンド インターフェイスを最適化する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。