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中毒