ホーム>Web デザインのチュートリアル>HTMLチュートリアル

Web ページの基本的なパフォーマンス最適化ルールに関する簡単な説明

著者：Eve Cole 更新時間：2025-03-12 06:32:01

ブラウザー Web ページのいくつかの最適化ルール

ページの最適化

静的リソース圧縮

構築ツール (webpack、gulp) を使用して、画像、スクリプト、スタイルなどの Web ページの静的リソースを適切に圧縮します。

CSS スプライト画像、base64 インライン画像

サイト上の小さなアイコンを 1 つの画像に結合し、CSS を使用して、対応するアイコンを適切に配置し、インライン画像を使用します。

上部にスタイル、下部にスクリプト

ページは段階的なレンダリング プロセスであり、スタイルを上部に固定すると、ページをより速くユーザーに表示できます。<script> タグを上部に固定すると、ページの背後にあるリソースのダウンロードがブロックされます。

外部リンクのcssとjsを使用する

複数のページがパブリック静的リソースを参照し、リソースを再利用することで追加の http リクエストが削減されます。

空の src を含む画像を避ける

不必要な http リクエストを避けてください。 

 <!-- 空の src を持つ画像でも http リクエストが開始されます --><img src= style="margin: 0px;padding:0px;outline: none; line-height: 25.2px; font-size: 14px; width: 660px; オーバーフロー: 非表示; フォントファミリー: tahoma、arial、Microsoft YaHei;"> 
 <!-- 実際の画像サイズは 600x300 で、HTML では 200x100 に拡大縮小されます --><img src=/static/images/a.png width=200 height=100 style="margin: 0px; padding: 0px;アウトライン: なし; 行の高さ: 25.2 ピクセル; フォントサイズ: 14 ピクセル;非表示; クリア: 両方; フォントファミリー: tahoma、arial、Microsoft YaHei;"> 
 <!DOCTYPE html><html lang=ja><head> <meta charset=UTF-8> <title>ドキュメント</title> <link ref=preload href=style.css as=style> <link ref=preload href =main.js as=script> <link ref=stylesheet href=style.css></head><body> <script src=main.js></script></body></html>
この例では、css ファイルと js ファイルがプリロードされており、後続のページ レンダリングで使用されるとすぐに呼び出されます。
 as のタイプを指定して、さまざまなタイプのリソースをロードできます。 
  1. スタイル
  2. スクリプト
  3. ビデオ
  4. オーディオ
  5. 画像
  6. フォント
  7. 書類
  8. ...
このメソッドでは、crossorigin 属性を設定することで、ドメイン間でリソースをプリロードすることもできます。 
 <link rel=preload href=fonts/cicle_fina-webfont.woff2 as=font type=font/woff2crossorigin=anonymous>
 CSS
セレクタ
セレクターの優先順位は高から低まで次のようになります。 
  1.  IDセレクター
  2. クラスセレクター
  3. タグセレクター
  4. 隣接セレクター
 h1 + p{ マージントップ: 15px;
 h1 要素の直後にある段落を選択します。 h1 要素と p 要素には共通の親要素があります。
子セレクター
 h1 > 強い {色:赤;}
子孫セレクター
 h1 em {色:赤;}
ワイルドカードセレクター
属性セレクター
 *[title] {color:red;}img[alt] {border: 5px ソリッドレッド;}
疑似クラスセレクター
セレクターの使用経験: 
  1. クラス セレクターを優先します。クラス セレクターは、多層ラベル セレクターを置き換えることができます。
  2.  ID セレクターは効率的ではありますが、ページ内で一意であるため、チームのコラボレーションやメンテナンスには適さないため注意して使用してください。
  3. セレクターの継承を合理的に使用してください。
  4.  CSS 式は避けてください。
セレクターのレベルを下げる
前のセレクターの優先順位に基づいて、複数レベルのセレクターのネストを避けるようにしてください (できれば 3 レベル以下)。 
 .container .text .logo{ color: red; }/*変更*/.container .text-logo{ color: red;
ページ スタイル ファイルを合理化し、未使用のスタイルを削除します
ブラウザは冗長なスタイル マッチングを実行するため、レンダリング時間に影響します。また、スタイル ファイルが大きすぎると読み込み速度にも影響します。
 CSS 継承を使用してコード サイズを削減する
CSS の継承可能なプロパティを使用して、親要素がスタイルを設定すると、子要素がスタイルを再度設定する必要がなくなります。
一般的な継承可能な属性には、color、font-size、font-family などが含まれます。継承できない属性には、position、display、float などがあります。
属性値が0の場合はユニットは付加されません。
 css属性値が0の場合、コード量を削減するためのユニットを追加できません。 
 .text{ 幅: 0px; 高さ: 0px; }/*に変更します/.text{ 幅: 0;
 JavaScript
イベント委任を使用する
イベント委任を使用して、イベントを複数の同様の DOM 要素にバインドします。 
 <ul id=container> <li class=list>1</li> <li class=list>2</li> <li class=list>3</li></ul> 
 // 無理な方法: クリックイベントを各要素にバインド $('#container .list').on('click', function() { var text = $(this).text(); console. log(text); });//イベント委任メソッド: イベント バブリング メカニズムを使用してイベントを親要素に委任します $('#container').on('click', '.list', function() { var text = $(this ）。文章（）;コンソール.ログ(テキスト);
なお、イベントデリゲーションを利用するとイベントをドキュメントに委譲することもできますが、これはイベントの誤判定を招きやすいという点と、スコープチェーンの検索効率が低いという点で無理があります。最も近い親要素が代理オブジェクトとして選択される必要があります。
イベント委任を使用すると、パフォーマンスが向上するだけでなく、動的に作成された DOM 要素にイベントをバインドする必要がなくなります。
 DOMコンテンツロード済み
すべての画像リソースがダウンロードされるまで待つのではなく、DOM 要素がロードされた (DOMContentLoaded) 後に DOM ツリーの処理を開始できます。 
 // ネイティブ javascript document.addEventListener(DOMContentLoaded, function(event) { console.log(DOM が完全にロードされ解析されました);}, false);// jquery$(document).ready(function() { console.log(ready) ! );});// $(document).ready()$(function() { console.log(ready!);}); の簡略版
プリロードと遅延ロード
プリロード
ブラウザのアイドル時間を利用して、画像、スタイル、スクリプトなど、将来使用される可能性のあるリソースをプリロードします。
無条件のプリロード
onload がトリガーされると、将来必要になるリソースがすぐに取得されます。
画像リソースはプリロードされています。 (画像のプリロードを実装する 3 つの方法)。
ユーザーの行動に基づいたプリロード
ユーザーの行動の可能な操作を判断し、将来必要になる可能性のあるリソースを事前に読み込みます。 
  1. ユーザーが検索入力ボックスに入力すると、検索結果ページで使用できるリソースがプリロードされます。
  2. ユーザーがタブを操作すると、そのうちの 1 つがデフォルトで表示され、他のオプションをクリックすると、マウスをホバリングすると、将来使用されるリソースが最初にロードされます。
遅延読み込み
ページの初期化に必要なコンテンツやコンポーネントを除いて、画像を切り取る JS ライブラリや表示範囲にない画像など、その他すべてのものを遅延ロードできます。
画像は遅延ロードされます。 (画像が表示領域内にあるかどうかを判断し、表示されている場合は実際のパスを画像に割り当てます)
グローバル検索を避ける
関数内で複数回使用される非ローカル変数は、ローカル変数として保存する必要があります。 
 function updateUI(){ var imgs = document.getElementsByTagName(img); for (var i=0, len=imgs.length; i < len; i++){ imgs[i].title = document.title + image + i; var msg = document.getElementById(msg); msg.innerHTML = 更新が完了しました。;}
 document グローバル変数は、上記の関数、特に for ループで何度も使用されます。したがって、ドキュメントのグローバル変数をローカル変数として保存し、それを使用する方が良い解決策となります。 
関数 updateUI(){ var doc = document; var imgs = doc.getElementsByTagName(img); for (var i=0, len=imgs.length; i < len; i++){ imgs[i].title = doc.title + 画像 + i; } var msg = doc.getElementById(msg) = 更新が完了しました。;}
注意すべき点の 1 つは、JavaScript コードでは、var を使用して宣言されていない変数はグローバル変数になり、不適切に使用するとパフォーマンスの問題が発生するということです。
不必要な属性クエリを回避する
オブジェクトはプロトタイプ チェーンでその名前のプロパティを検索する必要があるため、オブジェクトのプロパティにアクセスするよりも変数と配列を使用する方が効率的です。 
 //配列 var 値を使用 = [5, 10];var sum = 値[0] + 値[1];alert(sum);//オブジェクト var 値を使用 = { 最初: 5、二番目: 10 };var sum = value.first + value.second;alert(sum);
上記のコードでは、オブジェクトのプロパティを使用して計算します。プロパティを 1 回または 2 回検索してもパフォーマンス上の問題は発生しませんが、ループ内などで複数の検索が必要な場合は、パフォーマンスに影響します。
次のように、複数の属性を検索して単一の値を取得する場合: 
 var query = window.location.href.substring(window.location.href.indexOf(?));
不必要な属性の検索を減らし、window.location.href を変数としてキャッシュする必要があります。 
 var url = window.location.href;var query = url.substring(url.indexOf(?));
機能のスロットリング
検索ボックスがあると仮定し、onkeyup イベントを検索ボックスにバインドして、マウスを上げるたびにリクエストが送信されるようにします。スロットリング関数を使用すると、指定された入力時間内にユーザーによる複数の連続操作が 1 つのリクエストのみをトリガーするようにすることができます。 
 <入力タイプ=テキスト ID=入力値= /> 
 // バインドイベント document.getElementById('input').addEventListener('keyup', function() { throttle(search);}, false);// ロジック関数 function search() { console.log('search. . .');}// スロットル関数 function throttle(method, context) { clearTimeout(method.tId); method.tId = setTimeout(function() { method.call(context); }、300);}
スロットル機能の適用シナリオは検索ボックスに限定されません。たとえば、ページのスクロール時、拡大されたウィンドウのサイズ変更時など、パフォーマンスを向上させるためにスロットル機能を使用する必要があります。
ステートメントの数を最小限に抑える
ステートメントの数も、操作の実行速度に影響を与える要因です。
複数の変数宣言を 1 つの変数宣言に結合する
 // 複数の var 宣言を使用します var count = 5; var color = blue; var now = new Date(); // 改善後は var count = 5, color = blue 、値 = [1,2,3]、現在 = new Date();
改良されたバージョンでは、カンマで区切られた var 宣言を 1 つだけ使用します。変数が多数ある場合、var 宣言を 1 つだけ使用する方が、個々の var を個別に宣言するよりもはるかに高速です。
配列とオブジェクトリテラルの使用
ステートメントごとの割り当ての代わりに、配列リテラルとオブジェクト リテラルを使用します。 
 varvalues = new Array();values[0] = 123;values[1] = 456;values[2] = 789;//改善後は、varvalues = [123, 456, 789]; 
 var person = new Object();person.name = Jack;person.age = 28;person.sayName = function(){alert(this.name);};//改善後 var person = { name : Jack, age :28、sayName:function(){alert(this.name)};
文字列の最適化
文字列の連結
初期のブラウザでは、文字列をプラス記号で連結する方法が最適化されていませんでした。文字列は不変であるため、結果を保存するために中間文字列が使用されることになり、文字列の頻繁な作成と破棄が非効率の原因となります。 
 var text = Hello;text+= ;text+= ワールド!;
文字列を配列に追加し、配列の join メソッドを呼び出して文字列に変換します。これにより、加算演算子の使用が回避されます。 
 var arr = [], i = 0;arr[i++] = Hello;arr[i++] = ;arr[i++] = World!;var text = arr.join('');
最新のブラウザでは文字列と符号の連結が最適化されているため、ほとんどの場合、依然として加算演算子が第一選択となります。
リフローと再描画を削減
ブラウザのレンダリング プロセスでは、パフォーマンスを消費するプロセスであるリフローと再描画が関係します。スクリプト操作中にリフローと再描画を引き起こすアクションを減らすことに注意する必要があります。 
  1. リフロー: 要素の幾何学的プロパティが変更されたため、レンダリング ツリーを再構築する必要があります。レンダリング ツリーを変更するプロセスはリフローと呼ばれます。
  2. 再描画: 要素の幾何学的サイズは変更されていませんが、要素の CSS スタイル (背景色または色) は変更されています。
どの操作がリフローまたは再描画をトリガーしますか? 
  1. ウィンドウのサイズを変更する
  2. フォントを変更する
  3. スタイルシートの追加または削除
  4. ユーザーが <input/> ボックスにテキストを入力するなど、コンテンツの変更
  5. クラス属性を操作する
  6. DOM を操作するスクリプト (DOM 要素の追加、削除、または変更)
  7.  offsetWidth プロパティと offsetHeight プロパティを計算する
  8. style属性の値を設定します。
リフローと再描画を減らし、Web ページのパフォーマンスを向上させるにはどうすればよいでしょうか?
 1. DOM 要素のスクリプト操作
  1.  DOM 要素を display:none に設定します。設定プロセス中にリフローがトリガーされますが、後で自由に変更して、変更後に表示することができます。
  2. 要素を操作する前にメモリに要素のクローンを作成し、変更後に要素を再度置き換えます。
 2.要素のスタイルを変更する
  1.  1 つずつ変更するのではなく、バッチで変更するようにしてください。
  2. 事前にidとclassを設定してから、要素のclassNameを設定します。
 3. 要素にアニメーションを追加する場合、要素の CSS スタイルを Position:fixed または Position:absolute に設定すると、要素がドキュメント フローから離れた後にリフローが発生しなくなります。
 4. ウィンドウ サイズの調整、入力ボックスへの入力、ページのスクロールなどを行うときに、スロットリング機能 (前述) を使用します。
 HTTP
ブラウザキャッシュ
ブラウザーのキャッシュを適切に設定することは、Web ページを最適化する重要な手段の 1 つです。
有効期限とキャッシュ制御
Expires は HTTP1.0 に由来し、Cache-Control は HTTP1.1 に由来します。両方を同時に設定すると、Cache-Control が Expires をオーバーライドします。 
  1.  Expires では、秒数ではなく実際の有効期限を指定します。ただし、Expires には、サーバー時間が同期していない、または不正確であるなど、いくつかの問題があります。したがって、絶対時間ではなく、残りの秒数を使用して有効期限を表す方が適切です。
  2.  Cache-Control では、max-age 値を秒単位で設定し、キャッシュの有効期限を指定できます。例: キャッシュ制御: max-age=3600。
 ETag と最終更新日
ETag と Last-Modified はどちらも応答ヘッダーでサーバーから返されます。ETag の優先順位は Last-Modified よりも高く、サーバーは ETag の値を優先します。 
  1.  ETag はドキュメントに添付されるタグで、ドキュメントのシリアル番号やバージョン番号、ドキュメントの内容の検証などです。ドキュメントが変更されると、ETag 値も変更されます。 ETag に関連するのは If-None-Match です。ブラウザはリクエストを開始すると、If-None-Match フィールドに ETag 値を入れてサーバーに送信します。
  2.  Last-Modified は、ドキュメントがサーバー側で最後に変更された時刻です。 Last-Modified に関連するのは If-Modified-Since です。ブラウザはリクエストを開始すると、If-Modified-Since フィールドに Last-Modified の値を入れてサーバーに送信します。
強力なキャッシュとネゴシエートされたキャッシュ
キャッシュのタイプには、強力なキャッシュとネゴシエートされたキャッシュがあります。 2 つの違いは、強力なキャッシュはサーバーにリクエストを送信しませんが、ネゴシエートされたキャッシュは、一致が成功した場合はリクエストを送信し、一致が失敗した場合は 304 Not Modified を返します。 200; ブラウザは最初に強力なキャッシュを検証し、強力なキャッシュが見つからなかった場合は、ネゴシエーション キャッシュの検証を実行します。
ブラウザキャッシュの設定方法
  1.  Web サーバーの戻り応答に Expires と Cache-Control を追加します。
  2.  nginx または apache 構成ファイルで Expires と Cache-Control を構成します。
 HTTPリクエストを減らす理由
http リクエストを減らすための対策は、パフォーマンスの最適化において大きな部分を占めます。たとえば、CSS スプライト イメージを使用して複数のイメージ リクエストを置き換える、空の src イメージを回避する、インライン イメージを使用する、外部リンク CSS と JS を使用する、キャッシュなどです。
 URL の入力からページの読み込みが完了するまでのプロセスは次のとおりです。 
  1.  DNS解決
  2. TCP接続
  3. HTTPリクエストとレスポンス
  4. ブラウザがページをレンダリングする
  5. 近い接続
完全な http リクエストはこれらのプロセスを経る必要があり、時間とリソースが消費されるため、リクエストの数を減らす必要があります。
参考文献:
 「高パフォーマンス Web サイト構築の上級ガイド vs. 高パフォーマンス Web サイト構築」
 「Web サイトを高速化するためのベスト プラクティス」
以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。
関連記事