Web制作のためのHTMLチュートリアル:iframeタグの使用は慎重に
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を使用することは理にかなっています。しかし、ページへのパフォーマンスへの影響に注意してください。必要でない場合は、注意して使用してください。
関連
-
HambergurMenu (ハンバーガースタイルのメニュー)のHTML+Sass実装
-
n個のコンテナ要素で無限スクロールを実現するコード
-
HTMLでスクリーンショットを撮影し、ローカル画像として保存するための実装コード
-
divの幅をwidth:100に設定し、親要素を超えるpaddingまたはmarginを設定する場合の解決法
-
スクロールバーを非表示にするHTMLメソッドとスクロールバーを削除するHTMLメソッド
-
オブジェクトのアニメーションに隠れることなく、オブジェクトの上にdivを表示する方法
-
ハイパーリンク付きの美しいチェックボックスを多くのコードなしでシンプルにカスタマイズ
-
画像をラベルとして使用する場合、IEでは属性が機能しない。
-
Webのフロントエンドでよくある攻撃とその防止方法
-
IEにおけるDOCTYPEの役割
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン