iframe の特徴

一.iframe はオーバーヘッドが最も高い DOM 要素

iframe の作成のオーバーヘッド（時間消費）は、他のタイプの DOM 要素の作成より 1〜2 桁高いです（10 倍〜100 倍遅い）

二.iframe は onload イベントをブロックする

onload イベントがトリガーされると、ブラウザはビジーインジケーター（アイコン、ステータスバー、カーソル、プログレスバー）を停止し、ユーザーにページが準備完了したことをフィードバックします。onload が迅速にトリガーされれば、ユーザーはページ読み込みが速いと感じます

iframe は親ページの onload イベントをブロックします。例えば：

• iframe がリクエストしたページが 10 秒後に返される

• iframe がリクエストしたページ中の 1 枚の画像が 10 秒後にレスポンスコンテンツを返す

• iframe がリクエストしたページに外部スクリプトが含まれ、10 秒後にロード完了する

• iframe がリクエストしたページに含まれるスタイルシートが 10 秒後にロード完了する

上記のいずれかの状況でも、iframe が所在するページの onload が 10 秒遅延します

js で動的に iframe の src を設定することで、この問題を回避できます。例えば：

<!-- <iframe id="myIframe" src="b.html" frameborder="2" width="400" height="300"></iframe> -->
<iframe id="myIframe" frameborder="2" width="400" height="300"></iframe>

<script>
var url = 'b.html';
window.frames['myIframe'].src = url;
// 在更老的浏览器中，IE6、7 之类的
// 需要把设置 src 放在 onload 事件之后，如下：
// window.onload = function() {
//     var url = 'b.html';
//     window.frames['myIframe'].src = url;
// }
</script>

このようにすれば iframe は onload イベントを遅延させません。ページに埋め込まれた iframe広告 に対してこの方式を採用すると、応答速度を明らかに向上できます

P.S. 埋め込み広告に対しては、iframe よりも div を使用することを推奨します。div の id はスクリプトの url に含めることができ、広告の js は div の innerHTML 属性を設定して広告をページに挿入します

三.iframe は親ページと接続プールを共有

ブラウザは並列ダウンロードをサポートしますが、接続数制限があります。IE6 と 7 は同時に 2 つの接続のみを開くことをサポート

iframe は親ページと接続プールを共有し、iframe を使用しても接続数の制限を突破できません

さらに、ブラウザの複数のタブ間も接続プールを共有します。つまり、ユーザーが同時に同一ホスト名下の複数のページ（複数のタブで）を開くと、接続リクエストの争奪を引き起こし、読み込み速度がより遅くなります。そのため、[クロスドメイン分離コンポーネント](/articles/フロントエンド最適化：ヤフー 35 条/#r20) の最適化原則が現れました

参考資料

• 《高性能 Web サイト構築ガイド》