Firefox memory usage in Angular +Polymer webcomponents application is huge in comparison to other browsers

[msbasanth]

Hi,

Test Scenario: Angular page with 30 Dropdowns with 120 items each, 30 Tabs, 100 Checkboxes and 20 buttons.

Demos

Angular + HTML: https://github.com/msbasanth/AngularHtmlHeavyUIApp Angular + Polymer WebComponents: https://github.com/msbasanth/AngularPolymerHeavyUIApp

Angular + HTML Controls

Sl. No	Browser	Heap Memory	Performance
1	Chrome	39.3MB	40s
2	Firefox with WebComponents	26.43MB	14.4s
3	Firefox without WebComponents	26.4MB	28.8s
4	Firefox 70 Beta	40.44MB	22.2 s
5	IE11	Unable to take snapshot	25s
6	Edge	27.78MB	15s
7	Edge Canary	38.1MB	11s

Angular + Polymer Components

Sl.No.	Browser	Heap Memory	Performance
1	Chrome	32.8 MB	30s
2	Firefox with WebComponents	726.51MB	16.8s
3	Firefox without WebComponents	50.36MB	30s
4	Firefox 70 Beta	720.97MB	17s
5	IE11	Unable to take snapshot	2 Minutes
6	Edge	59.79MB	50s
7	Edge Canary	32.4MB	27.7s

Description

As you could see firefox memory usage is very high (726MB/276MB) compared to other browsers and IE11 initial load time is drastically high (2 Minutes)

Steps to Reproduce

1. Launch an Angular application with 30 Dropdowns with 120 items each, 30 Tabs, 100 Checkboxes and 20 buttons.
2. Check the performance using Chrome performance tab with Memory check enabled.
3. Note down the initial load time and total memory usage by the application.
4. There is very high memory usage in firefox with Polymer WebComponents enabled at the same time a performance degradation observed with IE11 (no webcomponents support, polyfills used)

Expected Results

We should have a comparable results across browsers when we use polymer webcomponents.

Actual Results

As you could see firefox memory usage is very high (726MB/276MB) compared to other browsers and IE11 initial load time is drastically high (2 Minutes)

Browsers Affected

• [ ] Chrome
• [x] Firefox
• [ ] Edge
• [ ] Safari 11
• [x] Safari 10
• [x] IE 11

Versions

Polymer v1.9.11 (Am I using the correct Polymer version?)

What could be the reason for huge memory usage in firefox and bad performance with IE11.

Regards Basanth

[Pingger]

Can confirm for firefox 80 using the provided Files from OP. And also on youtube (which is using polymer). Problem also seems to have gotten worse since FF 75...

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[Pingger]

not stale, devs just ignore it. stale bot is stupid