2009-07-07 85 views
20

私はちょっとあなたにはもう少し質問がありますが、希望の答えはとてもシンプルになります:)なぜiframeが遅いのですか?

私はリンクとiframeを持つ非常に単純なページを持っているとしましょう。

<body> 
    <a href="test.html" target="mframe">open link></a> 
    <iframe name="mframe" [params] /> 
</body> 

リンクをクリックすると、フレームにtest.htmlが読み込まれます。

divとajaxの呼び出しでiframeを変更します。

<body> 
    <a href="doAjaxCall('test.html')">open link</a> 
    <div id="main-content"></div> 
</body> 

doAjaxCallは単に、全体の応答を取得する(JavaScriptを使用して)それを解析し、<体>タグのコンテンツを取得し、メインcontent.innerHTMLにそれを置くためにGET AJAX requsetを使用します。

test.htmlにはhtmlが多く含まれていますが、CSSスタイルもあります(ただし、親ページと同じですので、ajaxソリューションを使用しているときは必要ありません)。

質問:

なぜこのAJAXソリューションがSO速いのですか?私はまだ同じ量のデータをダウンロードしています(test.html全体をダウンロードしています)。

なぜiframeソリューションが遅いのですか?それはブラウザのためにすべての可能なスタイルを再度解析する必要がありますか?または、iframeの他のオーバーヘッドはありますか?

+0

複数のブラウザで同じ動作が見られますか? – ChristianLinnell

+0

実際、私の例はとてもシンプルでした。 :) 実際、私はiframeを使用している大きなサイトにこのソリューションを試していました。私はそれらを削除し、そのajaxソリューションで置き換えます。私が書いたように、私はリンクをajax呼び出しに置き換えただけですが、トラフィックはまだ同じです。 そして、はい、それはすべてのブラウザ(IE/FF/CH/SAF)に間違いなく速いです。私は今見ることができます 唯一の理由は、そのブラウザが再び再びやスタイルを読み込むだけで「メイン・コンテンツ」のdivのinnerHTMLプロパティを交換する必要はありませんです。 ありがとう! Pavol。 – palig

+0

あなたのスタイルシートがlinkタグ経由で呼び出される専用のCSSファイルにある場合、ブラウザはキャッシングを利用して一度だけロードする必要があります。 btw私はあなたのiframeがどれほど遅くなっているか興味があります - 私たちはミリ秒を話していますよね? – Christophe

答えて

22

あなたは正しい軌道に乗っています。 iframeは、ブラウザのオーバーヘッドが増え(レンダリングされ、インスタンスが保持され、参照が維持されるため)、遅くなります。

AJAX呼び出しは、あなたがデータを取得し、あなたがそれを注入、またはあなたがそれをやりたいので、少し速くなるだろう。 iframeはブラウザのメモリにまったく新しい "ページ"を構築し、それをページに配置する必要があります。

+1

うわー、超音波高速応答のためのありがとう:)恋を!他の回答や意見があれば私は待っています。 6年後の – palig

+4

、これはまだ正確な評価ですか? – donohoe

+1

@donohoeはい、それはまだ7年後でも同じ状況です – kuzzmi

14

スティーブ・ソーダーズは、いくつかのより多くの洞察を提供することができる彼のハイパフォーマンスWebサイトのブログに記事Using Iframes Sparinglyを持っています。

+0

私は上記の1つを「回答」としてマークしましたが、これも非常に役に立ちます!ありがとう。 – palig

0

ブラウザは2009年以降に改善されていますが、ブラウザが追加のサーバーを攻撃する必要があります(iframeが第三者のコンテンツ用であると仮定して)、またはローカルサーバーを再度攻撃する必要がありますこれは依然としてページのパフォーマンスに影響します。一般に、追加のHTTP要求は常にページのパフォーマンスに影響します。ページが読み込まれた後にiframeを構築し、iframeのコンテンツをレンダリングするよりも、最初のページの読み込みを改善できます。しかし、これはiframeが追加のコンテンツを読み込んでいる間にこれがページのパフォーマンスに影響すると思います。

関連する問題