为什么要少用Iframe的几个原因分析

  发布时间:2012-09-05 21:40:55   作者:佚名   我要评论
iframes 提供了一个简单的方式把一个网站的内容嵌入到另一个网站中。但我们需要慎重的使用iframe。iframe的创建比其它包括scripts和css的 DOM 元素的创建慢了 1-2 个数量级
下图显示创建 100 个不同的元素中iframe到底有多耗费时间。

创建100个 elements 的耗时

 

使用 iframe 的页面一般不会包含太多 iframe,所以创建 DOM 节点所花费的时间不会占很大的比重。但带来一些其它的问题:onload 事件以及连接池(connection pool)。

 Iframes 阻塞页面加载

及时触发 window 的 onload 事件是非常重要的。onload 事件触发使浏览器的 “忙” 指示器停止,告诉用户当前网页已经加载完毕。当 onload 事件加载延迟后,它给用户的感觉就是这个网页非常慢。

window 的 onload 事件需要在所有 iframe 加载完毕后(包含里面的元素)才会触发。在 Safari 和 Chrome 里,通过 JavaScript 动态设置 iframe 的 SRC 可以避免这种阻塞情况。

 唯一的连接池

浏览器只能开少量的连接到web服务器。比较老的浏览器,包含 Internet Explorer 6 & 7 和 Firefox 2,只能对一个域名(hostname)同时打开两个连接。这个数量的限制在新版本的浏览器中有所提高。Safari 3+ 和 Opera 9+ 可同时对一个域名打开 4 个连接,Chrome 1+, IE 8 以及 Firefox 3 可以同时打开 6 个。你可以通过这篇文章查看具体的数据表:Roundup on Parallel Connections.

有人可能希望 iframe 会有自己独立的连接池,但不是这样的。绝大部分浏览器,主页面和其中的 iframe 是共享这些连接的。这意味着 iframe 在加载资源时可能用光了所有的可用连接,从而阻塞了主页面资源的加载。如果 iframe 中的内容比主页面的内容更重要,这当然是很好的。但通常情况下,iframe 里的内容是没有主页面的内容重要的。这时 iframe 中用光了可用的连接就是不值得的了。一种解决办法是,在主页面上重要的元素加载完毕后,再动态设置 iframe 的 SRC。

美国前 10 大网站都使用了 iframe。大部分情况下,他们用它来加载广告。这是可以理解的,也是一种符合逻辑的解决方案,用一种简单的办法来加载广告服务。但请记住,iframe 会给你的页面性能带来冲击。只要可能,不要使用 iframe。当确实需要时,谨慎的使用他们。 

来源:英文原文   中文编译: IT瘾   

相关文章

  • iframe如何刷新的三种实现方案

    iframe如何刷新一直都被网友所关注,接下来为大家详细介绍下三种:用iframe的name属性定位/id属性定位/当iframe的src为其它网站地址时,感兴趣的朋友可以参考下哈
    2013-03-29
  • iframe的src设置为about:blank之后细节探讨

    不设置为about:blank,内存不会释放掉。还必须用 iframe.document.write(''); 这样才能将内容清空,本文将详细探讨一下iframe的src设置为about:blank之后细节,感兴趣的你
    2013-02-25
  • iframe的src赋值问题(服务器端)

    frame的src赋值的问题,本文将进行详细探讨:服务器端的iframe重新src重新赋值,给iframe加一个ID,再加上runat=server,感兴趣的你可不要错过了哈
    2013-02-25
  • 网页设计技巧:iframe自适应高度的问题

    所谓iframe自适应高度,就是,基于界面美观和交互的考虑,隐藏了iframe的border和scrollbar,让人看不出它是个iframe
    2012-11-12
  • iframe标签用法详解(属性、透明、自适应高度)

    iframe一般用来包含别的页面,例如我们可以在我们自己的网站页面加载别人网站的内容,为了更好的效果,可能需要使iframe透明效果,那么就需要了解更多的iframe属性,这里简
    2014-10-01
  • 三谈Iframe自适应高度代码

    在构建B/S系统界面的时候,经常会遇到主页面index.html中嵌套其他页面的情况 ,虽然已经有的库已经提供了控件(例如jQuery easy UI),但是有时候iframe的使用是不可避免的
    2010-08-06
  • 让iframe透明的参数

    有时候需要让iframe继承父页面的颜色。不需要复杂的操作,简单的几个参数设置下即可。
    2010-07-21
  • IE6 select z-index无效,遮挡div bug的解决方法

    在最近的一个项目中,遇到了IE6 select遮挡div的bug,为了解决这个bug我查了很多资料,试图找到一个最最有效的方法,很多人是通过iframe的方法来解决,其实我查了国外的很
    2010-06-18
  • Iframe 高度自适应(兼容IE/Firefox、同域/跨域)

    在实际的项目进行中,很多地方可能由于历史原因不得不去使用iframe,包括目前正火热的应用开发也是如此。
    2010-03-17
  • Iframe和FRAME的区别分析

    Iframe和FRAME的区别,方便大家以后在使用过程中根据实际需要取舍。
    2010-03-08

最新评论