Iframe の使用を減らすべきいくつかの理由の分析

Iframe の使用を減らすべきいくつかの理由の分析
次のグラフは、100 個の異なる要素で iframe を作成するのにどれくらいの時間がかかるかを示しています。

100個の要素を作成する時間

iframe を使用するページには、通常、あまり多くの iframe が含まれていないため、DOM ノードの作成に費やされる時間は大きな割合を占めることはありません。しかし、オンロード イベントと接続プールなど、他のいくつかの問題が発生します。

Iframe はページの読み込みをブロックします

ウィンドウの onload イベントを適切なタイミングでトリガーすることが非常に重要です。 onload イベントはブラウザの「ビジー」インジケーターを停止させ、現在の Web ページが読み込まれたことをユーザーに伝えます。 onload イベントが遅延すると、Web ページが非常に遅いという印象をユーザーに与えます。

すべての iframe (内部の要素を含む) が読み込まれた後に、window の onload イベントをトリガーする必要があります。 Safari と Chrome では、JavaScript を介して iframe の SRC を動的に設定することで、このブロックを回避できます。

接続プールのみ

ブラウザは、Web サーバーへの接続を少数しか開くことができません。 Internet Explorer 6 および 7、Firefox 2 などの古いブラウザでは、一度に 1 つのホスト名に対して 2 つの接続しか開くことができません。この制限はブラウザの新しいバージョンでは増加されています。 Safari 3+ および Opera 9+ では、ドメインへの接続を 4 つ同時に開くことができます。Chrome 1+、IE 8、Firefox 3 では、ドメインへの接続を 6 つ同時に開くことができます。詳細なデータ テーブルについては、この記事「並列接続のまとめ」をご覧ください。

iframe には独自の接続プールがあると思われるかもしれませんが、そうではありません。ほとんどのブラウザでは、メイン ページとその中の iframe がこれらの接続を共有します。つまり、iframe はリソースを読み込むときに利用可能なすべての接続を使い果たし、メイン ページのリソースの読み込みがブロックされる可能性があります。もちろん、iframe 内のコンテンツがメイン ページのコンテンツよりも重要な場合は、これで問題ありません。しかし、通常、iframe 内のコンテンツはメイン ページのコンテンツほど重要ではありません。この時点で、iframe 内の利用可能な接続をすべて使い切る価値はありません。 1 つの解決策は、メイン ページの重要な要素が読み込まれた後に、iframe の SRC を動的に設定することです。

米国のトップ 10 の Web サイトはすべて iframe を使用しています。ほとんどの場合、広告を読み込むために使用されます。これは理解しやすく論理的な解決策であり、広告サービスを読み込む簡単な方法です。ただし、iframe はページのパフォーマンスに悪影響を与えることに注意してください。可能な限り、iframe の使用は避けてください。必要な場合は注意して使用してください。

出典:英語原文中国語訳: IT中毒   

<<:  Nginx プロセス スケジューリングの問題の詳細な説明

>>:  CSS 変数に基づくテーマ切り替えに最適なソリューション (推奨)

推薦する

MySQLは外部SQLスクリプトファイルのコマンドを実行します

目次1. SQLコマンドを含むSQLスクリプトファイルを作成する2. SQLスクリプトファイルを実行...

Vue3 の ref と toRef の違いを簡単に分析します

1. refがコピーされ、ビューが更新されますrefを使用してオブジェクトのプロパティ値をレスポンシ...

MySQL のメモリ使用量と CPU 使用率が高い場合のテストと解決策

変更後: innodb_buffer_pool_size=576M ->256M InnoDB...

WeChat アプレットカスタムタブバーステップ記録

目次1. はじめに2. タブバーのスタイルをカスタマイズする3. カスタムタブバーと関連設定を導入す...

MySQL における 10 進数型の使用法の簡単な紹介

MySQL でサポートされている浮動小数点型は、 FLOAT 、 DOUBLE 、およびDECIMA...

React双方向データバインディングの原理についての簡単な説明

目次双方向データバインディングとは双方向データバインディングの実装データ影響ビュービューはデータに影...

Nuxt.jsプロジェクトのDockerデプロイメントの実装

Docker 公式ドキュメント: https://docs.docker.com/ Docker は...

HTML埋め込みタグの使用方法と属性の詳細な説明

1. 基本的な文法コードをコピーコードは次のとおりです。埋め込み src=url注: 埋め込みはさま...

a タグにはテキストと画像があります。テキストを非表示にして画像のみを表示するにはどうすればよいでしょうか?

多くの場合、画像を表示する<a>タグのスタイルに遭遇しますが、タグ内にテキストがあり、そ...

HTMLフォームアプリケーションにはチェックボックスとラジオボタンの使用が含まれます

チェックボックスやラジオボタンの使用を含むコードをコピーコードは次のとおりです。 <!DOCT...

Reactで例外を適切にキャプチャする方法

目次序文エラー境界エラー境界を超えてトライ/キャッチwindow.onerror、エラーイベント未処...

MySQL における int の最大値の詳細な説明

導入2日前に見た問題について詳細に書きます。バイトコンピューターがバイナリに基づいていることは誰もが...

JavaScript オブジェクトからプリミティブ値への変換の詳細な説明

目次オブジェクトプロトタイプの値()オブジェクトプロトタイプtoString()シンボル.toPri...

ネイティブ js カスタム右クリック メニュー

この記事の例では、参考のためにjsカスタム右クリックメニューの具体的なコードを共有しています。具体的...