微前端-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监听文章来源：https://www.toymoban.com/news/detail-631103.html
import {bus} from 'wujie'
bus.$on('vue3', (data) => {
console.log(data)
})
子应用通过emit触发事件（反之也可以 主应用emit触发子应用on监听）文章来源地址https://www.toymoban.com/news/detail-631103.html
window.$wujie.bus.$emit('vue3', {name: 'xxx', age: 18})
到了这里，关于无界简单使用的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
