1. ホーム
  2. Web制作
  3. HTML/Xhtml

Web制作のためのHTMLチュートリアル:iframeタグの使用は慎重に

2022-02-04 06:28:21

iframeを使用すると、他のサイトのページを簡単に呼び出すことができますが、その使用には注意が必要です。他のDOM要素(styleやscriptを含む)を作成するのに比べて、数十倍から数百倍のパフォーマンスが犠牲になります。100種類の要素を追加するのにかかる時間を比較すると、iframeがいかにパフォーマンス的に負荷が高いかが分かります。

iframeを使用するページは通常、iframeの数が少ないので、DOMの作成にかかる時間は気にする必要はありません。それよりも気になるのは、オンロード・イベントとコネクション・プーリングです。

フレームブロックのオンロード

ウィンドウの onload イベントは、できるだけ早く実行することが重要です。これにより、ブラウザのロードプログレスインジケーターが完了し、ユーザーはページのロードが完了したかどうかを判断することができます。一方、onload イベントの実行が遅れると、ページが遅く感じられることがあります。

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

コネクションプール

各ウェブサーバーに対して、ブラウザは非常に少ない数の接続しか開きません。IE 6/7やFirefox 2などの古いブラウザでは、1つのホストに対して2つのコネクションしかありませんでした。新しいブラウザでは、Safari 3+ と Opera 9+ では 4、Chrome 1+ 、IE 8、Firefox 3 では 6 と、接続数が増えています。

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

アメリカのトップ10サイトのうち5サイトがiframeを使用しており、そのほとんどが広告の読み込みに使用されています。これは適切ではありませんが、コンテンツに広告を挿入する簡単な方法であることは理解できます。多くの場合、iframeを使用することは理にかなっています。しかし、ページへのパフォーマンスへの影響に注意してください。必要でない場合は、注意して使用してください。