PHP チュートリアル: Web サイトのパフォーマンスを向上させるために詳細を調べる
- WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBオリジナル
- 2016-06-21 08:56:45817ブラウズ
インターネットはますます人々の生活に欠かせないものになっていると思います。 AjaxやFlexなどのリッチクライアントアプリケーションでは、C/Sでしか実装できない機能を数多く体験できるので、人々はより「幸せ」になります。たとえば、Google は最も基本的なオフィス アプリケーションをすべてインターネットに移行しました。もちろん、便利ではありますが、ページの表示がどんどん遅くなるのは間違いありません。私はフロントエンドの開発を行っていますが、Yahooの調査によるとバックエンドは5%しかなく、フロントエンドは95%も占めており、そのうち88%は最適化できるそうです。
上記は、Web2.0 ページのライフサイクル図です。エンジニアたちは、それを「妊娠、出産、卒業、結婚」の 4 つの段階に分けて生き生きと説明しています。 Web リンクをクリックしたときに、単純なリクエストとレスポンスではなくこのプロセスを認識できれば、パフォーマンスを向上させるための多くの詳細を掘り出すことができます。今日、Yahoo 開発チームによる Web パフォーマンスの研究に関する Taobao Xiaoma 氏の講義を聞いて、非常に得をしたと感じたので、それをブログで共有したいと思います。
ウェブサイトのパフォーマンスを最適化するための 14 のルールについて聞いたことがある人は多いと思います。詳細については、developer.yahoo.com
をご覧ください。| 1. 尽可能的减少 HTTP 的请求数 | [content] |
| 2. 使用 CDN（Content Delivery Network） | [server] |
| 3. 添加 Expires 头(或者 Cache-control ) | [server] |
| 4. Gzip 组件 | [server] |
| 5. 将 CSS 样式放在页面的上方 | [css] |
| 6. 将脚本移动到底部（包括内联的） | [javascript] |
| 7. 避免使用 CSS 中的 Expressions | [css] |
| 8. 将 JavaScript 和 CSS 独立成外部文件 | [javascript] [css] |
| 9. 减少 DNS 查询 | [content] |
| 10. 压缩 JavaScript 和 CSS (包括内联的) | [javascript] [css] |
| 11. 避免重定向 | [server] |
| 12. 移除重复的脚本 | [javascript] |
| 13. 配置实体标签（ETags） | [css] |
| 14. 使 AJAX 缓存 |
Firefox には yslow というプラグインがあり、firebug に統合されています。これを使用すると、Web サイトのこれらの側面のパフォーマンスを簡単にチェックできます。
これは、yslow を使用して私のウェブサイト Xifengfang を評価した結果です。残念ながら、51 ポイントしか獲得できませんでした。ふふ。主要な中国のウェブサイトのスコアは高くありません。テストを受けたところ、Sina と NetEase は両方とも 31 でした。 yahoo (アメリカ) のスコアは実に 97 点です!これは、この点におけるヤフーの努力を示しています。彼らがまとめた14のルールと新たに追加された20のポイントから判断すると、実際には私たちがまったく考えていない詳細がたくさんあり、いくつかの実践は少し「倒錯的」ですらあります。
まず、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 (コンテンツ配信ネットワーク) の使用: コンテンツ配信ネットワークを使用する
正直に言うと、CDN についてはあまり詳しくありません。簡単に言うと、既存のインターネットに新しいネットワーク アーキテクチャの層を追加することで、Web サイトのコンテンツがユーザーに最も近いキャッシュ サーバーに公開されます。 DNS 負荷分散テクノロジーは、必要なコンテンツを取得するために近くのキャッシュ サーバーにアクセスするユーザーのソースを決定します。杭州のユーザーは杭州近くのサーバー上のコンテンツにアクセスし、北京のユーザーは北京近くのサーバー上のコンテンツにアクセスします。これにより、ネットワーク上のデータ送信時間が効果的に短縮され、速度が向上します。さらに詳しい情報については、Baidu百科事典のCDNの説明を参照してください。 Yahoo! は静的コンテンツを CDN に配信し、ユーザーへの影響時間を 20% 以上削減します。
CDN テクノロジー図:
CDN ネットワーク図:
記事 3、Expire/Cache-Control ヘッダーの追加: Expires ヘッダーの追加
現在、ページにはますます多くの画像、スクリプト、CSS、フラッシュが埋め込まれており、それらにアクセスすると、必然的に多くの http リクエストが行われます。実際、Expires ヘッダーを設定することで、これらのファイルをキャッシュできます。 Expire は実際には、ヘッダー メッセージを通じてブラウザー内の特定の種類のファイルのキャッシュ時間を指定します。 Flash 内のほとんどの画像は、キャッシュ後は頻繁に変更する必要がなく、今後、ブラウザはこれらのファイルをサーバーからダウンロードする必要がなくなり、キャッシュから直接読み取るようになります。これにより、アクセスが高速化されます。ページが再び大幅に高速化されます。 HTTP 1.1 プロトコルによって返される一般的なヘッダー情報:
HTTP/1.1 200 OK
日付: Fri, 30 Oct 1998 13:19:41 GMT
サーバー: Apache/1.3。 3 (Unix)
キャッシュ制御: max-age=3600、must-revalidate
有効期限: Fri, 30 Oct 1998 14:19:41 GMT
Last-Modified: Mon, 29 Jun 1998 02: 28:12 GMT
ETag: “3e86-410-3596fbbc”
Content-Length: 1040
Content-Type: text/html
これは、サーバー側スクリプトを通じてキャッシュ制御と有効期限を設定することで実行できます。
たとえば、php で有効期限を 30 日後に設定します:
<code><span><span><font color="#005b5b"><!--pHeader(<span><span>"Cache-Control: must-revalidate"</span></span>); <span><strong><span>$</span></strong></span><span><span>offset</span></span> = <span><span>60</span></span> * <span><span>60</span></span> * <span><span>24</span></span> * <span><span>30</span></span>;</font><span><strong><span> <font color="#005b5b">$</font></span></strong></span><font color="#005b5b"><span><span>ExpStr</span></span> = <span><span>"Expires: "</span></span> . <span><span>gmdate</span></span>(<span><span>"D, d M Y H:i:s"</span></span>, <span><span>time</span></span>() + <span><strong><span>$</span></strong></span><span><span>offset</span></span>) . <span><span>" GMT"</span></span>; Header(<span><strong><span>$</span></strong></span><span><span>ExpStr</span></span>);--> </font></span></span></code>
これについてはよくわかりませんが、サーバー自体を設定することによっても行うことができます。さらに詳しく知りたい友人は、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 をページの上部に配置 （スタイルシートを上部に配置）
CSS をページの上部に配置するのはなぜでしょうか。 IE や Firefox などのブラウザでは、すべての CSS が送信されるまで何も表示されないためです。理由はマー兄弟が言ったように単純です。 css、正式名称はCascading Style Sheets（カスケード スタイル シート）です。カスケードとは、次の CSS が前の CSS をカバーし、上位レベルの CSS が下位レベルの CSS をカバーできることを意味します。 [CSS で!重要] この階層関係については、この記事の最後で簡単に説明しましたが、ここでは CSS をオーバーライドできることだけを知っておく必要があります。以前のものは上書きできるため、ブラウザが完全にロードされた後にそれをレンダリングするのは間違いなく合理的ですIE などの多くのブラウザでは、スタイル シートは次のようになります。 ページ の下部にある問題は、Web コンテンツの連続表示を禁止していることです。ブラウザーはページ要素の再描画を避けるために表示をブロックし、ユーザーには空白のページのみが表示されます。 Firefox は表示をブロックしませんが、スタイルシートのダウンロード時に一部のページ要素を再描画する必要がある可能性があり、ちらつきの問題が発生する可能性があります。したがって、CSS をできるだけ早くロードする必要があります
この意味に従って、さらに注意深く検討すると、実際には最適化できる領域があります。たとえば、このサイトに含まれる 2 つの CSS ファイル、<link rel="stylesheet" rev="スタイルシート ” href=”http://www.space007.com/themes/google/style/google.css” type= "text/css" media="screen" /> リンク rel="スタイルシート" rev="スタイルシート" href=" http:/ / www.space007.com/css/print.css” type=“text/css” media=”print” />。 メディアから、最初の CSS ファイルがブラウザー用で、2 番目の CSS ファイルが印刷スタイル用であることがわかります。ユーザーの行動習慣から判断すると、ページを印刷するというアクションは、ページが表示された後に発生するはずです。したがって、より良い方法は、ページが読み込まれた後に印刷デバイス用の CSS をこのページに動的に追加することです。これにより、速度が少し向上します。 (笑)
第6条 スクリプトをページの下部に配置（スクリプトを下部に配置）
このスクリプトをページの下部に配置する目的は 2 つあります。 1. スクリプトの実行によってファイルのダウンロードがブロックされるのを防ぐため。ページ。ページの読み込みプロセス中に、ブラウザが js 実行ステートメントを読み取ると、それをすべて解釈して、次のコンテンツを読み取ります。信じられない場合は、js の無限ループを作成して、ページの下にあるものが表示されるかどうかを確認してください。 (setTimeout と setInterval の実行はマルチスレッドに似ており、次のコンテンツのレンダリングは対応する応答時間の前に続行されます。) これを行うブラウザーのロジックは、js がいつでも location.href を実行するか、そうでなければ完全に実行する可能性があるためです。このページを中断する プロセスの機能、つまり、ロードする前に実行されるまで待機する必要があります。したがって、これをページの最後に配置すると、ページの視覚要素の読み込み時間を効果的に短縮できます。 2. スクリプトによって引き起こされる 2 番目の問題は、並列ダウンロードの数がブロックされることです。 HTTP/1.1仕様ブラウザによるホストごとの並列ダウンロード数は 2 (IE は 2 までしか設定できません。ff などの他のブラウザはデフォルトで 2 に設定されていますが、新しい IE8 は 6 に達することができます)。したがって、イメージ ファイルを複数のマシンに分散すると、2 を超える並列ダウンロードを実現できます。ただし、スクリプト ファイルのダウンロード中、ブラウザは他の並行ダウンロードを開始しません。
もちろん、Web サイトごとに、ページの下部にスクリプトを読み込む実現可能性は依然として疑問です。アリババの中国語ウェブサイトのページと同じです。多くの場所にインライン JS があり、ページの表示はこれに大きく依存しています。これが非侵入型スクリプトの概念からはほど遠いことは認めますが、多くの「歴史的問題」はそう簡単には解決できません。
第7条 CSSではの使用を避ける > 式 （CSS 式は避ける）
しかし、これにより無意味なネストがさらに 2 層追加され、明らかに良くありません。より良い方法が必要です。
第8条 javascriptとcssの両方を外部ファイルに入れる （JavaScriptとCSSを外部化）
これはわかりやすいと思います。これは、パフォーマンスの最適化の観点だけでなく、コードのメンテナンスの容易さの観点からも行われます。ページコンテンツに css と js を記述すると 2 つのリクエストを減らすことができますが、ページのサイズも大きくなります。 CSS と JS がキャッシュされている場合、余分な http リクエストは発生しません。もちろん、前に述べたように、一部の特別ページ開発者は引き続きインライン css および js ファイルを選択します。
第9条 DNS ルックアップの削減(DNS ルックアップの削減)
インターネットでは、ドメイン名と IP アドレスは 1 対 1 に対応しています。ドメイン名 (kuqin.com) は次のとおりです。覚えやすいですが、コンピュータが認識しないため、コンピュータ間の「認識」を IP アドレスに変換する必要があります。ネットワーク上の各コンピュータは、独立した IP アドレスに対応します。ドメイン名と IP アドレス間の変換はドメイン名解決と呼ばれ、DNS クエリとも呼ばれます。 DNS 解決プロセスには 20 ～ 120 ミリ秒かかります。DNS クエリが完了するまで、ブラウザはドメイン名の下に何もダウンロードしません。したがって、DNS クエリの時間を短縮すると、ページの読み込み速度が向上します。 Yahoo では、1 ページに含まれるドメイン名の数を 2 ～ 4 に制限することを推奨しています。これには、ページ全体を適切に計画する必要があります。現時点ではこの点でうまくいっておらず、多くの広告配信システムの足を引っ張られています。
第10条、JavaScript と CSS を縮小 (JavaScript を縮小)
js と css の圧縮の効果は明らかで、ページ上のバイト数が減少します。容量が小さいページは、当然ながら読み込みが速くなります。圧縮は、ボリュームを減らすだけでなく、ある程度の保護も提供します。私たちはこれをうまくやっています。一般的に使用される圧縮ツールには、JsMin、YUI 圧縮ツールなどが含まれます。さらに、http://dean.edwards.name/packer/ は、非常に便利なオンライン圧縮ツールも提供します。圧縮 js ファイルと非圧縮 js ファイルの容量の違いは、jQuery Web ページで確認できます:
もちろん、圧縮の欠点の 1 つは、コードの可読性が失われることです。フロントエンドの友人の多くはこの問題に遭遇したことがあると思います。Google を見ると素晴らしい効果が得られますが、ソース コードを見るとたくさんの文字が詰め込まれており、関数名さえも置き換えられています。このように独自のコードを保守するのは非常に不便ではないでしょうか?すべての Alibaba 中国 Web サイトで採用されている現在のアプローチは、リリース時にサーバー側で js と css を圧縮することです。これにより、独自のコードを保守するのが非常に便利になります。
第 11 条、リダイレクトの回避 (リダイレクトの回避)
少し前に ieblog で「Internet Explorer と接続制限」という記事を見ました。たとえば、http://www と入力したとき。 .webjx.com/ の場合、サーバーは http://www.webjx.com/ への 301 サーバー リダイレクトを自動的に生成します。ブラウザのアドレス バーを見るとそれを確認できます。この種のリダイレクトには当然時間がかかります。もちろん、これは単なる例にすぎません。リダイレクトにはさまざまな理由がありますが、リダイレクトが追加されるたびに Web リクエストが増加するため、可能な限り削減する必要があるという点は変わりません。
第 12 条、削除 重複スクリプトの削除 (重複スクリプトの削除)
これはパフォーマンスの観点からだけでなく、言わなくても知っています、コード仕様に関しても同様です。しかし、処理が非常に速いため、おそらく繰り返しのコードを追加することになることが多いことを認めなければなりません。おそらく、統合された css フレームワークと js フレームワークが問題をより良く解決できるでしょう。 Xiaozhu 氏の意見は正しいです。同じことを繰り返さないだけでなく、再利用できるようにする必要もあります。
第 13 条、エンティティ タグ (ETag) の構成 (ETag の構成) これも分かりません（笑）。 infoQ「ETags を使用して Web アプリケーションの帯域幅と負荷を削減する」で詳細な説明を見つけました。興味のある学生は確認してください。
第 14 条、AJAX キャッシュを有効にする (Ajax をキャッシュ可能にする) ajax はキャッシュする必要がありますか? Ajax リクエストを行う場合、キャッシュを避けるためにタイムスタンプが追加されることがよくあります。 「非同期」は「即時」を意味するものではないことに留意することが重要です。 AJAX メッセージが動的に生成され、1 人のユーザーのみに影響を与える場合でも、キャッシュに保存できることに注意してください。