微前端 -- wujie 预加载和原理 无界传参
目录
wujie 预加载和原理
原理解析
MessageChannel
无界传参
1.全局变量
2.Props
3.event bus
wujie 预加载和原理
提前把无界实例创建好 runPreload 赋值给sandbox.preload 预先加载好
startApp 判断是否有preload
需要从wujie的实例导出preloadApp,参数跟startApp 一致，预加载必须开启exec选项
例如
preloadApp({ name: "vue3", url: "http://127.0.0.1:5174/", exec: true })
preloadApp({ name: "react", url: "http://127.0.0.1:5175/", exec: true })
fiber 默认值为true
js 的执行模式，由于子应用的执行会阻塞主应用的渲染线程，当设置为true时js采取类似react fiber的模式方式间断执行，每个 js 文件的执行都包裹在requestidlecallback中，每执行一个js可以返回响应外部的输入，但是这个颗粒度是js文件，如果子应用单个js文件过大，可以通过拆包的方式降低达到fiber模式效益最大化
原理解析
window.requestIdleCallback()方法插入一个函数，这个函数将在浏览器空闲时期被调用。这使开发者能够在主事件循环上执行后台和低优先级工作，而不会影响延迟关键事件，如动画和输入响应。函数一般会按先进先调用的顺序执行，然而，如果回调函数指定了执行超时时间timeout，则有可能为了在超时前执行函数而打乱执行顺序。
requestidlecallback 这个API 他会在浏览器空闲的时候执行，这时候有个疑问什么是浏览器空闲的时候？
主流的PC屏幕刷新率（FPS）大多在60Hz，即1秒钟对屏幕进行60次刷新，平均每次刷新耗时大概是16.6ms。
在一帧的输入渲染合成完成后才会有空闲时间，就是16.6ms之内完成输入渲染合成，空闲的时间才会留给 requestidlecallback
第二种情况是没有任务执行浏览器会有50ms空闲时间，这个时间段也会执行 requestidlecallback
// 60FPS 帧率
// 1000ms / 60FPS = 16.666666666666668ms
// 一帧就是 16.6ms
// 1.处理用户的事件，就是event 例如 click，input change 等。
// 2.执行定时器任务
// 3.执行 requestAnimationFrame 动画
// 4.执行dom 的回流与重绘
// 5.计算更新图层的绘制指令
// 6.绘制指令合并主线程 如果有空余时间会执行 requestidlecallback
// 第二种情况是没有任务执行浏览器会有50ms空闲时间，这个时间段也会执行 requestidlecallback
// 预加载资源
requestIdleCallback(function (deadline) {
//这是空闲时间
console.log(deadline.timeRemaining());
});
一帧内做了什么事呢
1.处理用户的事件，就是event 例如 click，input change 等。
2.执行定时器任务
3.执行 requestAnimationFrame
4.执行dom 的回流与重绘
5.计算更新图层的绘制指令
6.绘制指令合并主线程 如果有空余时间会执行 requestidlecallback
这个跟react 的 fiber 的有什么关系?
因为react也有该机制 但是react并没有用 requestidlecallback，说是这个东西经过测试可能会超过16ms，超过16ms绘制就会看起来很卡 所以react16是用的 requestAnimationFrame + postMessage 实现的那为什么不用setTimeOut setTimeOut 及时为0 也会有一个最小毫秒延迟4ms，所以是用了postMessage，react18又换成了MessageChannel 实现了队列方式去执行任务。
// 60FPS 帧率
// 1000ms / 60FPS = 16.666666666666668ms
// 一帧就是 16.6ms
// 1.处理用户的事件，就是event 例如 click，input change 等。
// 2.执行定时器任务
// 3.执行 requestAnimationFrame 动画
// 4.执行dom 的回流与重绘
// 5.计算更新图层的绘制指令
// 6.绘制指令合并主线程 如果有空余时间会执行 requestidlecallback
// 第二种情况是没有任务执行浏览器会有50ms空闲时间，这个时间段也会执行 requestidlecallback
// 预加载资源
requestIdleCallback(function (deadline) {
//这是空闲时间
console.log(deadline.timeRemaining());
});
// 因为react也有该机制 但是react并没有用 requestidlecallback，说是这个东西经过测试可能会超过16ms，
// react16是用的 requestAnimationFrame + postMessage
// 为什么不用setTimeOut setTimeOut 及时为0 也会有一个最小毫秒延迟
// react18又换成了MessageChannel 实现了requestIdleCallback
let { port1, port2 } = new MessageChannel();
// 必须调用port1.start() port2.start();
// onmessage;会隐式开启start
port1.onmessage = function (event) {
console.log("收到了port2的消息", event);
};
port2.onmessage = function (event) {
console.log("收到了port1的消息", event);
};
port1.postMessage("hello");
port2.postMessage("world");
MessageChannel
MessageChannel是一个用于在JavaScript中进行跨窗口通信的API。它允许在不同的窗口或iframe之间建立通信通道，以便它们可以相互发送消息和共享数据。
使用MessageChannel，您可以创建一个通信通道，其中包含两个端口：一个用于发送消息，另一个用于接收消息。这两个端口可以在不同的窗口或iframe中，甚至可以在同一个窗口中的不同上下文中。
下面是一个简单的示例，展示了如何使用MessageChannel进行跨窗口通信：
// 在窗口A中创建MessageChannel
const channel = new MessageChannel();
// 获取端口A用于发送消息
const portA = channel.port1;
// 获取端口B用于接收消息
const portB = channel.port2;
// 在窗口B中监听消息
portB.onmessage = function(event) {
console.log('收到消息:', event.data);
};
// 在窗口A中发送消息
portA.postMessage('Hello, 窗口B!');
在上面的示例中，我们首先在窗口A中创建了一个MessageChannel，并通过port1和port2属性获取了两个端口。然后，我们在窗口B中通过onmessage事件监听端口B的消息，并在控制台中打印收到的消息。最后，我们在窗口A中使用端口A的postMessage方法发送消息。
通过MessageChannel，您可以在不同的窗口之间进行双向通信，并且可以传递复杂的数据对象。这对于实现跨窗口的实时更新、共享状态或执行远程操作非常有用。
请注意，MessageChannel只能在支持HTML5的现代浏览器中使用。
无界传参
1.我们之前讲过无界的架构子应用的js是存放在iframe的，既然是iframe就可以通过window进行通讯，
1.全局变量
主应用定义一个全局变量
var a = '贾公子'
子应用通过 window.parent.a 就可以访问到
const send = () => {
console.log(alert(window.parent.a))
}
2.Props
2.通过props给子应用注入参数
<WujieVue :props="{name:'ZS',age:18}" url="http://127.0.0.1:5174/" name="vue3"></WujieVue> <!--子应用vue3-->
子应用可以通过$wujie来获取：
window.$wujie.props3.event bus
主应用通过bus 监听
import {bus} from 'wujie'
bus.$on('vue3', (data: any) => {
console.log(data)
})
子应用通过emit触发事件（反之也可以 主应用emit触发子应用on监听）
window.$wujie.bus.$emit('vue3', {name:'ls',age:18})