web-dev-qa-db-ja.com

なぜ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は単純にGET ajax requsetを使用して応答全体を取得し、それを（JavaScriptを使用して）解析し、<body>タグのコンテンツを取得してmain-content.innerHTMLに配置します。

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

質問：

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

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

javascripthtmlcssajaxiframe
28
palig

あなたはほとんど正しい軌道に乗っています。 iframeは、ブラウザーに追加のオーバーヘッド（レンダリング、インスタンスとその参照の維持）があるため、遅くなります。

Ajax呼び出しは、データを取得してから注入するか、必要なことを何でも実行するため、少し高速になります。 iframeは、ブラウザのメモリに完全に新しい「ページ」を作成し、それをページに配置する必要があります。

27
Dave Morgan

Steve Soudersが彼のHigh Performance Web Sitesブログに投稿 Using Iframes Sparingly を投稿しています。

16
Simon Lieschke

ブラウザーは2009年以降改善されていますが、ブラウザーが追加のサーバーにヒットする必要がある（iframeがサードパーティのコンテンツ用であると想定）、またはローカルサーバーに再度ヒットする（iframeがローカルコンテンツ用であると想定する）という事実は、依然として影響を及ぼします。ページのパフォーマンス。一般に、追加のHTTPリクエストは常にページのパフォーマンスに影響を与えます。ページが読み込まれた後にiframeを構築し、iframeのコンテンツをレンダリングすることが可能であれば、これにより初期ページの読み込みが改善されます。ただし、iframeが追加のコンテンツを読み込む間、これはページのパフォーマンスに影響を与えると思います。

0
Webreality