Yahoo 14 のパフォーマンス最適化原則_html/css_WEB-ITnose-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

Yahoo 14 のパフォーマンス最適化原則_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 pm 12:33 PM

ウェブサイトのパフォーマンスを最適化し、ウェブサイトのアクセス速度を改善するための 14 のヒント

「Yahoo 14 のヒント」とも呼ばれる、1 年前、大学のフロントエンド面接のために愚かにも大学街に行った無知な自分のことを思い出します。当時、冬休みと夏休みに見ようと思って、始める前にビデオを 2 セット作りました。まあ、これは絶対的な位置です、まあ、これはフローティングクリアです...

当時私は私の叔父がその人を知りませんでした。彼は全身黒人でした。 Tシャツ、黒い肌、黒い帽子、そして少し黒い無精ひげを生やした彼は、テストの問題を終えた後、躊躇しながら彼と話しましたが、最初の質問はそれがまったく不可能であることがわかりました。「ヤフー14ルール」？それで、聞いたこともなかったので混乱しましたが、家に帰ってからQQスペースにログを投稿しましたが、当時はそれについてあまり知りませんでした。今日は一日中、みんなと共有するために投稿しました:

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

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

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

1. HTTP リクエストの数をできる限り減らす [コンテンツ]

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

3. Expires ヘッダーを追加します。または Cache-control ) [server]

4. Gzip コンポーネント [server]

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

6. スクリプトを下部に移動します (インラインを含む)

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

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

9. DNS クエリを削減する [content]

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

11. リダイレクトを回避する [server]

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

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

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

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

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

http リクエストは高価であり、リクエストの数を減らす方法を見つけることで、自然に HTTP リクエストの速度を上げることができます。ウェブページ。一般的に使用される方法には、css、js のマージ (ページ内の css ファイルと js ファイルをそれぞれマージする)、イメージマップ、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% 以上短縮します。

CDN 技術図:

CDN ネットワーク図:

記事 3: Expire/Cache-Control ヘッダーの追加: Expires ヘッダーの追加

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

HTTP/1.1 200 OK

Date: Fri, 30 Oct 1998 13:19:41 GMT

Server: Apache/1.3.3 (Unix)

Cache-Control : max -age=3600、要再検証

有効期限: 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 日後に設定します:

以下は引用された内容です: