Gahing's blog Gahing's blog
首页
知识体系
  • 前端基础
  • 应用框架
  • 工程能力
  • 应用基础
  • 专业领域
  • 业务场景
  • 前端晋升 (opens new window)
  • Git
  • 网络基础
  • 算法
  • 数据结构
  • 编程范式
  • 编解码
  • Linux
  • AIGC
  • 其他领域

    • 客户端
    • 服务端
    • 产品设计
软素质
  • 面试经验
  • 人生总结
  • 个人简历
  • 知识卡片
  • 灵感记录
  • 实用技巧
  • 知识科普
  • 友情链接
  • 美食推荐 (opens new window)
  • 收藏夹

    • 优质前端信息源 (opens new window)
关于
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

Gahing / francecil

To be best
首页
知识体系
  • 前端基础
  • 应用框架
  • 工程能力
  • 应用基础
  • 专业领域
  • 业务场景
  • 前端晋升 (opens new window)
  • Git
  • 网络基础
  • 算法
  • 数据结构
  • 编程范式
  • 编解码
  • Linux
  • AIGC
  • 其他领域

    • 客户端
    • 服务端
    • 产品设计
软素质
  • 面试经验
  • 人生总结
  • 个人简历
  • 知识卡片
  • 灵感记录
  • 实用技巧
  • 知识科普
  • 友情链接
  • 美食推荐 (opens new window)
  • 收藏夹

    • 优质前端信息源 (opens new window)
关于
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • 前端基础

  • 应用框架

  • 工程能力

  • 应用基础

  • 专业领域

    • 服务端

    • 跨端技术

    • Web IDE

    • 中后台

      • 微前端

        • 微前端-从入门到放弃
          • 实现方向
            • 为什么不用 iframe ?
            • 如何解决隔离问题
            • garfishjs 原理介绍
            • 大结局
            • 提案 - VM
          • 社区
    • 动效渲染

    • 可视化

    • 埋点监控

    • 多媒体

    • 桌面技术

    • 游戏互动

    • 编辑器

    • 虚拟化与容器化

    • 设计系统

  • 业务场景

  • 大前端
  • 专业领域
  • 中后台
  • 微前端
gahing
2022-08-23
目录

微前端-从入门到放弃草稿

# 什么是微前端?

# 实现方向

目前有两个方向

  • 子应用
  • 子模块

信任机制

# 为什么不用 iframe ?

https://www.yuque.com/kuitos/gky7yw/gesexv

iframe 最大的特性就是提供了浏览器原生的硬隔离方案,不论是样式隔离、js 隔离这类问题统统都能被完美解决。但他的最大问题也在于他的隔离性无法被突破,导致应用间上下文无法被共享,随之带来的开发体验、产品体验的问题。

  1. url 不同步。浏览器刷新 iframe url 状态丢失、后退前进按钮无法使用。
  2. UI 不同步,DOM 结构不共享。想象一下屏幕右下角 1/4 的 iframe 里来一个带遮罩层的弹框,同时我们要求这个弹框要浏览器居中显示,还要浏览器 resize 时自动居中..
  3. 全局上下文完全隔离,内存变量不共享。iframe 内外系统的通信、数据同步等需求,主应用的 cookie 要透传到根域名都不同的子应用中实现免登效果。
  4. 慢。每次子应用进入都是一次浏览器上下文重建、资源重新加载的过程。

其中有的问题比较好解决(问题1),有的问题我们可以睁一只眼闭一只眼(问题4),但有的问题我们则很难解决(问题3)甚至无法解决(问题2),而这些无法解决的问题恰恰又会给产品带来非常严重的体验问题, 最终导致我们舍弃了 iframe 方案。

举个 tcp 和 udp 的例子就懂了

tcp 由于是稳定的,所以需要丢包重传,而 udp 是不稳定的,但是我们可以借助自己的一套算法来满足自己的目标,不同的算法造就了不同的标准

# 如何解决隔离问题

核心两点:

  • 样式隔离
  • js 隔离

# garfishjs 原理介绍

https://www.garfishjs.org/guide/sandbox

总结

# 大结局

为什么说前端卷呢?因为上述这些方案纯属 special case hack ,没有计算机理论支撑,学了也很难说有什么成长,无法举一反三

未来几年,我认为 w3c 会出且应该出个提案解决这个问题,这里我先大胆的进行提案预测 ShadowFrame:

# 提案 - VM

无非几个问题:

  • 性能
  • js 自举实现的 vm 性能略差
  • 隔离 安全性

考虑安全性

wip

提供沙盒运行机制,允许调用某些外部方法

样式:允许进行样式隔离

# 社区

前端就是卷

https://mp.weixin.qq.com/s/Rohj17iy7qglDAjheo5aKw

https://mp.weixin.qq.com/s?__biz=MjM5MTA1MjAxMQ==&mid=2651256967&idx=1&sn=8c3cc87ca55d41848acf3d4124f21339&chksm=bd4921038a3ea81537cc3a12d4743b8846f10f0cb6b0344b5216e674faac6170ff1f1407ab8f&scene=21#wechat_redirect

编辑 (opens new window)
上次更新: 2024/09/01, 23:56:56
WebIDE 业务介绍
浅谈 Canvas 性能分析与渲染优化

← WebIDE 业务介绍 浅谈 Canvas 性能分析与渲染优化→

最近更新
01
浅谈代码质量与量化指标
08-27
02
快速理解 JS 装饰器
08-26
03
Vue 项目中的 data-v-xxx 是怎么生成的
09-19
更多文章>
Theme by Vdoing | Copyright © 2016-2024 Gahing | 闽ICP备19024221号-1
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式