フロントエンドのウェブサイトの最適化の一般的な方法

1.マージのjsとcssファイル

JSとCSSファイルが共有にマージされているので、コードを簡素化するだけでなく、実装のjsファイルで、JS複数のファイル場合だけでなく、あなたは、JSファイルをマージします、繰り返し拡張読み込み速度になりますサーバーにデータを要求する必要があります一緒に、リクエストの数を減らすには、ローディングの速度を向上させることができます。

2.Sprites画像技術(画像ウィザードテクノロジー)

大きなマップを含み、その後、CSSの背景を使用するには、次の画像ウィザード技術は、最適化、ページの読み込み速度に人気のある方法ですが、それはすべての散乱の画像(画像だけを知っている人、アイコン注)ページ関与していますこれだけ大規模なイメージをロードし、片側へのアクセスは、外出先の要求せず、することができたときに、今の応答のテキスト内のそれぞれの画像のプロパティ。このアプローチだけでなく、画像の大きさは、httpリクエストの数の減少を低減し、ページの最適化に精通負荷は大きくなることができます

3.圧縮画像とテキスト

画像圧縮を低減することができ、テキストデータのサイズは、HTML、XML、JSON、ジャバスクリプト、CSSとコードの70%のような最大のような特定のA圧縮コード、圧縮比で、コード圧縮が大幅にファイルのサイズを減らすことができ、それはすぐにページのロード

4.負荷要求(可視領域および遅延ローディング以外の領域)

ユーザーはより高速なWebページを参照してください重要なコンテンツの配信できるようにするためには、コンテンツ表示の優先エリアを読み込むことができ、あなたは一定の幅と高さに、プレースホルダ画像をプレースホルダを使用することができますページの回避変形するために、コンテンツ領域をロード遅延には見えません。ユーザーのマウスが転がり落ちたときにImageLazyLoadでjQueryとの良好な需要の負荷を達成することができ、いくつかのプラグインとして、唯一、以下の画像はロードする必要があります。もちろん、あなたも達成するためにネイティブのJSを使用することができます。

5.確認してください画像がロードされている最初の関数

サイトの可用性の重要性の主な考慮事項、事前にアウトロードする機能ボタン、ユーザーがちょうど立つことができる、ダウンロードボタン画像を、見つけるために、5秒の待機に費やさ8S時間をダウンロードし、ダウンロードページに入りますか?

6.画像の最適化・フォーマット

画像フォーマットの不適切な使用が遅い読み込み速度の非常に一般的な原因であり、複数画像フォーマットの正しい使用の大きさは、画像を縮小することができます。このような一般JPGとして使用バナーJPG画像フォーマットのようなより大きな一般的なページでは、非可逆圧縮、可能な最大範囲(チャネル透明度をサポートしていない)視覚体験に影響を与えることなく、画像の容積を減少させることである。一般有する小さな画像フォーマットをPNG、可逆圧縮は、一般に、(保持透明チャネル)です。

7.プログレッシブJPEGファイル(上級JPEG)

ProgressiveJPEGs画像はJPEG形式と呼ばれる、特殊な変種である「高度なJPEG。」画像をロードするときに、データがロードされるように、画像が徐々に明らかになり、唯一のぼやけた画像を表示するために始めた:先進的なJPEGファイルを作成する場合、データはそのようにしています。これは、インターレースGIFの画像形式に相当します。高度なJPEGは主に設計されたモデムを使用して低速のネットワークのために、高速なネットワークユーザーは、通常はそれと通常のJPEG形式の画像の違いを理解していないでください。ユーザーの比較的低速の場合、これは間違いなく非常に良い経験です。

8.コード流線型

コードはなく、プログラマのプログラミング機能テストのために、最も直接的な方法です。目的の機能を実装するために、ファイルサイズを小さくするために、だけでなく、時間の無駄な浪費を減らす少なくともコードとコードを最適化します。不要なスペース、およびコメント、改行などを削減しながら、ファイルサイズを小さくすることができます。

9.遅延任意にコードをロードして実行

コードが機能アウトこれらwindow.onloadイベントのバックのために書き込むことができるので、ほとんどのjsのコードページは、ページのみをロードした後に実行するために必要とされています。これは、ページの本文と必要なJSコード最初にロードされ、その後に来ると要求コード非起動に必要なことができます。

10.アヤックス

ページのニーズの一部のみを更新するときに、あなたはページ全体1のために、もう一度再要求データをページ全体を更新する必要はありませんので、非同期で更新ページにAJAXを使用、だけでページを更新するために必要なデータの一部を要求する必要があることができます。これは、ページの読み込み速度を向上させるだけでなく、性的体験を向上させるがあります。

最適化のページへの自動化ツールでは11

例えばRadwareFastView

おすすめ

転載: www.cnblogs.com/jiahuasir/p/11864466.html