前端面试题(4)iframe有哪些优点?iframe缺点是什么?

优点:

  1. iframe能够原封不动的把嵌入的网页展现出来。
  2. 如果有多个网页引用iframe,那么你只需要修改iframe的内容,就可以实现调用的每一个页面内容的更改,方便快捷。
  3. 网页如果为了统一风格,头部和版本都是一样的,就可以写成一个页面,用iframe来嵌套,可以增加代码的可重用。
  4. 如果遇到加载缓慢的第三方内容如图标和广告,这些问题可以由iframe来解决。

缺点:

  1. iframe会阻塞主页面的onload事件;
  2. iframe和主页面共享连接池,而浏览器对相同域的连接有限制,所以会影响页面的并行加载。,会产生很多页面,不容易管理。
  3. iframe框架结构有时会让人感到迷惑,如果框架个数多的话,可能会出现上下、左右滚动条,会分散访问者的注意力,用户体验度差。
  4. 代码复杂,无法被一些搜索引擎索引到,这一点很关键,现在的搜索引擎爬虫还不能很好的处理iframe中的内容,所以使用iframe会不利于搜索引擎优化(SEO)。
  5. 很多的移动设备无法完全显示框架,设备兼容性差。
  6. iframe框架页面会增加服务器的http请求,对于大型网站是不可取的。

现在基本上都是用Ajax来代替iframe,所以iframe已经渐渐的退出了前端开发。
如果需要使用iframe,最好是通过javascript动态给iframe添加src属性值,这样可以绕开以上一些问题。


  • 0
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
回答: 在面试中,关于iframe的问题可能涉及到它的使用场景、优缺点以及与主页面的交互等方面。其中一个常见的问题是关于iframe对主页面资源加载的影响。根据引用\[1\],在大多数浏览器中,连接被主页面和它的iframe所共享,这意味着iframe中的资源可能会占用可用连接而阻塞主页面的资源加载。这可能会导致主页面加载速度变慢。为了解决这个问题,可以在优先级更高的资源下载完成后再动态地给iframe的src赋值,以确保主页面的资源加载不受影响。 另一个可能的问题是关于iframe对页面并行加载的影响。根据引用\[2\],iframe会阻塞主页面的onload事件以及与主页面共享连接池,从而影响页面的并行加载。这意味着主页面的其他资源可能需要等待iframe的加载完成才能开始加载。因此,在使用iframe时需要注意这个问题,并根据具体情况进行优化。 此外,还可能会涉及到与iframe相关的安全性问题。例如,如果iframe中包含的内容来自不可信的来源,可能会存在跨域脚本攻击的风险。在这种情况下,需要采取相应的安全措施,如设置适当的Content Security Policy。 总结起来,iframe的使用需要注意其对主页面资源加载和并行加载的影响,以及与安全性相关的问题。在实际应用中,需要根据具体情况进行合理的使用和优化。 #### 引用[.reference_title] - *1* *2* [面试题62:iframe的优缺点及应用场景](https://blog.csdn.net/qq_51066068/article/details/125686443)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [2022年最新前端面试题、高频面试题面试题总结](https://blog.csdn.net/HeXinT/article/details/127999585)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值