无界简单使用

微前端-wujie

预加载的底层原理

底层使用requestIdleCallback函数
window.requestIdleCallback()方法插入一个函数，这个函数将在浏览器空闲时期被调用，这使开发者能够再主事件循环上执行后台和低优先级工作，而不会影响延迟关键事件，如动画和输入响应，函数一般会按先进先调用的顺序执行（队列），然而，如果回调函数指定了执行超时事件timeout，则有可能为了再超时前执行函数而打乱顺序。可以再空闲回调函数中调用requestIdleCallback()，以便在下一次通过事件循环之前调度另一个回调

浏览器的空闲事件

FPS刷新频率
如果是60FPS 一秒替换60张照片
那一帧就是16.6ms
那这一帧浏览器做了什么呢
第一种情况
1.处理用户事件，就是event例如click,input,change等
2.执行定时器任务
3.执行requestAnimationFrame
4.执行dom的回流与重绘
5.计算更新图层的绘制指令
6.绘制指令合并主线程，如果有空闲时间会执行requestIdleCallback
第二种情况是没有任务执行
浏览器会有50ms空闲时间，这个时间段也会执行requestIdleCallback

react的fabe和requestIdleCallback

react相关人员调研 requestIdleCallback有机会是20ms执行的 这时用户就会觉得卡
所以进行了polyfill
react16使用 postMessage + requestAnimationFrame
为什么不使用setTimeout替换postMessage 因为setTimeout中的0是4ms 而postMessage是0延迟的
react18使用 MessageChannel 实现了 requestIdleCallback的polyfill

MessageChannel

最开始用作通讯

let {port1, port2} = new MessageChannel()

port1.start()
port2.start()
这样两个就可以通讯了
或者使用onmessage 会隐式开启start

port1.onmessage = function (e) {
	console.log('受到了port2的消息', e)
}
port2.onmessage = function (e) {
	console.log('收到了port1的消息',e)
}
port1.postMessage('你好')
port2.postMessage('hello')

e就是MessageChannel的实例

无界中的传参

1.无界的架构，子应用是存放在iframe的，既然是iframe就可以通过window进行通讯
主应用定义一个全局变量

var a = 'test'

子应用通过window.parent.a就可以访问到

const send = () => {
	console.log(alert(window.parent.a))
}

2.通过props给子应用注入参数

<WujieVue "props="{name: 'xxx', age: 18}" url="xxxx" name="vue3"></WujieVue>

子应用可以使用$wujie来获取

window.$wujie.props

3.event.bus
主应用通过bus监听

import {bus} from 'wujie'
bus.$on('vue3', (data) => {
	console.log(data)
})

子应用通过emit触发事件（反之也可以 主应用emit触发子应用on监听）

window.$wujie.bus.$emit('vue3', {name: 'xxx', age: 18})