时间戳

首页 > 解决方案 > 异步与同步事件处理程序的性能

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

问题描述

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

以下两个片段的唯一区别是，在一个中，customEventHandlerisasync和在该处理程序中，它使用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>

上述测试的结果是：

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

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

标签： javascriptperformanceasync-awaitevent-handlingdom-events

解决方案

不，为 DOM 事件处理程序使用函数没有任何好处async，它所做的只是增加（非常微小的）开销。

您的测试缺少的是功能仍然需要相同的时间来运行，它们只是稍后执行，在您完成测量之后，所以您看不到它。但是他们仍然需要那个时间，而且它仍然在主 UI 线程上。

推荐阅读