浅谈 iframe的优缺点以及使用场景

之前对iframe不太了解，直到两次笔试都遇到相关问题...

貌似是一种用于异步加载的技术，自从ajax等出现后便很少被使用了。

一、iframe 的优缺点

1、优点

• 实现了页面的“模块化”。可以把一些与本网页不大相关的内容（广告），或者需要多次复用的内容放在一个iframe中，再嵌套入本网页。
• 同域的时候可以操作父页面的内容（DOM），同理父页面也可以操作iframe页面的内容。

2、缺点

• 搜索引擎不会解读这种页面，不利于 SEO
• 滥用 iframe 会增加页面的性能开销
• 需要防嵌套。一个网站可能会被别人用iframe进行嵌套引用。因为iframe享有着click的最高优先权，当用户在伪造的主页中进行点击的话，如果点在iframe上，则会默认是在操作iframe的页面。钓鱼网站就是使用这种方式，通过诱导用户进行点击，产生一些用户非自愿产生的行为。

二、为什么的 iframe 会影响页面性能？

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

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

2、唯一的连接池

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

三、iframe 的使用场景

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

参考：

• https://blog.csdn.net/wayne8016/article/details/106840751
• https://www.cnblogs.com/lvhw/p/7107436.html