WEB2.0時代の到来により、ネットワークは前例のない発展を遂げました。フロントエンドのユーザーエクスペリエンスは、B/S構造における貧弱なユーザーインタラクションの欠点を補うためにますます重要になってきていますが、これによりクライアントへのプレッシャーが増大するという問題が生じます。たとえば、大量の JS コードを使用すると、誰もが JS コードがクライアント上で実行されることを認識し、ブラウザーでの Web ページ全体の解析効率に影響を及ぼし、クライアント トラフィックの増加を意味する可能性があります。サーバー負荷の観点またはユーザーの観点から見て、クライアント コードを最適化することが特に重要です。この記事では主にWEBフロントエンド最適化の手法を内部と外部の両面から解説します。読者に何らかの経験とインスピレーションを与えることができれば幸いです。
まず、Yahoo の統計グラフでhttp://yahoo.comの http トラフィック データを見てみましょう。
最初のサーバー要求からクライアントにページが完全に読み込まれるまで、HTML コードの読み取りは応答時間全体の 5% のみを占めていることがわかります。この結果は、サンプリングされた米国の大部分の Web サイトに当てはまります。上位 10 の Web サイトのうち、5% を超え 20% 未満の Web サイトは 1 つだけです。残りの 80% の時間は、Web ページの他のコンテンツ、つまりフロントエンド (元のテキストはフロント) を読むために使用されます。 -end、つまり HTML は含まれません。コードの残りの部分には、画像、スクリプト、フラッシュ、ビデオなど、さまざまなものを含めることができます。これが、表示速度を向上させるためにこれらのことに重点を置く必要がある主な理由です。
フロントエンドから始める必要がある主な理由は 3 つあります。
1. コードの外側には、次の 3 つのメソッドがあります。
1. CDN テクノロジーを使用する
具体的な方法については、Googleで調べてください。 (一般原則は、訪問者の位置とアクセスしたコンテンツを判断して、ユーザーのリクエストを処理するために最も近いサーバーを選択することのようです)
2. 有効期限の長いヘッダーを追加する
有効期限: 2010 年 4 月 15 日(木) 20:00:00 GMT
ブラウザーはキャッシュを使用して http リクエストの数を減らし、ページの読み込み時間を短縮します。ページ ヘッダーに長い有効期限が追加されると、ブラウザーは常にページ内の要素をキャッシュします。
ただし、これによって問題が発生します。つまり、ページ上の内容が変更された場合、名前を変更する必要があります。そうしないと、クライアントがアクティブに更新されなくなります。Yahoo ワーク グループでは、yahoo_2 などのバージョン番号が使用されます。 0.6.js
3.Gzip圧縮
Gzip は、現在最も一般的で効果的な圧縮方法であり、GNU によって開発され、RFC1952 によって標準化されました。
(Gzip は、画像、CSS、スクリプトなどをサーバー側で圧縮し、クライアントのブラウザに送信して解凍します。これにより、通信速度は向上しますが、サーバーへの負荷が増加します。一般的には、これが適切です。いくつかの要素を圧縮します。