为什么不用iframe做微前端?
最近发现好多同学在面试时,简历中写了自己熟悉微前端,但是当面试官问「为什么你们不用iframe做微前端」时,回答都不能让面试官满意,今天,理想哥和大家梳理下,这个问题该怎么回答,大家可以先点赞收藏下。
其实,如果你不考虑用户体验问题的话,iframe 几乎是最完美的微前端解决方案,什么样式隔离,JS隔离,这些问题在iframe中通通不存在,因为浏览器提供了原生的硬隔离方案,但也正是这种硬隔离方案,导致了无法在应用之间进行数据共享,随之而来的,就是一些列的开发和产品体验问题。比如
第一个问题,每次刷新页面,iframe的url都会丢失,而且前进后退按钮没办法用,当然,这个问题,你可以通过提前缓存url来解决。
第二个问题,就是慢,因为每次加载子应用,都是一次资源重新加载的过程,每次都要重新渲染页面,当然了,如果你睁一只眼闭一只眼,这个问题也是可以忍受的。
第三个问题,因为硬隔离导致的主应用和子应用之间数据完全隔离,不共享,导致你需要做很多额外工作来处理,比如每个子应用的免登陆问题,数据实时同步问题等等
第四个问题,就是主应用和子应用之间因为DOM结构不共享,而导致的UI不同步问题。比如这个场景,我们要求子应用中的弹窗要在浏览器中居中显示,用户拖动浏览器大小时候,也要自适应居中,其实做起来就很麻烦,增加了很多额外的工作量。
以上,就是为什么不建议用iframe做微前端的原因了,大家在面试时,如果被面试官问到了,就可以从上面四个方向来回答。#前端##前端爆了##前端面试必备宝典#
其实,如果你不考虑用户体验问题的话,iframe 几乎是最完美的微前端解决方案,什么样式隔离,JS隔离,这些问题在iframe中通通不存在,因为浏览器提供了原生的硬隔离方案,但也正是这种硬隔离方案,导致了无法在应用之间进行数据共享,随之而来的,就是一些列的开发和产品体验问题。比如
第一个问题,每次刷新页面,iframe的url都会丢失,而且前进后退按钮没办法用,当然,这个问题,你可以通过提前缓存url来解决。
第二个问题,就是慢,因为每次加载子应用,都是一次资源重新加载的过程,每次都要重新渲染页面,当然了,如果你睁一只眼闭一只眼,这个问题也是可以忍受的。
第三个问题,因为硬隔离导致的主应用和子应用之间数据完全隔离,不共享,导致你需要做很多额外工作来处理,比如每个子应用的免登陆问题,数据实时同步问题等等
第四个问题,就是主应用和子应用之间因为DOM结构不共享,而导致的UI不同步问题。比如这个场景,我们要求子应用中的弹窗要在浏览器中居中显示,用户拖动浏览器大小时候,也要自适应居中,其实做起来就很麻烦,增加了很多额外的工作量。
以上,就是为什么不建议用iframe做微前端的原因了,大家在面试时,如果被面试官问到了,就可以从上面四个方向来回答。#前端##前端爆了##前端面试必备宝典#
全部评论
相关推荐
08-26 07:33
浙江大学 深度学习 点赞 评论 收藏
分享