gpt4 book ai didi

javascript - 异步与同步事件处理程序性能

转载 作者:行者123 更新时间:2023-11-30 09:10:40 33 4
gpt4 key购买 nike

我已经创建了一些使用异步和同步事件处理程序的测试。我得出的结论是,使用异步处理程序可以极大地改进我们的代码。

下面两个代码片段的唯一区别是,在一个代码片段中,customEventHandlerasync,并且在该处理程序中,它使用 await sleep(customEventHandlerSleepTime); 而不是 sleep(customEventHandlerSleepTime);:

  • 异步测试:

<body>
<div id="event1">
<div id="event2">
<div id="event3">
<div id="event4"></div>
</div>
</div>
</div>
</body>

<script>
const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms));
const customEventHandlerIterationsCount = 1000000;
const customEventHandlerSleepTime = 500;
const customEventName = 'customevent';
const customEvent = new Event('customevent');
const customEventHandler = async() => {
for (let i = 0; i < customEventHandlerIterationsCount; ++i) {
await sleep(customEventHandlerSleepTime);
}
};

document.getElementById('event4').addEventListener(customEventName, customEventHandler);
document.getElementById('event3').addEventListener(customEventName, customEventHandler);
document.getElementById('event2').addEventListener(customEventName, customEventHandler);
document.getElementById('event1').addEventListener(customEventName, customEventHandler);

(() => {
const start = new Date().getTime();
document.getElementById('event4').dispatchEvent(customEvent);
const end = new Date().getTime();
console.log('Time: ', (end - start));
})();
</script>

  • 同步测试:

<body>
<div id="event1">
<div id="event2">
<div id="event3">
<div id="event4"></div>
</div>
</div>
</div>
</body>

<script>
const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms));
const customEventHandlerIterationsCount = 1000000;
const customEventHandlerSleepTime = 500;
const customEventName = 'customevent';
const customEvent = new Event('customevent');
const customEventHandler = () => {
for (let i = 0; i < customEventHandlerIterationsCount; ++i) {
sleep(customEventHandlerSleepTime).then(() => {});
}
};

document.getElementById('event4').addEventListener(customEventName, customEventHandler);
document.getElementById('event3').addEventListener(customEventName, customEventHandler);
document.getElementById('event2').addEventListener(customEventName, customEventHandler);
document.getElementById('event1').addEventListener(customEventName, customEventHandler);

(() => {
const start = new Date().getTime();
document.getElementById('event4').dispatchEvent(customEvent);
const end = new Date().getTime();
console.log('Time: ', (end - start));
})();
</script>

以上测试结果为:

  • 异步测试执行时间:~1ms
  • 同步测试执行时间:~1500ms

我做错了什么还是真的?如果我们从 sleep 函数中删除“await”和“.then()”,同步处理程序会以最小的时间差异更快地打印“Time”消息。

基于这个测试,我想知道是否总是(或几乎总是)使用异步处理程序更好,如果我们例如不知道这个处理程序的嵌套函数会发生什么,或者如果我们不直接在我们的处理程序中使用“await”,最好避免使用异步?也许有更好的方法来测试这个?

最佳答案

您在两个片段中都进行了大量处理。主要区别在于,在第二个(同步)片段中,您将同时创建所有 Promise,同步。有大量的 promise ,因此创建如此多的 promise 的开销很大。在第一个(异步)片段中,当事件被分派(dispatch)并且处理程序运行时,您只需同步创建 一个 sleep Promise - 这几乎不需要时间,并且然后事件结束。然后,作为一个微任务,第二个 Promise 被创建,你等待它 resolve。然后,作为一个微任务,第三个 Promise 被创建,你等待它 resolve。等等

您在两个片段中都进行了繁重的处理,但在一个片段中,它在很长一段时间内错开(Promise 串行运行),而在另一个片段中,Promise 全部并行运行,并立即初始化。 如果事件是通过 Javascript 触发的(而不是,例如, native 按钮单击),则需要一些时间才能到达 after 手动触发如果所有繁重的处理都是同步的,则为事件。

所以,当然,有时这种异步技术可能会对您有所帮助(尽管如此密集的处理在 Javascript 中非常罕见,因此通常根本不会引起注意)。

更好的选择可能是将繁重的处理转移到 web worker 中 - 这样,处理就在完全独立的线程上完成。

关于javascript - 异步与同步事件处理程序性能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59343313/

33 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com