MeasureThat.net

Run results for: Native Event listener vs custom EventTarget vs fake listeners array

Go to the benchmark
Run details:
Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/132.0.0.0 Mobile Safari/537.36
Chrome Mobile 132
Android
Mobile
3 months ago
Test name Executions per second
Native Event listeners 341.8 Ops/sec
Native Event listener with callbacks array 11287.4 Ops/sec
Custom EventTarget 378.5 Ops/sec
Custom EventTarget with callbacks array 11822.0 Ops/sec
Fake listeners array 42331.5 Ops/sec
Tests:

  • Native Event listeners

    ​x
     
    let i = 1001;
    const results = [];
    while (--i) {
      const index = i;
      window.addEventListener('custom:test', () => {
        results.push('Native Event listener ' + index);
      }, {once: true});
    }
    ​
    window.dispatchEvent(new CustomEvent('custom:test', {bubbles: false}));

  • Native Event listener with callbacks array

     
    let i = 1001;
    const callbacks = [];
    const results = [];
    while (--i) {
      const index = i;
      callbacks.push(() => {
        results.push('Fake listeners array ' + index);
      });
    }
    ​
    window.addEventListener('custom:test', () => {
      results.push('Native Event listener ' + index);
      let i = callbacks.length;
      while (--i) callbacks[i]();
    }, {once: true});
    ​
    window.dispatchEvent(new CustomEvent('custom:test', {bubbles: false}));

  • Custom EventTarget

     
    let i = 1001;
    const target = new EventTarget();
    const results = [];
    while (--i) {
      const index = i;
      target.addEventListener('custom:test', () => {
        results.push('Custom EventTarget ' + index);
      }, {once: true});
    }
    ​
    target.dispatchEvent(new CustomEvent('custom:test', {bubbles: false}));

  • Custom EventTarget with callbacks array

     
    let i = 1001;
    const callbacks = [];
    const target = new EventTarget();
    const results = [];
    while (--i) {
      const index = i;
      callbacks.push(() => {
        results.push('Fake listeners array ' + index);
      });
    }
    ​
    target.addEventListener('custom:test', () => {
      results.push('Native Event listener ' + index);
      let i = callbacks.length;
      while (--i) callbacks[i]();
    }, {once: true});
    ​
    target.dispatchEvent(new CustomEvent('custom:test', {bubbles: false}));

  • Fake listeners array

     
    let i = 1001;
    const callbacks = [];
    const results = [];
    while (--i) {
      const index = i;
      callbacks.push(() => {
        results.push('Fake listeners array ' + index);
      });
    }
    ​
    i = callbacks.length;
    while (--i) callbacks[i]();