微前端运行时

简介: 微前端运行时

微前端运行时

谈到微前端绕不开的话题就是为什么不适用 iframe 作为承载微前端子应用的容器,其实从浏览器原生的方案来说,iframe 不从体验角度上来看几乎是最可靠的微前端方案了,主应用通过iframe 来加载子应用,iframe 自带的样式、环境隔离机制使得它具备天然的沙盒机制,但也是由于它的隔离性导致其并不适合作为加载子应用的加载器,iframe 的特性不仅会导致用户体验的下降,也会在研发在日常工作中造成较多困扰,以下总结了 iframe 作为子应用的一些劣势:

  • 使用Iframe 会大幅增加内存和计算资源,因为 iframe 内所承载的页面需要一个全新并且完整的文档环境
  • Iframe 与上层应用并非同一个文档上下文导致
  • 事件冒泡不穿透到主文档树上,焦点在子应用时,事件无法传递上一个文档流
  • 主应用劫持快捷键操作
  • 事件无法冒泡顶层,针对整个应用统一处理时效
  • 跳转路径无法与上层文档同步,刷新丢失路由状态
  • Iframe 内元素会被限制在文档树中,视窗宽高限制问题
  • Iframe 登录态无法共享,子应用需要重新登录
  • Iframe 在禁用三方 cookie 时,iframe 平台服务不可用
  • Iframe 应用加载失败,内容发生错误主应用无法感知
  • 难以计算出 iframe 作为页面一部分时的性能情况
  • 无法预加载缓存 iframe 内容
  • 无法共享基础库进一步减少包体积
  • 事件通信繁琐且限制多


基于 SPA 的微前端架构

尽管难以将 Iframe 作为微前端应用的加载器,但是却可以参考其设计思想,一个传统的 Iframe 加载文档的能力可以分为四层:文档的加载能力、HTML 的渲染、执行 JavaScript、隔离样式和 JavaScript 运行环境。那么微前端库的基础能力也可以参考其设计思想。


从设计层面采取的是基座+子应用分治的概念,部署平台负责进行服务发现和服务注册,将注册的应用列表信息下发至基座,通过基座来动态控制子系统的渲染和销毁,并提供集中式的模式来完成应用间的通信和应用的公共依赖管理,因此 Garfish 在 Runtime 层面主要提供了以下四个核心能力:


加载器(Loader)

  • 负责注册平台侧提供的应用列表
  • 负责加载和解析子应用入口资源
  • HTML 入口类型,拆解 HTML Dom、Script、Style
  • JS 入口类型,提供基础 Dom 容器
  • 预加载能力
  • 解析子应用导出内容


沙箱隔离(Sandbox)

  • 提供代码执行能力,收集执行代码时存在的副作用
  • 提供销毁收集副作用的能力
  • 支持沙箱多实例,收集不同实例的副作用


路由托管(Router)

  • 解决不同应用间的路由不同步问题
  • 提供路由劫持能力,在主应用上管控子应用路由
  • 提供路由驱动能力来拼装完整的平台的能力


子应用通信(Store)

  • 建立通信桥梁
  • 提供共享机制


应用生命周期

整个微前端子应用的生命周期基本可以总结为:

渲染阶段

  • 主应用通过路由驱动或手动挂载的方式触发子应用渲染
  • 开始加载应用的资源内容,并初始化子应用的沙箱运行时环境
  • 判断入口类型
  • 若入口类型为 HTML 类型,将开始解析和拆解子应用资源
  • 若入口类型为 JS,创建子应用的挂点 DOM
  • 将子应用存在”副作用“(对当前页面可能产生影响的内容)交由沙箱处理
  • 开始渲染子应用的 DOM 树
  • 触发子应用的渲染 Hook


销毁阶段

  • 若路由变化离开子应用的激活范围或主动触发销毁函数,触发应用的销毁
  • 清除应用在渲染时和运行时产生的副作用
  • 移除子应用的 DOM 元素
相关文章
|
24天前
|
缓存 前端开发 JavaScript
前端开发的必修课:如何让你的网页在弱网环境下依然流畅运行?
【10月更文挑战第30天】随着移动互联网的普及,弱网环境下的网页性能优化变得尤为重要。本文详细介绍了如何通过了解网络状况、优化资源加载、减少HTTP请求、调整弱网参数和代码优化等方法,提升网页在弱网环境下的加载速度和流畅性,从而改善用户体验。
104 4
|
22天前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
|
2月前
|
存储 弹性计算 算法
前端大模型应用笔记(四):如何在资源受限例如1核和1G内存的端侧或ECS上运行一个合适的向量存储库及如何优化
本文探讨了在资源受限的嵌入式设备(如1核处理器和1GB内存)上实现高效向量存储和检索的方法,旨在支持端侧大模型应用。文章分析了Annoy、HNSWLib、NMSLib、FLANN、VP-Trees和Lshbox等向量存储库的特点与适用场景,推荐Annoy作为多数情况下的首选方案,并提出了数据预处理、索引优化、查询优化等策略以提升性能。通过这些方法,即使在资源受限的环境中也能实现高效的向量检索。
|
2月前
|
NoSQL 前端开发 MongoDB
前端的全栈之路Meteor篇(三):运行在浏览器端的NoSQL数据库副本-MiniMongo介绍及其前后端数据实时同步示例
MiniMongo 是 Meteor 框架中的客户端数据库组件,模拟了 MongoDB 的核心功能,允许前端开发者使用类似 MongoDB 的 API 进行数据操作。通过 Meteor 的数据同步机制,MiniMongo 与服务器端的 MongoDB 实现实时数据同步,确保数据一致性,支持发布/订阅模型和响应式数据源,适用于实时聊天、项目管理和协作工具等应用场景。
|
4月前
|
前端开发 JavaScript 程序员
成功解决:尚硅谷中的谷粒商城前端项目运行依赖问题。【详细图解+问题说明+解决思路】
这篇文章介绍了如何解决尚硅谷谷粒商城前端项目中遇到的依赖问题,通过修改`package.json`和`package-lock.json`中的`node-sass`和`sass-loader`版本,成功解决了node版本与这些依赖的兼容性问题。
成功解决:尚硅谷中的谷粒商城前端项目运行依赖问题。【详细图解+问题说明+解决思路】
|
4月前
|
前端开发 JavaScript 开发者
JSF与WebSockets,打造实时通信魔法!让你的Web应用秒变聊天室,用户体验飞升!
【8月更文挑战第31天】在现代Web应用开发中,实时通信对于提升用户体验至关重要。本文探讨了如何在主要面向Web应用开发的JSF(JavaServer Faces)框架中引入WebSockets支持,以实现客户端与服务器之间的全双工通信。通过具体示例展示了在JSF应用中实现WebSockets的基本步骤:添加依赖、创建服务器端点以及在前端页面中嵌入JavaScript客户端代码。尽管这一过程中可能会遇到一些挑战,如复杂代码编写和额外配置需求,但借助AWS等云服务平台,开发者仍能高效地完成部署和管理工作,从而增强Web应用的实时通信能力。
48 0
|
4月前
|
前端开发 JavaScript 开发者
Angular状态管理神器ngrx Store:从零开始的实践指南与进阶优化秘籍,让你的前端应用状态井井有条、高效运行的绝招大揭秘
【8月更文挑战第31天】状态管理在现代Web应用开发中至关重要,特别是在构建大型、复杂的Angular应用时。ngrx Store借鉴Redux的设计理念,提供集中式状态管理和可预测的数据流,有助于增强应用的可维护性和可测试性。
85 0
|
4月前
|
前端开发 UED 开发者
React组件优化全攻略:深度解析让你的前端应用飞速运行的秘诀——从PureComponent到React.memo的彻底性能比较
【8月更文挑战第31天】在构建现代Web应用时,性能是提升用户体验的关键因素。React作为主流前端库,其组件优化尤为重要。本文深入探讨了React组件优化策略,包括使用`PureComponent`、`React.memo`及避免不必要的渲染等方法,帮助开发者显著提升应用性能。通过实践案例对比优化前后效果,不仅提高了页面渲染速度,还增强了用户体验。优化React组件是每个开发者必须关注的重点。
72 0
|
4月前
|
缓存 前端开发 Java
【Azure 应用服务】App Service 使用Tomcat运行Java应用,如何设置前端网页缓存的相应参数呢(-Xms512m -Xmx1204m)?
【Azure 应用服务】App Service 使用Tomcat运行Java应用,如何设置前端网页缓存的相应参数呢(-Xms512m -Xmx1204m)?
|
7月前
|
JSON JavaScript 前端开发
vue前端运行时出现RangeError: Maximum call stack size exceeded
vue前端运行时出现RangeError: Maximum call stack size exceeded
319 4

热门文章

最新文章