Web サイトのパフォーマンスを向上させるための 14 の PHP プログラミングの詳細

Web サイトのパフォーマンスを向上させるための 14 の PHP プログラミングの詳細_PHP チュートリアル

WBOY

リリース： 2016-07-21 14:56:07

オリジナル

832 人が閲覧しました

Bangkejia (www.Bkjia.com) チュートリアルインターネットは人々の生活にますます不可欠な部分になっていると思います。 ajaxやflexなどのリッチクライアントアプリケーションは、C/Sでしか実現できない機能を数多く体験することで、人々をより「幸せ」にさせます。たとえば、Google は最も基本的なオフィスアプリケーションをすべてインターネットに移行しました。もちろん、便利ではありますが、ページの表示がどんどん遅くなるのは間違いありません。私はフロントエンドの開発を行っていますが、Yahooの調査によるとバックエンドは5%しかなく、フロントエンドは95%も占めており、そのうち88%は最適化できるそうです。

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

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

1. HTTPリクエストの数をできるだけ減らす
【内容】

2. CDN (コンテンツ配信ネットワーク) を使用する
[サーバー]

3. Expires ヘッダー (またはキャッシュ制御) を追加します
[サーバー]

4. Gzip コンポーネント
[サーバー]

5. CSS スタイルをページの上部に配置します
[css]

6. スクリプトを一番下に移動します (インラインスクリプトも含む)
[javascript]

7. CSS での式の使用を避ける
[css]

8. JavaScriptとCSSを外部ファイルに分離する
[javascript][css]

9. DNS クエリの削減
[内容]

10. JavaScript と CSS を縮小する (インラインを含む)
[javascript] [css]

11. リダイレクトを避ける
[サーバー]

12. 重複したスクリプトを削除する
[javascript]

13. エンティティタグ(ETag)の設定
[css]

14. AJAX キャッシュを有効にする

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

これは、yslow を使用して私の Web サイト 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 Encyclopedia の CDN の説明を参照してください。 Yahoo! は静的コンテンツを CDN に配信し、ユーザーの影響時間を 20% 以上短縮します。

合計 3 ページ:
前のページ
1
2
3
次のページ