青青子衿, 悠悠我心, 但为君故, 沉吟至今
« Web 2.0时代我们需要什么样的阅读谷歌发布Android 4.1系统 »

为什么要少用Iframe

  iframes 提供了一个简单的方式把一个网站的内容嵌入到另一个网站中。但我们需要慎重的使用iframe。iframe的创建比其它包括scripts和css的 DOM 元素的创建慢了 1-2 个数量级。

  使用 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瘾  原文链接



  除非注明,月光博客文章均为原创,转载请以链接形式标明本文地址

  本文地址:http://www.williamlong.info/archives/3136.html
  • 文章排行:
  • 1.深思的博客
  • 一直都在关注月光~
  • 2012/6/27 23:13:42   支持(22)反对(13) 回复
  • 2.爱发现爱探索
  • 少用为妙,不过有时候也有用啊,要不用ajax代替吧
  • 2012/6/28 8:27:46   支持(25)反对(20) 回复
  • 3.airoschou
  • 绝对是尽量少用,网易首页用了不少呢~不过人家可以使用优良的链接通道,花大把的钱
  • 2012/6/28 11:25:57   支持(21)反对(16) 回复
  • 4.cen
  • 连接池的问题用JS很好解决啊,先等待主页面加载完成,然后再加载iframe的内容不就ok了,小题大作说得
  • 2012/7/12 16:17:14   支持(24)反对(19) 回复
  • 6.我是日光
  • 第一次离楼主那么近,不过这玩意还挺好用的。
  • 2012/6/27 21:31:44   支持(17)反对(14) 回复
  • 8.丽丽
  • 自己的项目(微信项目) 用了iframe嵌套了一个别人的网页,这个网页中的输入框竟然输不进去东西, 但不用iframe的时候这些输入框都是好用的,不知道为啥。。
  • 2016/10/18 14:28:22   支持(1)反对(0) 回复
  • 9.夜色冷月
  • 对iframe的理解又加深了。
  • 2012/6/27 21:39:00   支持(13)反对(13) 回复
  • 10.zmcrazy
  • 唯一的连接池问题:
    iframe和原始网页应该是两个域吧?应该不会共享连接资源。
  • 2014/12/27 10:40:19   支持(7)反对(7) 回复
  • 12.亿凡博客
  • 有些收货,感觉很不错的啊
  • 2014/12/9 22:02:28   支持(7)反对(8) 回复
  • 13.kaka
  • 看是什么web应用,网站前台不推荐用iframe,
    但网站后台管理和web app还是可以用iframe的
  • 2012/6/28 9:38:42   支持(12)反对(14) 回复
  • 14.otarim
  • 这玩意不一定吧,用iframe来做预加载挺好的,当然预加载的资源域名还有数量应该合理规划一下
  • 2014/3/6 10:18:53   支持(8)反对(10) 回复
  • 15.主题曲之家
  • 这个必须要少用,一般我是不用得
  • 2012/6/27 23:16:47   支持(16)反对(19) 回复
  • 17.shikan8
  • 百度用的比较多,百度分享按钮,指数代码,都是iframe。
  • 2012/7/1 16:24:01   支持(11)反对(14) 回复
  • 19.dongyl
  • 伟大的电信对iFrame表示理解深刻!
  • 2012/6/28 0:13:18   支持(17)反对(23) 回复
  • 20.圣迈斯标识
  • iframe确实对SEO没好处。尽量少用。
  • 2012/6/27 23:01:38   支持(11)反对(19) 回复
  • 21.XF网络工作室
  • 所有SEO都在说少用iframe,到底为什么呢?

    看了这篇文章得到了一定启示
  • 2012/6/27 21:42:28   支持(10)反对(20) 回复
  • 22.html6game
  • 很少用这个,因为听说对收录不好。
  • 2012/6/28 16:21:07   支持(12)反对(23) 回复

发表评论:

 请勿发送垃圾信息、广告、推广信息或链接,这样的信息将会被直接删除。

订阅博客

  • 订阅我的博客:订阅我的博客
  • 关注新浪微博:关注新浪微博
  • 关注腾讯微博:关注腾讯微博
  • 关注认证空间:关注QQ空间
  • 通过电子邮件订阅
  • 通过QQ邮件订阅

站内搜索

热文排行


月度排行

本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享. 转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议.
This site is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 License.