聊聊 iframe 的优缺点以及使用场景

一,使用 iframe 的优缺点

1,优点

实现了页面的“模块化”。比如一个网站的多个页面有统一的导航栏,这样就可以写成一个页面,用 iframe 来嵌套,增加代码的重用性。

2,缺点

  • 搜索引擎不会解读这种页面,不利于 SEO
  • 滥用 iframe 会增加页面的性能开销

二,为什么的 iframe 会影响页面性能?

1,iframe 阻塞页面加载,影响网页加载速度

window 的 onload 事件需要在所有 iframe 加载完毕后才会触发,因此,滥用 iframe 就会影响主页面加载速度。

2,唯一的连接池

浏览器只能开少量的连接到 web 服务器,所以 iframe 几乎不可能有自己独立的连接池。在大多数浏览器中,连接被主页面和它的 iframe所共享,这意味着有可能 iframe 中的资源占用了可用连接而阻塞了主页面的资源加载。

三,iframe 的使用场景

  • 常用 iframe 来加载第三方广告等
  • 可以用 iframe 解决跨域请求问题