预加载的 iframe 池答案

【问题标题】：Pool of preloaded iframes预加载的 iframe 池
【发布时间】：2012-02-20 21:13:21
【问题描述】：

我的应用程序第一次加载一个真正的 HTML 页面（header、content、sidebar 和 footer） .然后每次点击链接都会通过 AJAX 加载并显示（只是加载新的内容）。

一些 ajax 加载 content 内容一个或多个 iframe。一些用户报告说，当他们单击某些页面（单击侧边栏 链接）时，页面加载时间过长。他们报告的这些页面是内部包含 4 或 5 个 iframe 的页面。应用程序发送如下内容：

<div>
    Content...
    <iframe style="display:none" src="URL1"></iframe>
    <iframe style="display:none" src="URL2"></iframe>
    <iframe style="display:none" src="URL3"></iframe>
    <iframe style="display:none" src="URL4"></iframe>
    More content...
</div>

iframe 最初会在用户请求时隐藏和显示（无法根据用户请求加载，因为这会使用户体验更加糟糕）。所以问题是如何让这些 iframe 在页面加载时加载得更快。

我考虑过创建一个 iframe 池，因此我将在第一个页面加载时加载 5 个 iframe（当我加载页眉、侧边栏和页脚时），然后按需重用这些 iframe，因此 AJAX 调用将返回像这样的一段代码：

<div>
    Content...
    <div class="iframe" style="display:none" src="URL1"></div>
    <div class="iframe" style="display:none" src="URL2"></div>
    <div class="iframe" style="display:none" src="URL3"></div>
    <div class="iframe" style="display:none" src="URL4"></div>
    More content...
</div>

success 回调将为每个 div.iframe 分配其对应的 iframe。

是否足以加快页面加载并改善用户体验？是否有任何 jquery 插件或代码已经这样做或类似？还有其他选择吗？

【问题讨论】：

我不知道我是否很好地理解了您的问题，但您是否要出于性能目的创建此预加载 iframe 池？如果是这样，那么我认为这无助于提高速度，因为您将不得不加载主页并创建这个额外的 iframe 池。
@Victor：我会在加载主页时预加载一些 iframe。之后，我再也不会加载主页（除非用户强制重新加载页面），只是使用 AJAX 加载页面的一部分。关键是这些 AJAX 加载的内容有时包含 iframe。如果是这样，我将（重新）使用池中的 iframe。
这些 iframe 指向哪里？这些 URL 的性能如何。创建 iframe 时会有一些“税”，但在大多数情况下，这通常与 iframe 本身的加载相比相形见绌。
这些 iframe 指向我自己的网站，而问题在 IE 中最为明显（惊喜！）。我没有任何可靠的性能测量，但是在 localhost 中（通过 AJAX）加载没有帧的 content 几乎无法察觉（100 或 200 毫秒？）并加载 content 5帧大约是2秒。
这些 iframe 有什么用？为什么要加载这么多？

标签： html iframe loading

【解决方案1】：

伊万，

您可以完全加载您的第一个页面，然后开始使用 AJAX 将 iframe 加载到某种缓存中（也许是 JSON 字符串？）。正如您所说 - 您可以在用户请求时加载缓存的内容。记得也要为禁用 javascript 的人提供服务。

如果您发现在需要时加载 iframe 的请求（未预加载），那么值得调查一下它们加载缓慢的原因。直接加载 iframe src 会发生什么？

为什么要使用这么多 iframe？如果它们都指向外部网站，这将大大减慢加载时间，因为在您的 AJAX 请求将内容拉入您的页面之前，每个页面都必须呈现。如果它们指向内部（本地）页面，那么也许看看不使用它们？

【讨论】：

我这样做了 :) 我加载我的第一页（content），然后加载 iframe，但将此任务留给浏览器。我相信使用 AJAX 加载它不会更快，你有这方面的经验吗？问题是在加载所有框架之前不会加载主页（iframe 是一种插件）。 iframe 是严格需要的（见 Christoph 评论）和内部的。无需担心禁用 javascript 的浏览器。
Ivan，主要是你如何加载 iframe 内容。这应该在页面上的所有其他内容加载后触发，以便 AJAX 在用户看到完全呈现的第一页后将 iframe 内容拉入缓存。您可以使用 AJAX 直接加载 iframe 内容，然后将其写入您使用 javascript/jQuery 创建的 iframe(s) 元素中。

【解决方案2】：

首先：只要您可以控制所有内容并且您没有严肃的理由这样做，就不应使用 iframe。它们增加了相当多的开销，不利于 SEO，并且不便于使用。

同时尝试使初始页面加载尽可能轻量级。不要预加载所有内容，而是使用异步调用来获取其余内容（从用户接下来最有可能请求的内容开始）。

不要害怕让用户等待一段时间。他习惯了这样一个事实，即当一个链接被点击时，会有一些等待时间。重要的是，您指出，某事正在发生（为此使用 spinner）。

使用 AJAX 的另一个重要方面是历史。用户希望后退（和前进）按钮按预期工作。 AJAX 本身不支持。考虑使用像 this one 这样的 jquery 历史插件来显着提高应用程序的用户友好性。

我会做这样的事情：

<div id="content1" style="display:none"></div>
<div id="content2" style="display:none"></div>
<div id="content3" style="display:none"></div>

loadContent();

function loadContent(){
   // asynchronously load content1, upon success content2, and so on,
   // until all resources are loaded
}

现在您的 ajax 调用只包含每个 div 的数据，没有任何开销。这节省了带宽并加快了加载时间 - 通过将内容分成几部分，客户端可以更快地响应（如果您没有遇到通过这种方法产生的更多 http-request 的问题）。

【讨论】：

SEO 并不重要（蜘蛛无法访问这些页面，是内部应用程序）。 IFrame 是强制性的，因为某些页面（内容）共享相同的 ID。