Using actions on elements triggered by events piles up listeners

Hi there,

I’ve found that when elements are created and removed, for instance in an {{if}} statement, and include actions paired with native events, those events pile up (at least in chrome).

If this is happening with a lot of elements at once, for instance showing a list of 200 items, each with 3 inputs and 2 buttons, this can happen quickly, and cause memory problems.

You can also see the heap grow and never decrease on the example below of the “onClick” button.

Ember Twiddle: https://ember-twiddle.com/fb52fe588830908c7b12a0a396574434?fileTreeShown=false&numColumns=0

Screencast: https://monosnap.com/file/iWoH8QfcMdDPJTPtpaAq3vmTrt5t5o

In particular the result observed in the performance > memory > listener panel of chrome is quite different between these two: <button onClick={{action "click"}}>Button With "onClick" Action</button> and <button {{action "click"}}>Button w/ simple action</button> @locks suggested I mention @stefanpenner and @krisselden

Thanks!

[stefanpenner]

<button onclick={{action "doSomething"}}> is just the simplest, and will work with any DOM specified API. It is also takes the form as any other data binding.

<button anyProperty={{anyValue}}>

And under the hood it just does:

button.onclick = callback // no magic, just sets a property the same as a developer would.

---

<button {{action "doSomething" on="click"}}> is IMHO legacy, as it originates from before templates were aware of HTML syntax, and could do the above.

[krisselden]

@averydev the memory growth chart can climb simply because there is no GC pressure that does not mean there is a leak. I just did a comparison heap snapshot between a snapshot after toggling on/off 4 times and toggling on/off 100 times, there is no leak of the closure action or dom that was removed.