HTML Webページ作成チュートリアル iframeタグを慎重に使用してください

iframe を使用すると、他の Web サイトのページを簡単に呼び出すことができますが、注意して使用する必要があります。他の DOM 要素 (スタイルやスクリプトを含む) を作成する場合よりも、パフォーマンスが数十倍、場合によっては数百倍も高くなります。 100 個の異なる要素を追加するのにかかる時間を比較すると、iframe がいかにパフォーマンスを集中的に消費するかがわかります。

iframe を使用するページには、通常、それほど多くの iframe がないため、DOM の作成にかかる時間をそれほど気にする必要はありません。さらに懸念されるのは、onload イベントと接続プールです。

iframe ブロック onload

ウィンドウの onload イベントができるだけ早く実行されることが非常に重要です。これにより、ブラウザの読み込み進行状況インジケーターが完了し、ユーザーはこれを使用してページが読み込まれたかどうかを判断します。 onload イベントが遅延すると、ユーザーはページが遅いと感じるでしょう。

ウィンドウの onload イベントは、ウィンドウに含まれるすべての iframe と iframe 内のすべてのリソースが完全に読み込まれるまでトリガーされません。 Safari と Chrome では、JavaScript を使用して iframe の src 値を動的に割り当てることで、このブロック動作を回避できます。

接続プール

ブラウザは各 Web サーバーに対してごく少数の接続のみを開きます。 IE 6/7 や Firefox 2 などの古いブラウザでは、ホストごとに接続が 2 つしかありません。新しいブラウザでは、接続数が急増します。 Safari 3+ および Opera 9+ は 4 に増加し、Chrome 1+、IE 8、Firefox 3 は 6 に増加しました。

iframe ごとに個別の接続プールがあると思われるかもしれませんが、そうではありません。ほとんどのブラウザでは、接続はメイン ページとその iframe 間で共有されます。つまり、iframe 内のリソースが利用可能な接続を占有し、メイン ページのリソースの読み込みをブロックする可能性があります。 iframe 内のコンテンツがメイン ページと同等かそれ以上に重要な場合は、これで問題ありません。ただし、一般的に、iframe 内のコンテンツはページにとってそれほど重要ではないため、iframe が接続番号を占有することはお勧めできません。 1 つの解決策は、優先度の高いリソースのダウンロードが完了した後に、iframe の src 値を動的に割り当てることです。

米国のトップ 10 ウェブサイトのうち 5 つは iframe を使用しています。主に広告を読み込むために使用されます。これはあまり適切ではありませんが、理解できるものであり、コンテンツに広告を挿入する簡単な方法です。多くの場合、iframe を使用することは理にかなっています。ただし、これがページのパフォーマンスに及ぼす影響に注意してください。必要でない限りは注意してご使用ください。