const fns = []
window.addEventListener("message", () => {
const currentFns = [...fns]
fns.length = 0
currentFns.forEach(fn => fn())
}, true);
function messageChannelMacroTaskDispatcher(fn) {
fns.push(fn)
window.postMessage(1)
}
可以看到和 node.js setImmediate
量级是一致的。
time: 78769.70 avg: 51759.83
time: 78975.60 avg: 48614.49
meaninglessRun: 921.143 ms
time: 80111.50 avg: 8805.14
time: 80327.00 avg: 46425.26
time: 80539.10 avg: 47169.81
MessageChannel
browser
理论上 browser 使用 MessageChannel
应该也是可以的,还避免了无效的消息被其他 window.addEventListener("message", handler)
接收:
const { port1, port2 } = new MessageChannel();
const fns = []
port1.onmessage = () => {
const currentFns = [...fns]
fns.length = 0
currentFns.forEach(fn => fn())
};
function messageChannelMacroTaskDispatcher(fn) {
fns.push(fn)
port2.postMessage(1)
}
不是很懂为啥会比 window.postMessage
频繁一点,同时启动两个 checker 的话可以看到 log 是成对出现的,也就是说一个loop内大家都只执行了一次。我猜测是 window.postMessage
的实现方式消耗会大一些。
time: 54974.80 avg: 68823.12
time: 55121.00 avg: 68493.15
meaninglessRun: 925.160888671875 ms
time: 56204.60 avg: 9229.35
time: 56353.00 avg: 67430.88
time: 56503.10 avg: 66666.67
// 一起执行 wp=window.postMessage mc=MessageChannel
wp time: 43307.90 avg: 25169.90
mc time: 43678.40 avg: 27005.13
wp time: 43678.60 avg: 26990.55
mc time: 44065.80 avg: 25833.12
wp time: 44066.00 avg: 25819.78
mc time: 44458.40 avg: 25484.20
node
在 node.js 上也有 MessageChannel ,是否也可以用来测量loop次数呢?
mc time: 460.99 avg: 353930.80
mc time: 489.52 avg: 355088.11
mc time: 520.30 avg: 326384.64
mc time: 551.78 avg: 320427.29
量级很不正常。理论上不应该超过 setImmediate
的。如果同时启动 setImmediate
和 setTimeout
的 checker:
...
(messagechannel) time: 1231.10 avg: 355569.31
(messagechannel) time: 1260.14 avg: 345825.77
(setImmediate) time: 1269.95 avg: 339.27
(setTimeout) time: 1270.09 avg: 339.13
(messagechannel) time: 1293.80 avg: 298141.74
(messagechannel) time: 1322.50 avg: 349939.04
...
很明显跟不是宏任务了。我猜测 MessageChannel 在 node.js 被归入到跟 socket 等同级别了,就是超出阈值之后的任务会移动到下一个loop中。
总结
使用这种方式去检测性能还挺有趣的,正式使用的话这个指标感觉过于不稳定(即使什么都没做都会有20%-30%的振动)。推荐和其他正经的办法(比如 performance 等)结合。
同时这种方式非常有可能影响正常的 Event Loop,比如 Node.js 中会有一个 pull 的阶段,在执行完全部微任务后,没有任何 timer 的话是会停留在这个阶段,准备马上执行下一个出现的微任务。
顺便复习了下 Event Loop。没想到的是 MessageChannel 在两边的差距居然有这么大。
以上就是什么是EventLoop?怎么测试Node或页面的性能的详细内容,更多请关注编程网其它相关文章!