ember.js: 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!
About this issue
- Original URL
- State: closed
- Created 7 years ago
- Comments: 15 (9 by maintainers)
<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.And under the hood it just does:
<button {{action "doSomething" on="click"}}>is IMHO legacy, as it originates from before templates were aware of HTML syntax, and could do the above.@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.