ページのロード速度を向上させるいくつかの方法
3027 ワード
技術的には、ページのロード速度および表示効果は、2つのケースによって決定する、1つは、Html関連によるバックグラウンドAspである.Netバックグラウンドロジックが影響するページの表示速度は、次の列はHtmlコードがページのロード効率に与える影響であり、バックグラウンドロジックがページのロードに与える影響は主に私たちのコード規範に従って効率の問題を保証しなければならない.
a.IE 6、IE 7、Firefoxをサポートする
b.最近XHtml規格を採用する可能性があり、またインタフェースはできるだけDiv+CSS方式でレイアウトする.
c.ページサイズの制御-ページが大きすぎると、ページのロード時間が長くなり、エンドユーザーでのページの表示効果に影響する
W 3 Cの規格に従ってHTMLコード構造を最適化し、いくつかのゴミの無意味なコードを除去する
d.ページ接続数を減らすことは非常に必要であり、非常に有効な方法である.一つのファイルに統一できるものはできるだけ一つのファイルに統一できます.例えばjsやcssなど、できるだけ大きな図に画像を入れます.
e.Gzip圧縮
HTTP/1.1では、ブラウザがHTTPリクエストで圧縮の方法を指定することができます.例えば、「Accept-Encoding:gzip,deflate」であれば、サーバはブラウザが「Content-Encoding:gzip」で圧縮できることを知っています.
Gzipは応答するデータを70%に減らすことができ、今日はブラウザのネットワークを通じて伝送され、90%がGzipをサポートしています.GzipでHTMLドキュメント、スタイルシート、XML、JSONなどを作ることができます.しかし、画像やPDFはGZipでは使用できません.彼らは圧縮されています.
f.スタイルシートを一番上に置く
g.Scriptをできるだけ下に置いて、圧縮を考えてもいいです.
h.CSS Expressionsの使用を避ける
例えば【background-color:expression((new Date().getHours()%2?"#B 8 D 4 FF":"#F 08 A 00");
このような文は、ユーザーの想像をはるかに超えて呼び出され、ページのロードやResizeのときに呼び出されるだけでなく、スクロールバーがスクロールしたり、マウスがページを移動したりするときに呼び出され、何万回も呼び出されてパフォーマンスが低下します.
i.JavaScriptとCSSをHTMLから分離する
HTMLに書かれているJavaScriptとCSSは、ページを要求するたびにダウンロードされますが、分離されたJavaScriptはブラウザCacheによって保存されます.このようなメリットは、ダウンロードを繰り返すことなくHTTPリクエストの回数を減らすことです
j.圧縮JavaScript
JSMInとYUI Compressorを使用してJS圧縮を行うことができます
k.Redirectsの使用を避ける
Redirectは通常301と302のステータスコードを使用し、以下は301応答の例である.
HTTP/1.1 301 Moved Permanently
Location: http://example.com/newuri
Content-Type: text/html
ブラウザは自動的にユーザーを対応するページに連れて行きます
主な問題はRedirectsがユーザー体験の速度を遅くすることです.HTMLドキュメントにRedirectを入れると、そのようなページは新しいHTMLを手に入れるまで何もしません
l.重複するJSコードを移動
ページに2回
IEでは同じJSリクエストが2回リクエストされますが、Firefoxでは1回目のリクエスト時にCacheに宿泊されていたので1回だけリクエストされました.
m.構成Etags
Entity Tags(ETags)は、last-modified dataによって検証されるブラウザのCache内の要素があるかどうかをサーバとブラウザでチェックするメカニズムです.1つのETageは、次の応答ヘッダなど、要素Versionを一意に識別する文字列です.
HTTP/1.1 200 OK
Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT
ETag: "10c24bc-4ab-457e1c1f"
Content-Length: 12195
その後、ブラウザがこの要素を検証する必要がある場合、IF-NONE-Matchでこのサーバに渡すことができ、一致する場合、304のステータスコードが返され、12195バイトの伝送が減少する
GET/i/yahoo.gif HTTP/1.1
Host: us.yimg.com
If-Modified-Since: Tue, 12 Dec 2006 03:03:59 GMT
If-None-Match: "10c24bc-4ab-457e1c1f"
HTTP/1.1 304 Not Modified
問題はETagsがすべてのサービスを1つのサーバで処理しなければならないことです.1つのサーバから与えられたEtagが別のサーバで検証する必要がある場合は、通じません.
だから、あなたのETagsが一致しない時、あなたの取引先は304のステータスコードを得ることができなくて、新しいから200バイトぐらいの応答を返さなければなりません.それから問題はそれだけではありません.もしあなたのサービスが1台のサーバーではなく複数台あれば、あなたのユーザーはかなり遅い反応を得て、あなたのサービス症は恨みのローンを消費して、Proxiesもあなたのコンテキストを有効にCacheすることはできません.あなたの要素にExpires Headerがあるかどうかにかかわらず、あなたのユーザーがReloadであろうとRefreshであろうと、Getリクエストは送信されました.
だからあなたはETagsの持ってくる便利さを享受することができなくて、それでは彼らをすべて外して、Apacheの中で、あなたはこのように配置することができます【Fileetag none】
作者:HeroBeast
a.IE 6、IE 7、Firefoxをサポートする
b.最近XHtml規格を採用する可能性があり、またインタフェースはできるだけDiv+CSS方式でレイアウトする.
c.ページサイズの制御-ページが大きすぎると、ページのロード時間が長くなり、エンドユーザーでのページの表示効果に影響する
W 3 Cの規格に従ってHTMLコード構造を最適化し、いくつかのゴミの無意味なコードを除去する
d.ページ接続数を減らすことは非常に必要であり、非常に有効な方法である.一つのファイルに統一できるものはできるだけ一つのファイルに統一できます.例えばjsやcssなど、できるだけ大きな図に画像を入れます.
e.Gzip圧縮
HTTP/1.1では、ブラウザがHTTPリクエストで圧縮の方法を指定することができます.例えば、「Accept-Encoding:gzip,deflate」であれば、サーバはブラウザが「Content-Encoding:gzip」で圧縮できることを知っています.
Gzipは応答するデータを70%に減らすことができ、今日はブラウザのネットワークを通じて伝送され、90%がGzipをサポートしています.GzipでHTMLドキュメント、スタイルシート、XML、JSONなどを作ることができます.しかし、画像やPDFはGZipでは使用できません.彼らは圧縮されています.
f.スタイルシートを一番上に置く
g.Scriptをできるだけ下に置いて、圧縮を考えてもいいです.
h.CSS Expressionsの使用を避ける
例えば【background-color:expression((new Date().getHours()%2?"#B 8 D 4 FF":"#F 08 A 00");
このような文は、ユーザーの想像をはるかに超えて呼び出され、ページのロードやResizeのときに呼び出されるだけでなく、スクロールバーがスクロールしたり、マウスがページを移動したりするときに呼び出され、何万回も呼び出されてパフォーマンスが低下します.
i.JavaScriptとCSSをHTMLから分離する
HTMLに書かれているJavaScriptとCSSは、ページを要求するたびにダウンロードされますが、分離されたJavaScriptはブラウザCacheによって保存されます.このようなメリットは、ダウンロードを繰り返すことなくHTTPリクエストの回数を減らすことです
j.圧縮JavaScript
JSMInとYUI Compressorを使用してJS圧縮を行うことができます
k.Redirectsの使用を避ける
Redirectは通常301と302のステータスコードを使用し、以下は301応答の例である.
HTTP/1.1 301 Moved Permanently
Location: http://example.com/newuri
Content-Type: text/html
ブラウザは自動的にユーザーを対応するページに連れて行きます
主な問題はRedirectsがユーザー体験の速度を遅くすることです.HTMLドキュメントにRedirectを入れると、そのようなページは新しいHTMLを手に入れるまで何もしません
l.重複するJSコードを移動
ページに2回
IEでは同じJSリクエストが2回リクエストされますが、Firefoxでは1回目のリクエスト時にCacheに宿泊されていたので1回だけリクエストされました.
m.構成Etags
Entity Tags(ETags)は、last-modified dataによって検証されるブラウザのCache内の要素があるかどうかをサーバとブラウザでチェックするメカニズムです.1つのETageは、次の応答ヘッダなど、要素Versionを一意に識別する文字列です.
HTTP/1.1 200 OK
Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT
ETag: "10c24bc-4ab-457e1c1f"
Content-Length: 12195
その後、ブラウザがこの要素を検証する必要がある場合、IF-NONE-Matchでこのサーバに渡すことができ、一致する場合、304のステータスコードが返され、12195バイトの伝送が減少する
GET/i/yahoo.gif HTTP/1.1
Host: us.yimg.com
If-Modified-Since: Tue, 12 Dec 2006 03:03:59 GMT
If-None-Match: "10c24bc-4ab-457e1c1f"
HTTP/1.1 304 Not Modified
問題はETagsがすべてのサービスを1つのサーバで処理しなければならないことです.1つのサーバから与えられたEtagが別のサーバで検証する必要がある場合は、通じません.
だから、あなたのETagsが一致しない時、あなたの取引先は304のステータスコードを得ることができなくて、新しいから200バイトぐらいの応答を返さなければなりません.それから問題はそれだけではありません.もしあなたのサービスが1台のサーバーではなく複数台あれば、あなたのユーザーはかなり遅い反応を得て、あなたのサービス症は恨みのローンを消費して、Proxiesもあなたのコンテキストを有効にCacheすることはできません.あなたの要素にExpires Headerがあるかどうかにかかわらず、あなたのユーザーがReloadであろうとRefreshであろうと、Getリクエストは送信されました.
だからあなたはETagsの持ってくる便利さを享受することができなくて、それでは彼らをすべて外して、Apacheの中で、あなたはこのように配置することができます【Fileetag none】
作者:HeroBeast