ページリファクタリングスキル - コンテンツ

雑談はここまでにして、インターネット上で見つかる高性能な Yahoo ウェブサイトを構築するための数多くの黄金律に基づいて、私自身のルールについてお話ししたいと思います。
コードは、コンテンツ、サーバー、Cookie、CSS、Javascript、画像、モバイル アプリケーションなど、7 つのカテゴリと 34 の記事に分かれています。

1. HTTP リクエストを減らすようにしてください<br />ユーザーがページを読み込むとき、時間の 80% は、画像、スタイル、スクリプト、FLash など、ページ内のさまざまなアイテムのダウンロードに費やされます。したがって、HTTP リクエストを減らすと応答速度が向上します。たとえば、Baidu、Google にはただ 1 行だけあります...
ファイルのマージや CSS スプライトなど、誰もが知っているように、私が言いたいのは、リクエストを減らすことだけではなく、それを行った後に他の要素に与える影響を考慮することが重要だということです。
マージされたファイル: 結合が大きく、機能モジュールを一目で区別できません。
CSS スプライト: 多数の統合画像を維持する難しさは飛躍的に増大します。
なお、超大容量の統合画像がダウンロードされるまでは、どこで使用しても表示されません。

2. DNS ルックアップの回数を減らす<br />各独立したドメイン名には、対応する IP アドレスがあります。つまり、www.baidu.com を入力すると、サーバーは「baidu」を探していることを認識せず、対応する IP アドレスに解決してからアクセスします。電話帳を検索するときと同じように、ブラウザは解析プロセスを待機するだけです。解析プロセスには通常 20 ～ 120 ミリ秒かかります。
DNS ルックアップの数は、サブドメインを含め、CSS、JS、画像などをダウンロードするためにアクセスする異なるドメイン名の合計数です。プライマリドメインと異なる外部ドメインの場合は、さらに時間がかかります。
解決策: CSS を使用して、いくつかの画像スタイルと JS アニメーション (CSS3 の NB 部分) を解決します。
ポータブルな外部ドメイン リソースをサブドメインの下に配置します。

3. リダイレクトを避ける<br />リダイレクトは、次の HTTP リクエスト ヘッダーのように、301 および 302 コードを使用して実装されます。
HTTP/1.1 301 永久に移動
場所: http://example.com/newuri
コンテンツタイプ: text/html
ブラウザは、Location で指定された URL にユーザーを誘導します。キャッシュが必要な場合は、Expires または Cache-Control を指定する必要があります。
JS ではジャンプを実現できますが、戻るボタンが正常に機能することを保証するには、3XX ステータス コードを使用する必要があります。
この部分は純粋なフロントエンドとはあまり関係がないか、あまり関係がないように思われますが、真の NB フロントエンドに成長するためには、遅かれ早かれこれらを習得する必要があります。

4. キャッシュ可能なAJAX
キャッシュがユーザーにとって重要であることは誰もが知っているので、キャッシュ機能は ajax に不可欠です。
しかし、私が言いたいのは、ニーズに基づいてキャッシュするかどうかを決定する必要があるということです。
IE は自動的にキャッシュを追加しますが、Chrome は追加しません。
キャッシュをクリアする一般的な方法は次のとおりです。
サーバー側では、header("Cache-Control: no-cache, must-revalidate");
Ajax リクエストを送信する前に xmlhttpObj.setRequestHeader("If-Modified-Since","0"); を追加します。
Ajax リクエストを送信する前に xmlhttpObj.setRequestHeader("Cache-Control","no-cache"); を追加します。
ajax URL パラメータの後に ?t="Math.random()" を追加します。

5. コンテンツの読み込みを遅らせる
Web ページのパフォーマンスと動作は分離する必要があり、最初にパフォーマンス、次に動作となります。したがって、最優先事項はページをすばやく表示すること、次にいくつかの必要な機能的なインタラクション、そしてエクスペリエンスを向上させるためのアニメーションや派手な効果です。

6. プリロード
プリロードの目的は、非同期またはブラウザのアイドル時間を利用して、これから使用するコンテンツを読み込み、ユーザーの操作にすばやく応答することです。
例えば：
Web ゲームでは、次のシーンに必要な画像はアイドル時間中に読み込まれます。
ページ内の JS は、img オブジェクトを使用して JS をプリロードし、必要に応じて実行します。

7. DOM要素の数を減らす
ページが複雑になると、ダウンロードするデータが多くなり、DOM の JavaScript トラバーサルも遅くなります。
解決策: 各タグのセマンティクスを深く理解し、レイアウト用にリストされている多数の DIV を減らします。

8. ドメイン名ごとにページコンテンツを分割する
ページが読み込まれると、CSS、JS、IMG などの多くの外部リソースがダウンロードされます。ただし、それらを異なるサブドメインに分類して分散すると、DNS 並列ダウンロードの効率が向上します。
ブラウザで許可される最大接続数と各サーバーで許可される最大接続数が制限されているためです。

9. 404を避ける
HTTP のオーバーヘッドは非常に大きいため、404 応答を要求するために HTTP を使用することはまったく不要です。
例外はサイトの SEO にも良くありません。一部の Web サイトでは rabots.txt に制限がない場合でも、空のファイルをアップロードする必要があります。そうしないと、エンジン クローラーがサイトに 404 を記録し、サイトの負荷が軽減されます。