JavaScript宏任务和微任务简单理解 宏任务 - macro task，又称为task，包括：script代码块I/OxhrsetTimeoutsetIntervalsetImmediateUI交互事件postMessage浏览器为了能够使得JS引擎跟UI引擎有序配合执行，会在每一个宏任务执行结束后，在下一个宏任务执行前，对页面进行重新渲染，执行流程为macro task(JS引擎) -> render(UI引擎) -> macro task(JS引擎)微任务 - micro task包括：Promise.thenawaitprocess.nextTickMutaionObserver执行流程为：micro task -> micro task -> ...注意：微任务总是在宏任务执行过程中产生的任务，它不能单独存在（微任务实际上是宏任务的一个步骤），可以理解为宏任务是微任务寄生的环境在同一个层级的任务中，微任务执行优先级要高于宏任务的优先级，如果不考虑同一个层级，那么比较微任务和宏任务的执行级别毫无意义在宏任务执行过程中产生的微任务，会在该宏任务结束前一次执行完毕微任务实际是宏任务的一个步骤，所有微任务会在下一个宏任务之前全部执行完毕在微任务执行过程中产生的微任务会直接添加到微任务队列的末端，并在下一个宏任务执行之前全部执行掉如果在微任务执行过程中产生的宏任务，则会进入到宏任务队列末尾，按照宏任务顺序在后面的事件循环中执行process.nextTick会在当前执行站的末尾，下一次Event loop之前出发回调函数，也就是说，它指定的任务总是发生在所有异步任务之前setTimeout单线程运行机制，同一时间只能做一件事。不管怎样，都是要等主线线程的流程中兴完毕后才会进行，且按照setTimeout设置的顺序进行排队执行。该函数指定的任务为宏任务，优先级低于process.nextTick()process.nextTick()nodejs的一个异步执行函数，效率比setTimeout更高，执行顺序要早于setTimeout,在主逻辑的末尾任务队列调用之前执行。setInterval()setInterval定时器函数，按照指定的周期不断调用函数。等主线程执行完毕后调用。和setTimeout执行时间一致时，按照设置的顺序来执行。process.nextTick和PromiseNode执行完所有同步任务，接下来就会执行process.nextTick的任务队列。如果你希望异步任务尽可能快地执行，那就使用process.nextTick。根据语言规格，Promise对象的回调函数，会进入异步任务里面的“微任务”(microtask)队列。微任务队列追加在process.nextTick队列的后面，也属于本轮循环。process.nextTick跟setImmediate区别可以把process.nextTick理解为往已经存在的事件队列头部插入任务，而setImmediate可以理解为吧任务添加到已经存在事件队列的末端。

JavaScript中的防抖和节流函数 防抖函数防抖是指在事件被触发n秒后再执行回调，如果在这n秒内事件又被触发，则重新计时。这可以使用在一些点击请求的事件上，避免因为用户的多次点击向后端发送多次重复请求。应用场景按钮提交场景：防止多次提交按钮，只执行最后提交的一次服务端验证场景：表单验证需要服务端配合，只窒执行一段连续的输入事件的最后一次，还有搜索联想词功能类似生存环境请用lodash.debounce防抖函数的实现function debounce(fn, wait) { let timer = null; return function() { let context = this,args = [...arguments]; // 如果此时存在定时器的话，则取消之前的定时器重新计时 if (timer) { clearTimeout(timer); timer = null; } // 设置定时器，使事件间隔指定时间后执行 timer = setTimeout(() => { fn.apply(context, args); }, wait) } }节流函数节流是指规定一个单位事件，在这个单位时间内，只能有一次触发事件的回调函数执行，如果同一个单位时间内某事件被触发多次，只能由一次能生效。节流可以使用在scroll函数的事件监听上，通过事件节流来降低事件调用频率。应用场景拖拽场景：固定时间内只执行一次，防止超高频次触发位置变动缩放场景：监控浏览器resize动画场景：避免短时间内多次触发动画引起性能问题节流函数的实现时间戳版function throttle(fn, delay) { let preTime = Date.now(); return function() { let context = this,args = [...arguments],nowTime = Date.now(); // 如果两次时间间隔超过了指定时间，则执行函数。 if (nowTime - preTime >= delay) { preTime = Date.now(); return fn.apply(context, args); } } }定时器版function throttle(fun, wait) { let timeout = null; return function() { let context = this; let args = [...arguments]; if (!timeout) { timeout = setTimeout(() => { fun.apply(context, args) timeout = null }, wait) } } }

iframe父子窗口通信 子窗口向父窗口发送消息window.parent.postMessage(参数1为发送的消息数据，参数2为可以接受到消息的源) window.parent.postMessage({ 'type': '自定义消息类型', 'value':JSON.stringify(发送的数据字段，只能是字符串类型) }, '*')父窗口接受消息window.addEventListener('message', 事件, false);const iframe = document.getElementById('iframe') window.addEventListener( 'message', (e) => { try { if (e.source === iframe.contentWindow) { if (e.data?.type === '自定义事件类型') { console.log('查看发送过来的数据', e.data) } } } catch {} }, false )父窗口向子窗口发送消息Iframe.contentWindow.postMessage(消息，源)注意：只有当iframe加载完毕，即onLoad完成后，才能接收到消息，所以当load完成后父窗口在去发送消息，不然发了也是白发！<template> <iframe class="map" src="xxxx" @load="iframeLoad"/> </template> <script> export default { 　　data(){ 　　　　return { 　　　　　　loadFinish:false 　　　　} 　　}, methods:{ postMessage() { 　　　　　　　if(!this.loadFinish)return this.$el.querySelector('.map').contentWindow.postMessage('主页面消息', '*'); }, 　　　　　iframeLoad(){ 　　　　　　this.loadFinish = true 　　　　　} 　 } } </script>子窗口接收消息子窗口接收消息和父窗口接收消息一样的 window.addEventListener('message', 事件名, false);window.addEventListener( 'message', (e) => { try { if (e.data?.type === '自定义事件类型') { console.log('查看发送过来的数据', e.data) } } catch {} }, false )参考文章：https://www.cnblogs.com/grow-up-up/p/16981279.html