IFRAMEを使用すると、他のWebサイトのページを簡単に呼び出すことができますが、注意して使用する必要があります。スタイルやスクリプトなど、他のDOM要素を作成するよりも、数十倍または数百倍のパフォーマンスが必要です。 100の異なる要素を追加する時間の比較は、パフォーマンスをiframeが消費する方法を示しています。
iframesを使用するページには通常、それほど多くのiframesがありませんので、Domsの作成についてあまり心配しないでください。懸念に値するのは、オンロードイベントと接続プールです。
iframeはオンロードをブロックしますウィンドウのオンロードイベントをできるだけ早く実行することが非常に重要です。これにより、ブラウザの読み込み進行指標が完了することができ、ユーザーはこれに基づいてページがロードされているかどうかを判断します。オンロードイベントの遅延により、ユーザーはページが遅いと感じます。
ウィンドウのオンロードイベントは、すべてのiframesが含まれ、すべてのiframesのリソースが完全にロードされるまで発生しません。 SafariとChromeでは、JavaScriptPTを使用してIframesに値を動的に割り当てると、このブロッキング動作を回避できます。
接続プール各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を使用することは合理的です。しかし、これがあなたのページに与えるパフォーマンスの影響に注意してください。必要でない限り、注意して使用してください。