我的前端项目

qiankun

微前端

--是一种多个团队通过独立发布功能的方式来共同构建现代化web应用的技术手段与方法策略。
该架构的核心价值
--技术栈无关。主框架不限制应用技术栈
--独立开发与部署。微应用仓库独立，前后端可独立开发，部署完成后主框架自动更新
--增量升级。复杂场景下对当前系统进行技术栈升级重构，微前端是一种实施渐进式重构的手段。
--独立运行。微应用彼此状态隔离，运行状态不共享。

运行原理

监听路有变化

匹配子应用

加载子应用

渲染子应用

qiankun与single-spa的不同之处

HTML Entry+Sandbox

qiankun实现html entry，single-spa是js entry

通过import html-entry，可以像iframe一样加载子应用，只需知道html的url就能加载到主应用中。

WHY NOT IFRAME?

iframe最大特性是提供浏览器原生的硬隔离方案，样式隔离、js隔离不在话下。但最大问题也是无法突破隔离，导致应用级上下文无法共享，开发与产品体验问题较多。
--url不同步。浏览器刷新iframe url状态丢失，前进后退按钮无效

--UI不同步，DOM结构不共享

--全局上下文完全隔离，内存变量不共享

--速度缓慢。每次进入子应用都是一次浏览器上下文重建，资源重新加载的过程

遍历

深度优先DFS

递归实现

依次遍历当前节点，左节点，右节点即可，对于左右节点来说，依次遍历它们的左右节点即可，依此不断递归下去，直到叶节点（递归终止条件）

非递归实现---用堆栈

1. 对于每个节点来说，先遍历当前节点，然后把右节点压栈，再压左节点（这样弹栈的时候会先拿到左节点遍历，符合深度优先遍历要求）
2. 弹栈，拿到栈顶的节点，如果节点不为空，重复步骤 1， 如果为空，结束遍历。

广度优先BFS

用队列

从图的一个未遍历的节点出发，先遍历这个节点的相邻节点，再依遍次历每个相邻节点的相邻节点。

vue强制渲染

刷新页面、v-if（组件重新渲染）、$forceUpdate、key-changing(使用key标记组件身份，key改变时就是释放原始组件，重新加载新组建)