WPO技巧：使用iframe要小心

iframe经常用来载入第三方内容，广告，小插件。但，使用iframe需要谨慎

1. iframe的加载，本来就耗用更多的浏览器资源。

下图是打开100个<A><div><script><style><iframe>标签浏览器耗费的时间，可以看到iframe标签占用资源那是相当大。

2. iframe 会阻碍主页面加载。
通常我们打开一个网页，Windows的Onload事件会以最快速度加载，加载完成后，繁忙指示器（也就是那个时间沙漏）就会消失，我们就知道页面已经载入完成。如果时间沙漏的时间被拖长了，用户就会感觉到页面载入速度慢。

如果我们用了iframe，浏览器会等待框架内的资源加载完毕后，Onload事件才会生效。也就是说，用户会感觉到页面加载时间变长了。在Safari和Chrome中，如果你使用Javascript来动态加载iframe，可以避免这个问题。

3. iframe无法实现平行下载的好处
新的浏览器，比如IE8，Chrome或火狐3.0以上版本，对于同一个主机名可以实现6个组件同时下载。

（下图是不同浏览器版本支持平行下载的个数）

但如果你用了iframe的话，尽管iframe和主页面的主机名不同，也无法实现平行下载的好处。在所有主流浏览器内，主页面和iframe共用连接池。所以iframe的组件下载会造成主页面下载延迟。
如果你的iframe内容是次要内容的话，这就有点得不偿失了。使用JS将iframe的网页地址动态引用，而且应该放在主页面组件之后加载，可以解决这个问题。

以上内容，部分翻译自：http://www.stevesouders.com/blog/2009/06/03/using-iframes-sparingly/

iframe相关文章，参见《iframe的WPO优化技巧》

?

作者:?谭砚耘@用户体验与可用性设计-科研笔记

版权属于:?谭砚耘 （TOTHETOP至尚国际?）

版权所有。转载时必须以链接形式注明作者和原始出处

如果你希望与作者交流，请发送邮件到?tanyanyun/at/163.com?别忘了修改小老鼠

2 楼 jyjava 2011-12-28 不错，有助于解决也门加载慢的问题解决 3 楼 踏月流星 2012-02-23 个人认为还有一点就是：如果iframe在你的网站中是主要的内容，当iframe中被嵌套的页面被修改之后（尤其是js和css），用户在登录网站后不会立刻看到新的页面。原因是iframe的缓存太厉害，用户登录时，刷新的仅仅是外层的页面，iframe中的页面并没有得到刷新，显示的还是本地的缓存内容。
用户要想看到最新的内容，必须用鼠标右击iframe的区域，然后选择刷新（此处在各个浏览器中都有差异）。 4 楼 谭砚耘 2012-02-23 踏月流星 写道个人认为还有一点就是：如果iframe在你的网站中是主要的内容，当iframe中被嵌套的页面被修改之后（尤其是js和css），用户在登录网站后不会立刻看到新的页面。原因是iframe的缓存太厉害，用户登录时，刷新的仅仅是外层的页面，iframe中的页面并没有得到刷新，显示的还是本地的缓存内容。
用户要想看到最新的内容，必须用鼠标右击iframe的区域，然后选择刷新（此处在各个浏览器中都有差异）。

踏月流星说的很对。

因为iframe有种种问题，所以大网站很少用iframe显示重要内容，一般用来展示广告、在线小工具等次要内容。

既然是展现不重要的内容，就更不应该拖慢整个网页的加载了。而实际情况是，很多网站为了显示一个iframe广告，整个网站加载时间拖慢了1~2秒，甚至更长。这显然是不合理的。

似乎结论是：能不用iframe，尽量别用。