« 上一篇下一篇 »

总结使用iframe的开销

虽然iframe不会直接阻塞主页面中的资源下载,但是有几种方式会导致页面阻塞iframe的下载。除了预期的脚本行为之外,在Internet Explorer 和Firefox中,主页面的样式表会阻塞iframe的下载。
即使是空iframe,其开销也是很高的,他们的开销其他的DOM元素高出1~2个数量级。
当我们在典型方式下使用iframe时(),它会阻塞onload事件。这会延长浏览器的忙指示,导致用户感觉页面加载很慢。动态地设置iframe的SRC属性能在Safari和Chrome中避免这个问题。对于其他浏览器而言,可以在onload事件后设置SRC属性来避免。

虽然iframe不会直接阻塞主页面中的资源下载,但是有几种方式会导致主页面阻塞iframe的下载。除了预期的脚本行为之外,在Internet Explorer 和Firefox中,主页面的样式表会阻塞iframe的下载。

在主页面和iframe之间,即使iframe是一个完全独立的文档,浏览器也会共享度对每个服务器的受限连接数,那些把大多数资源都托管在一个单独域名下的网站应该牢记这一点。

正因为有那么多的开销,所以最好是避免使用iframe,但一项快速调查表明他们依旧被频繁使用。美国排名前10的网站有5个使用iframe:AOL、Facebook、MSN.com、MySpace和YouTube。这些站点主要将iframe用于广告投放,这是预料之中的,因为iframe可以简单地嵌入来自第三方站点的内容,特别像轮播广告这样的动态内容。

对主要页面来说,创建一个div来容纳广告内容是使性能更加的广告嵌入方式之一。当主页面请求广告的外部脚本时,div的id可以包含在脚本的URL中。广告的JavaScript将通过设置div的innerHTML属性把广告插入页面中。这种方法也更符合“可扩展”的广告需求——这些广告占据了当前窗口的大部分,因此不应该勉强地使用iframe。Iframe的使用呈下降趋势,同时那些用于插入广告的其他技术变得越来越普通,这对提升网页性能非常有益。

« 上一篇下一篇 »