HTML(6) -- 对iframe的理解

176 阅读1分钟
一. iframe

iframe 元素会创建包含另一个文档的内联框架。简单就是页面中套页面的效果,如下:

1976.png

优点:

  • 它可以使脚本并行下载,用来加载速度较慢的内容(如广告)

  • 如果多个页面都需要用到同一部分内容(如页头...)就可以把这部分内容放到 iframe 中去!!!

  • iframe 可以原封不动的把页面显示出来!!!

  • 实现跨子域通信

缺点:

  • 创建比一般的 DOM 元素慢了 1-2 个数量级

    • iframe 的创建比其它包括 scripts 和 css 的 DOM 元素的创建慢了 1-2 个数量级,使用 iframe 的页面一般不会包含太多 iframe,所以创建 DOM 节点所花费的时间不会占很大的比重。但带来一些其它的问题:onload 事件以及连接池(connection pool)
  • 阻塞页面加载 ,阻塞 window 的 onload 事件执行:

     - window 的 onload 事件需要在所有 iframe 加载完毕后(包含里面的元素)才会触发。
    
  • 会产生很多页面,不易于管理

  • 会增加服务器的 http 请求,对大型网址不可取!!

  • ifame也占有连接池

    - 浏览器对相同域的连接有限制,主页面和其中的 iframe 是共享这些连接的。这意味着 iframe 在加载资源时可能用光了所有的可用连接,从而阻塞了主页面资源的加载。
    
  • 不利于搜索引擎优化

     - 搜索引擎的检索程序无法解读 iframe