Very poor performance when a large number of events is emitted

[wujekbogdan]

Version

4.1.4

Browser and OS info

Chrome 67.0.3396.87 macOS, Firefox 60.0.2 macOS

Steps to reproduce

• Raise a lot of events.
• Use the app
• There's no performance issue
• Open dev tools
• The app slows down significantly. On Chrome the dev tools will crash at some point, on Firefox I didn't experience dev tools crash, but the app's performance decreased a lot.
• Close dev tools
• The application is still laggy
• Restart the browser
• Everything gets back to normal.

Real life code:

this.map = new this.google.maps.Map(this.$el, this.getMapSettings());

// Standard Google Maps event
const events = [
  'bounds_changed',
  'center_changed',
  'click',
  'dblclick',
  'drag',
  'dragend',
  'dragstart',
  'heading_changed',
  'idle',
  'maptypeid_changed',
  'mousemove',
  'mouseout',
  'mouseover',
  'projection_changed',
  'resize',
  'rightclick',
  'tilesloaded',
  'tilt_changed',
  'zoom_changed',
];

// Re-emit standard google maps events 
events.forEach((eventName) => {
  this.map.addListener(eventName, () => {
    this.$emit(`map${upperFirst(eventName)}`, this.map);
  });
});

What is expected?

The performance, when the dev-tools is open, should be similar to when it is closed.

What is actually happening?

When dev-tools is open the application works really slow. It usually crashes on Chrome.

[Akryum]

See #649