Material: input: memory leak and excess watchers created

[gregyichang]

AngularJS material poor performance and large memory footage:

• Issue:
  
  
  
  1. When added md-input-container to a page, the number of $watchers increased from 6504 to
     
     112507?, by total 17 times more than without the angular material tag*`
  
  
  2. both md-input-container and $mdDialog cause memory leak
  
  
  3. AngularJS Material pages load 4 times slower in Chrome, and almost not able to load in IE
  
  
• What is the expected behavior?
  Expect AngularJS Material app to perform similar as angular only app.

CodePen (or steps to reproduce the issue): *

• Github: https://github.com/gregyichang/MemoryLeak
• Details:
  I have two projects "Angular" and "AngularMaterial" to demonstrate that AngularJS Material add a lot memory usage and performs poorly than an AngularJS only app.

Perrformance
AngularJS Only App:
Chrome: 5.8 seconds load 500 student records
1.4 seconds load 50 student records
IE: 24.98 seconds load 500 student records
2.15 seconds load 50 student records

 AngularJS Material App:
     Chrome:    20.86 seconds load 500 student records
                         2.93 seconds load 50 student records
 IE:               wait 1 hour not able to load 500 students.
             Wait 10 minutes not able to load 200 students
             42.46 seconds to 50 student records

Memory Footage:
1. In general, IE use 1.456 times more memory than chrome
2. Chrome: AngularJS Material use 2.26 times more memory than without it
3. IE: AngularJS Material use 1.73 times more memory than without it

Memory Leak:
Memory leak detected in IE when between two views when AngularJS Material is used in views.
--switched views 23 times memory increased by 26 MB in IE
$mdDialog cause memory leak in both Chrome and IE
-- open and close dialog 31 times, Chrome memory increased by 27 MB, IE memory increased
by 12 MB

AngularJS Versions: *

• AngularJS Version: 1.5.5
• AngularJS Material Version:1.1.3

Additional Information:

• Browser Type: chrome, ie
• Browser Version: chrome 60.0.3112.90, IE 11
• OS: windows 7
• Stack Traces:

[locomain]

is there a fix for this?

[gregyichang]

Nope, if your app handles large quantity data, has complex UI and performance is critical, stay away from AngularJS Material

[thedwarf21]

+1 @gregyichang thanks for your benchmarking. I was just having trouble with $mdDialog and wasn't figuring out why my app could be getting this slow, regarding to the controllers used with my dialog boxes. This post confirms what I was expecting already.

@Splaktar If it can help you fixing this, this page explains how to create giant memory leaks with AngularJS and how to fix them. It really helped me understanding how AngularJS manages its memory.

https://makandracards.com/makandra/31289-how-to-create-giant-memory-leaks-in-angularjs

[Splaktar]

$mdDialog leaks are being tracked in https://github.com/angular/material/issues/11207. I've updated the title of this issue to focus it on leaks in md-input-container.