HTML Web ページ制作チュートリアル: iframe タグの使用に注意_HTML/Xhtml_Web ページ制作

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

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

iframe ブロックオンロード

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

ウィンドウに含まれるすべての iframe とすべての iframe 内のリソースが完全にロードされるまで、ウィンドウの onload イベントはトリガーされません。 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 の Web サイトのうち 5 つが iframe を使用しています。それらのほとんどは広告を読み込むために使用されます。これはあまり適切ではありませんが、理解できるものであり、コンテンツに広告を挿入する簡単な方法です。多くの場合、iframe を使用するのが合理的です。ただし、これがページのパフォーマンスに与える影響に注意してください。必要な場合を除き、慎重に使用してください。