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

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

雑談はここまでにして、インターネット上で見つかる高性能な 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 を記録し、サイトの負荷が軽減されます。

<<:  入力と画像を揃えるためにvertical-alignを使用します

>>:  MySQLトリガーの使用

推薦する

幅と高さが可変の要素を中央に配置するための CSS ソリューション

1. 水平中央公開コード: html: <div class="parent&quo...

React 星評価コンポーネントの実装

要件は、製品の評価データを渡すことであり、ページには対応する星の数が表示されます。 1. 異なる評価...

Windows DNS サーバーに「ワームレベル」の脆弱性が露呈、17 年間存在

脆弱性の紹介SigRed の脆弱性はワーム化可能であるため非常に危険です。つまり、ユーザーの介入なし...

古典的なJavaScriptの再帰ケースの質問の詳細な分析

目次再帰とは何ですか?また、どのように機能しますか? 1. 合計(1)デジタル加算(2)配列の和2....

Vueウォッチの監視方法の概要

目次1. Vueにおけるwatchの役割はその名の通り、監視の役割です。 2. このオブジェクトのプ...

CSSでカスタムフォント(font-face)を導入する方法の詳細な説明

なぜこれを使ったのか?それはポスターを作ることから始まりました。それは嵐の夜でした。 。 。さて、無...

Linuxは、単一のIPをバインドするためにデュアルネットワークカードを実装するためにボンドを使用します。サンプルコード

ネットワークの高可用性を実現するには、複数のネットワーク カードを仮想ネットワーク カードにバインド...

Vue のプラグインとコンポーネントの違いと使い方のまとめ

このチュートリアルの動作環境: Windows 7 システム、vue 2.9.6 バージョン、DEL...

MySQL 8.0.15 winx64 解凍版のインストールと設定方法のグラフィックチュートリアル

この記事では、MySQL 8.0.15 winx64解凍版のインストールと設定方法を紹介します。具体...

Zabbix を使用して Oracle データベースを監視する方法の詳細な説明

1. 概要Zabbix は非常に強力で、最も広く使用されているオープンソースの監視ソフトウェアです。...

MySQLの浅いエントリと深いエグジットの原則についての簡単な説明

目次1. ページの概要2. 下限と上限3. ページディレクトリを使用する4. ページの実際の外観4....

Linuxのpasswdコマンドの使用

1. コマンドの紹介passwd コマンドは、ユーザー パスワード、アカウント ロック、パスワードの...

Vue は QR コード スキャン機能を実装します (スタイル付き)

必要: vue を使用して QR コードのスキャンを実現します。プラグイン: QRコードリーダー;プ...

Vueアイコンセレクターのサンプルコード

出典: http://www.ruoyi.vip/ 'vue' から Vue をイン...

DockerプライベートイメージライブラリとAlibaba CloudオブジェクトストレージOSSの簡単な分析

Docker プライベートイメージライブラリDockerプライベートイメージライブラリとAlibab...