1292446 - Changing width/height of images continuously causes very high memory and CPU usage

Status: UNCONFIRMED

(Core :: General, defect)

Description

[Duan Yao]

Attachment: image-scale.zip

User Agent: Mozilla/5.0 (Windows NT 10.0; WOW64; rv:47.0) Gecko/20100101 Firefox/47.0
Build ID: 20160604131506

Steps to reproduce:

Change .style.width|height of <img>s continuously by script. You can use the attached html file and images to reproduce.


Actual results:

Memory usage of Firefox increases to 1.3~2GB in a few seconds, and the CPU usage  is about 50%~95%. If one hits "stop auto scale" to stop the scaling, the memory usage still stay at high level for minitues.


Expected results:

Changing width/height of images continuously should not require a lot of memory and CPU.

I tested Google Chrome and MS Edge, both use very little memory and CPU (tens MB and <20%).

I also tested scale images via CSS transform instead of height/width, in this case Firefox uses much less memory and CPU, just like Chrome and MS Edge. If CSS transform of images can be optimized, why not height/width?

One of our app allow users to strech images by mouse, and we hit this very issue on Firefox. Because of the high memory usage, some images in our app don't show at all. Using CSS transform instead of height/width seems a workaround, but requires a lot of refactor of our codes.

Comment 1

[Duan Yao]

I believe this issue is an regression: it doesn't happen before Firefox 36.
Test results of multiple versions of Firefox with the attached test case:


Version   Memory       CPU%
33.1.1    120M         25-50
34.0.5    120M         15-35
35.0.1    220M         30-40
36.0.4    1.1GB        10-40
39.0.3    1.1GB        10-40
45.0.0    1.2-1.7GB    70-85
50.0a2    1.1-2.1GB    70-80


Note that 50.0a2 is win64 version with multiple processes enabled, others are win32 single process.