概述

本文主要是介绍下iframe标签和微前端的一些理论基础知识。

iframe介绍

iframe标签主要用于嵌套其它HTML页面，使之成为网页的一部分，全称是inline frame，它是一种比较传统的网页嵌套方式，通常用于展示外部网站、广告、嵌入式应用等内容

• ifrmae的核心特点

  • 独立文档上下文：iframe 中的网页有自己的 DOM、JavaScript 执行环境和样式，因此它与父页面相互独立。
  • 跨域隔离： 如果 iframe 中加载的是外部域名的页面，父页面与 iframe 页面之间通常无法直接进行 JavaScript 访问，形成天然的跨域隔离。
  • 嵌套显示： iframe可以在一个页面中展示另一页面，常用于展示动态内容、嵌入第三方应用或服务。
  • 安全性： 使用 iframe 时需要特别注意安全问题，尤其是跨域和内容安全。现代浏览器通常会对 iframe 内容施加一定的限制，例如 X-Frame-Options 头来防止被嵌套在不信任的页面中。

• 工作原理 iframe 通过嵌套 HTML 页面，通常通过 <iframe> 标签来实现：

<iframe src="https://www.example.com" width="600" height="400"></iframe>

上面的代码会在当前页面嵌入 www.example.com 页面，并设置宽高为600x400 像素。

• iframe的常见使用场景

  • 嵌入外部内容： 比如嵌入第三方服务（如视频、地图等）。
  • 广告展示： iframe 常用来展示广告，因为它与父页面的 JavaScript 和样式相隔离。
  • 嵌入独立应用： 比如嵌入一个应用程序，它是与主应用独立的，且能够保留自己独立的运行环境。

• iframe 的局限性

• 性能： 每个iframe都需要加载和渲染一个完整的网页，可能会影响页面的加载速度。

• 隔离： 如果iframe中的内容与父页面有交互需求，可能需要通过特殊的跨窗口通信机制（如 postMessage）来实现，增加了开发的复杂性。

• SEO： iframe 中的内容通常不会被搜索引擎抓取，影响 SEO 效果。

微前端介绍

微前端（Micro Frontend）概念的起源主要是受到微服务架构（MicroServices Architecture）在后端开发中的成功实践启发。微服务架构的基本理念是将大型应用拆分成多个独立的、自治的服务，每个服务负责一个特定的功能或领域，能够独立开发、部署和扩展。这种思想的成功，促使前端领域也开始思考如何将传统的单体前端应用拆分成多个小型、独立、可部署的模块，以应对复杂度不断增加、团队协作困难等问题。

微前端的核心思想

微前端的核心思想就是将前端应用拆解成多个微应用（子应用），每个微应用都是独立的、自治的，拥有自己的开发、构建、部署和运行环境。微前端的主应用负责加载和展示这些微应用，而每个微应用可以独立更新，而不需要其他微应用的协作。

微前端架构的主要原则：

• 独立性：每个子应用都是独立的，具有独立的生命周期、技术栈、构建和部署流程。
• 松耦合：子应用之间通过定义明确的 API 或协议进行交互，而不需要过多的依赖关系。
• 按需加载：子应用可以根据需要进行加载，避免一次性加载所有资源，提升性能。
• 统一用户体验：尽管微前端允许不同的子应用使用不同的技术栈，但整体的用户体验应该保持一致。

微前端的实现方式

微前端的实现方法有多种，常见的几种方式包括：

• iframe 嵌套：最简单的方式是使用 iframe 将子应用嵌入到主应用中，每个子应用都是一个独立的页面，具有自己的生命周期和沙箱环境。
• JavaScript 动态加载：通过动态加载子应用的脚本文件，将其嵌入到主应用中进行展示，子应用的资源在需要时加载。
• 基于框架的解决方案：例如 qiankun（基于 Single-spa）提供了一种更为灵活和高效的方式，通过 JavaScript 框架对微前端进行管理和控制。
• Web Components：利用 Web Components 标准（例如 custom elements）创建独立的组件，进而将其集成到主应用中。

微前端框架的引入

尽管iframe方案在网页嵌套方面简单实用，但是它依旧无法避免一些问题。而这个问题又正是iframe最大的特写，就说提供了浏览器原生的硬隔离方案，就像一个个沙箱（sandbox）一样可以进行样式隔离，JS隔离，但这也会导致应用之间上下文环境无法被共享，因此就引入了很多微前端框架，来解决这些问题。而qiankun就是其中之一。

微前端框架qiankun介绍

qiankun 是一个基于 JavaScript 框架的微前端解决方案，主要用于实现多个前端应用（微应用）在同一个页面中运行并彼此独立的开发和部署。它基于Single-spa（一个微前端框架）并扩展了一些功能，简化了微前端的实现。

• qiankun 的核心特点

• 微前端架构： qiankun 使得多个前端应用可以并行运行在同一个页面上，类似于多个“子应用”在一个“主应用”内加载、卸载和通信。

• 独立部署和更新： 每个微应用可以独立部署、升级，不需要其他应用的配合。

• 跨框架支持： 支持 React、Vue、Angular 等不同技术栈的应用混合运行。

• 子应用加载： 通过微前端实现模块化，子应用的资源可以按需加载，减小初次加载的体积。

• 生命周期管理： qiankun 提供了完整的生命周期管理机制，例如 beforeLoad、afterMount 等，帮助开发者在应用加载时进行更细粒度的控制。

• 工作原理

qiankun 的核心理念是通过将主应用和子应用之间的隔离性与通信能力结合，做到彼此独立开发，同时又可以在运行时通过特定机制进行集成。常见的工作方式包括：

• 主应用负责加载和卸载子应用。
• 子应用可以在不同的技术栈下开发，保持一定的独立性。
• 使用沙箱机制（sandbox），防止不同子应用之间的 JavaScript 代码冲突。

iframe和qiankun的对比

特性	qiankun 微前端	iframe
隔离性	提供沙箱机制，实现 JavaScript 隔离，避免冲突	完全隔离，DOM 和 JavaScript 完全独立
性能	按需加载，子应用资源独立管理，性能较为优化	每个 Iframe 加载完整页面，可能影响性能
通信方式	支持主应用与子应用之间的通信，灵活且高效	通过postMessage 等跨域通信方式
开发独立性	支持不同技术栈的应用协同开发，如React、Vue 等	不同iframe中的页面完全独立，可以使用不同技术栈
使用场景	微前端架构，适合大型系统或多团队协作的场景	嵌套外部页面、广告展示、跨域内容嵌入等
维护难度	开发和维护较为复杂，需要考虑多个微应用的协调与部署	开发和维护简单，但跨域和性能问题需要关注

总结来说，qiankun更适合微前端架构，多个前端应用的集成和管理，而 iframe 适合简单的嵌套页面场景，尤其是涉及跨域或外部内容嵌入时。两者的选择应根据具体需求、团队结构和系统架构来决定。