PHP 学習: Web サイトのパフォーマンスを向上させるためのマイニングの詳細

インターネットはますます人々の生活に欠かせないものになっていると思います。 AjaxやFlexなどのリッチクライアントアプリケーションでは、C/Sでしか実装できない機能を数多く体験できるので、人々はより「幸せ」になります。たとえば、Google は最も基本的なオフィスアプリケーションをすべてインターネットに移行しました。もちろん、便利ではありますが、ページの表示がどんどん遅くなるのは間違いありません。私はフロントエンドの開発者ですが、Yahoo の調査によると、パフォーマンスの点ではバックエンドが 5% しか占めていないのに対し、フロントエンドは 95% も占め、そのうち 88% は最適化できます。

上記は、Web2.0 ページのライフサイクル図です。エンジニアたちは、それを「妊娠、出産、卒業、結婚」の 4 つの段階に分けて生き生きと説明しています。 Web リンクをクリックしたときに、単純なリクエストとレスポンスではなくこのプロセスを認識できれば、パフォーマンスを向上させるための多くの詳細を掘り出すことができます。今日、Yahoo 開発チームの Web パフォーマンスに関する研究に関する Taobao Xiao Ma 氏の講義を聞いて、多くのことが得られたと感じたので、それをブログで共有したいと思います。

ウェブサイトのパフォーマンスを最適化するための 14 のルールについて聞いたことがある人は多いと思います。詳細については、developer.yahoo.com をご覧ください

Firefox には yslow というプラグインがあり、firebug に統合されています。これを使用すると、これらの側面における Web サイトのパフォーマンスを簡単に確認できます。

これは、yslow を使用して私の Web サイト Xifengfang を評価した結果です。残念ながら、スコアは 51 しかありません。ふふ。主要な中国のウェブサイトのスコアは高くありません。テストを受けたところ、Sina と NetEase は両方とも 31 でした。すると、Yahoo（米国）のスコアは実に97点！これは、この点におけるヤフーの努力を示しています。彼らがまとめた14のルールと新たに追加された20のポイントから判断すると、実際には私たちがまったく考えていない詳細がたくさんあり、いくつかの実践は少し「倒錯的」ですらあります。

最初の 1 つは、HTTP リクエストの数をできる限り減らすことです (HTTP リクエストの数を減らす)

http リクエストの数を減らす方法を見つけると、必然的に Web ページの速度が向上します。一般的に使用される方法には、css、js のマージ (css ファイルと js ファイルをそれぞれ 1 つのページにマージする)、イメージマップ、CSS スプライトなどが含まれます。もちろん、css と js ファイルを複数のファイルに分割するのは、css の構造や共有などの考慮事項によるものかもしれません。当時のアリババの中国 Web サイトのアプローチは、Web サイトを個別に開発し、バックグラウンドで JS と CSS をマージすることでした。この方法では、ブラウザーに対するリクエストは 1 つでしたが、開発中に複数のリクエストに復元できるため、管理が容易になりました。繰り返しの参照。 Yahoo では、ホームページの CSS と JS を外部参照ではなくページファイルに直接書き込むことを推奨しています。ホームページへのアクセス数が多すぎるため、リクエストの数を 2 件減らすこともできます。実際、多くの国内ポータルがこれを行っています。

CSS スプライトとは、ページ上の背景画像を 1 つにマージし、CSS のbackground-position 属性では定義できない値を介して背景を取得することを意味します。タオバオとアリババの中国サイトは現在これを行っています。興味があれば、タオバオとアリババの背景画像をご覧ください。

http://www.csssprites.com/ これは、アップロードした画像を自動的に結合し、対応する背景の位置座標を与えることができるツール Web サイトです。そして、結果を png および gif 形式で出力します。

2 番目に、コンテンツ配信ネットワークを使用します。コンテンツ配信ネットワークを使用します

正直に言うと、私は CDN についてあまり知りません。簡単に言うと、既存のインターネットにレイヤーを追加することで、新しいネットワークアーキテクチャが公開されます。 DNS 負荷分散技術を通じて、ユーザーのソースを特定し、杭州のユーザーは、北京のアクセスに最も近いサーバー上のコンテンツにアクセスします。北京サーバーのコンテンツに近いです。これにより、ネットワーク上のデータ送信時間が効果的に短縮され、速度が向上します。さらに詳しい情報については、Baidu Encyclopedia の CDN の説明を参照してください。 Yahoo! は静的コンテンツを CDN に配信し、ユーザーの影響時間を 20% 以上短縮します。

記事 3、Expire/Cache-Control ヘッダーの追加: Expires ヘッダーを追加します

現在、ますます多くの画像、スクリプト、CSS、および Flash がページに埋め込まれており、それらにアクセスするときに必然的にこれを行うことになります。リクエスト。実際、Expires ヘッダーを設定することで、これらのファイルをキャッシュできます。 Expire は実際には、ヘッダーメッセージを通じてブラウザー内の特定の種類のファイルのキャッシュ時間を指定します。 Flash 内のほとんどの画像は、キャッシュした後は頻繁に変更する必要がなく、今後、ブラウザーはこれらのファイルをサーバーからダウンロードする必要がなく、キャッシュから直接読み取るため、アクセスが高速化されます。ページが再び大幅に高速化されます。一般的な HTTP 1.1 プロトコルによって返されるヘッダー情報:

<ol class="dp-c">
<li class="alt"><span><span>HTTP/1.1 200 OK   </span></span></li>
<li>
<span class="func">Date</span><span>: Fri, 30 Oct 1998 13:19:41 GMT   </span>
</li>
<li class="alt"><span>Server: Apache/1.3.3 (Unix)   </span></li>
<li><span>Cache-Control: max-age=3600, must-revalidate   </span></li>
<li class="alt"><span>Expires: Fri, 30 Oct 1998 14:19:41 GMT   </span></li>
<li><span>Last-Modified: Mon, 29 Jun 1998 02:28:12 GMT   </span></li>
<li class="alt"><span>ETag: “3e86-410-3596fbbc”   </span></li>
<li><span>Content-Length: 1040   </span></li>
<li class="alt"><span>Content-Type: text/html  </span></li>
</ol>

ログイン後にコピー

これは、サーバー側スクリプトを通じてキャッシュ制御と有効期限を設定することで実行できます。

たとえば、php

<ol class="dp-c">
<li class="alt"><span><span>＜!--pHeader(</span><span class="string">"Cache-Control: must-revalidate"</span><span>);   </span></span></li>
<li>
<span class="vars">$offset</span><span> = 60 * 60 * 24 * 30;   </span>
</li>
<li class="alt">
<span class="vars">$ExpStr</span><span> = </span><span class="string">"Expires: "</span><span> . </span><span class="func">gmdate</span><span>(</span><span class="string">"D, d M Y H:i:s"</span><span>, time() + </span><span class="vars">$offset</span><span>) . </span><span class="string">" GMT"</span><span>;   </span>
</li>
<li>
<span>Header(</span><span class="vars">$ExpStr</span><span>);-->  </span>
</li>
</ol>

ログイン後にコピー

で30日後の有効期限を設定することは、サーバー自体を設定することによって行うこともできます。これについてはよくわかりません（笑）。さらに詳しく知りたい友人は、http://www.web-caching.com/

を参照してください。

私の知る限り、Alibaba 中国の Web サイト Expires の現在の有効期限は 30 日です。ただし、この期間中に問題が発生しました。特にスクリプトの有効期限の設定は慎重に検討する必要があります。そうしないと、対応するスクリプト関数が更新された後、クライアントがそのような変更を「認識」するまでに長い時間がかかる可能性があります。以前 [suggest project] に取り組んでいたときにこの問題に遭遇しました。したがって、何をキャッシュすべきか、何をキャッシュすべきでないのかを慎重に検討する必要があります。

記事 4. Gzip 圧縮を有効にする: Gzip コンポーネント

Gzip の考え方は、最初にサーバー側でファイルを圧縮してから送信することです。これにより、ファイル転送のサイズを大幅に削減できます。送信完了後、ブラウザは圧縮コンテンツを再度解凍して実行します。現在のすべてのブラウザは gzip を「適切に」サポートしています。ブラウザだけでなく、大手の「クローラー」も認識できるので安心です。さらに、gzip の圧縮率は非常に高く、一般的な圧縮率は 85% です。これは、サーバー側で 100K のページをクライアントに送信する前に約 25K に圧縮できることを意味します。特定の Gzip 圧縮原理については、csdn の記事「Gzip 圧縮アルゴリズム」を参照してください。 Yahoo は、HTML (php)、js、css、xml、txt など、すべてのテキストコンテンツを gzip 圧縮する必要があることを特に強調しています。当社の Web サイトはこの点で良い仕事をしており、A です。以前は、当社のホームページは A ではありませんでした。ホームページには広告コードによって配置された JS が多数あり、これらの広告コードの所有者の Web サイトの JS は gzip 圧縮されておらず、これも当社の Web サイトのダウンにつながりました。

上記の 3 つのポイントのほとんどはサーバーサイドのコンテンツに属しており、私はそれらについて表面的な理解しか持っていません。間違っていたら訂正してください。

第5条：ページの先頭にスタイルシートを置く（スタイルシートを先頭に置く）

CSSをページの先頭に置くこれはなぜでしょうか？ IE や Firefox などのブラウザでは、すべての CSS が送信されるまで何も表示されないためです。理由はマー兄弟が言ったように単純です。 css、正式名称はCascading Style Sheets（カスケードスタイルシート）です。カスケードとは、次の CSS が前の CSS をカバーし、上位レベルの CSS が下位レベルの CSS をカバーできることを意味します。【CSSで！重要] この階層関係については、この記事の最後で簡単に説明しましたが、ここで知っておく必要があるのは、CSS をオーバーライドできることだけです。以前のスタイルシートは上書きできるため、IE などの多くのブラウザでは、スタイルシートをページの下部に配置することが禁止されているという問題が発生します。 Webコンテンツの連続表示。ブラウザーはページ要素の再描画を避けるために表示をブロックし、ユーザーには空白のページのみが表示されます。 Firefox は表示をブロックしませんが、スタイルシートのダウンロード後に一部のページ要素を再描画する必要がある可能性があり、ちらつきの問題が発生する可能性があります。なので、できるだけ早くCSSを読み込ませる必要があります

この意味に従って、もっと注意深く研究すると、実際には最適化できる領域があります。たとえば、このサイトに含まれる 2 つの CSS ファイル、