使用 iframe 来提高页面性能是一种可接受的方法吗？答案

【问题标题】：Is using iframes to improve page performance an acceptable approach?使用 iframe 来提高页面性能是一种可接受的方法吗？
【发布时间】：2010-03-19 14:51:45
【问题描述】：

我有一个复杂的页面，其中包含多个用户控件，例如画廊、地图、广告等。

我已经尝试通过确保完全分离 html/css/js、将 js 放在页面底部并尝试确保我在所有 3 个中都有编写良好的代码来优化它们，但可惜我的页面仍然很慢。对于现代浏览器来说，这并不是很明显，但可以看到统计信息和 IE6/7。

所以我现在正在寻找我们之前为 Adtech flash crap 所做的事情 - iframe。除了在这些控件的情况下我不担心的 SEO 影响之外，人们如何看待这种方法？请注意优点和缺点。

谢谢，丹尼斯

【问题讨论】：

<iframe> 究竟应该如何帮助任何事情？
尝试使用 yslow 插件来测试 Firefox 的性能
关于你认为慢/快的一些数字怎么样。
iframe 将允许主页加载，即使它在加载其内容时变慢。我已经将其视为在相当多的网站上加载 Flash 插件的一种方法。

标签： javascript html css optimization

【解决方案1】：

真正能提高页面性能的是serve the content from different subdomains。

例如，您可能会发疯并拥有js.example.com、images.example.com 和www.example.com，允许用户的浏览器一次获取更多内容，因为大多数浏览器每次最多允许两次下载领域。当然，通常的做法是拥有一个static.example.com 和一个www.example.com，因此它只比普通的网络服务器稍微复杂一些。

这会给您带来其他优势：

static server 可以在很远的到期日期内投放，以利用浏览器的缓存。
您可以从静态服务器strip almost all headers，减少带宽。
您的静态服务器不会传输动态 (www.) 服务器可以设置的 cookie（请记住，您设置的每个 cookie 在每个请求中发送）reducing bandwidth。李>

此外，您应该加倍努力，缩小静态内容并使用服务器站点压缩 (GZIP) 来提供内容。

对于广告服务器，请尝试使用好的提供商，并将所有获取 javascript 的广告内容留在页面底部。如果访问者访问了您的页面，但由于浏览器正忙于等待广告加载，因此只为他提供了一个空白页面，他将会离开，而如果您给他内容并然后加载广告，他很可能会留在网站上查看内容并看到广告。

【讨论】：

我们为静态做。和图像。考虑过更多或 CDN，但还没有真正看到价值，因为下载时间通常很好。通常是浏览器计算和 js 执行问题。

【解决方案2】：

iframe 并不是世界末日，但也许您可能想尝试 ajax。然后页面可以立即加载一些加载 gif 小部件将去的地方。然后为每个小部件发出一个新的 ajax 请求，响应时加载的 gif 将被小部件数据替换。

更新：我猜“延迟加载”是正确的术语。

【讨论】：

是的，我同意。使用“延迟加载”方法。包括 jQuery 或其他一些 AJAX 库，然后是您自己制作的另一个脚本，它使用 AJAX 添加其他脚本或元素。这样在等待加载剩余内容时不会进行阻塞。
延迟加载在某些情况下是一种选择，但不适用于谷歌地图。
我没用过google maps api，但是有什么特殊原因导致延迟加载不起作用？您可能需要深入研究如何实施一两次 hack 以确保内容显示在正确的位置，但这应该是可能的？
我自己也没用过谷歌地图……但为什么不能选择呢？

【解决方案3】：

添加 iframe 只会引发一场激烈的战争，你应该使用 Firebug 和 Yslow（都是 Firefox 的附加组件），这会告诉你为什么它运行缓慢，并告诉你如何加速它.

【讨论】：

我对两者都非常熟悉，并且在这一点上经历了很多关于 CDN 的建议。

【解决方案4】：

说到网络用户界面，通常越少越好。如果你的页面很慢，也许你应该分开你的控件，使它们不会同时显示。

当您想为页面添加书签时，iFrame 通常会变得一团糟。而且它们不会加快任何速度。

如果您希望有选择地加载内容，请查看 AJAX 技术。

最后，也许有点离题，关于 SEO 的好读物：http://powazek.com/posts/2090

【讨论】：

【解决方案5】：

过去有很多人使用保险丝盒类型的页面来控制多个控件，它可以添加书签并且应该加快速度。不过，任何类型的框架通常都会受到反对。

【讨论】：