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 别忘了修改小老鼠