1458526 - high cpu usage while playing videos

Status: UNCONFIRMED

(Core :: Audio/Video: Playback, defect, P3)

Description

[Emre]

Attachment: high cpu usage JPEG.jpg

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:59.0) Gecko/20100101 Firefox/59.0
Build ID: 20180427210249

Steps to reproduce:

Navigate to youtube.com and play and video


Actual results:

CPU usage is around 40-50% while watching videos. Playing the same video with same resolution/quality on a different browser(Chrome) uses around 10% CPU power. I have created a profile with Gecko profiler extension and here is the link: https://perf-html.io/public/38533caf5c8cfa8bf402017f72ff4768dd633958/calltree/?thread=0&threadOrder=0-2-3-4-5-7-1-6&v=3


for more info: https://www.reddit.com/r/firefox/comments/8gglib/very_high_cpu_usage_while_watching_videos_details/?st=jgp28e68&sh=f05abc51


Expected results:

Playing a video should usage much less CPU power

Comment 1

[Emre]

I think there is a memory leak too. Sometimes while watching videos(usually 60FPS) Firefox becomes very unresponsive and it becomes laggy to even pause/play the video. I have recorded a video and I hope it explains the issue. https://www.youtube.com/watch?v=xvY3vNkVzlk&feature=youtu.be

Comment 2

[Andrei Petcu]

Maybe this issue is also related https://bugzilla.mozilla.org/show_bug.cgi?id=1457678

Comment 3

[Markus Stange [:mstange]]

The main thread of the content process is 100% busy running YouTube JS code.

Looking at this view: https://perfht.ml/2rhUg8x
I can see about half of the JS time in "message" event handlers, which spend most of their time in mozilla::dom::HTMLEmbedElementBinding::get_src, which spends most of its time in NS_NewURI.
The other half of the JS time is in a function called Nja, which has this code:

Nja = function(a, b, c, d) {
  d = void 0 === d ? {} : d;
  a.addEventListener &&
    ('mouseenter' != b || 'onmouseenter' in window.document
      ? 'mouseleave' != b || 'onmouseenter' in window.document
        ? 'mousewheel' == b &&
          'MozBoxSizing' in window.document.documentElement.style &&
          (b = 'MozMousePixelScroll')
        : (b = 'mouseout')
      : (b = 'mouseover'));
  return Wb(xF, function(e) {
    var f = g.ta(e[4]) && e[4] == !!d,
      k = g.Ba(e[4]) && g.Ba(d) && g.bc(e[4], d);
    return !!e.length && e[0] == a && e[1] == b && e[2] == c && (f || k);
  });
};

Wb = function(a, b, c) {
  for (var d in a) if (b.call(c, a[d], d, a)) return d;
};

which I think might be iterating over a list of event listeners?


On the parent process main thread, I see lots of "start" events (I don't know what those are or who generates them) and a lot of message forwarding for add-ons.

Please try to reproduce this bug in a new profile without add-ons.

Comment 4

[Emre]

OK, I have uninstalled all of my addons and removed the Firefox Sync account. Completely stock. I should say CPU usage is better. I did the profile capture thing with the same video I originally posted here. https://perfht.ml/2IaRYTg



This one is with Firefox Sync enabled and only extension running is uBlock Origin. Again, playing same video as the original capture. https://perfht.ml/2IemLOX

Comment 5

[Andrei Petcu]

Please test again.... the other similar bug got fixed... maybe it's the same issue https://bugzilla.mozilla.org/show_bug.cgi?id=1457678

Comment 6

[Emre]

I have switched to Microsoft Edge yesterday due to high CPU usage problems with Firefox. But, today I have tested again and I only have uBlock origin extension enabled. Simply going to youtube.com causes 40% CPU usage. https://i.imgur.com/5WzqH32.jpg another screenshot from about:performance page https://i.imgur.com/63U1XyM.png

Is it because of the extension, I don't know. I have the exact same extension on Chrome and Edge. I am not having a problem like this with other web browsers. Here is another profile capture. CPU usage was around 40% https://perfht.ml/2IhbLQP

Comment 7

[Emre]

I should also add my computer specs here

Intel i5 4690k running at 4.5GHz
16 GB 2400MHz DDR3 RAM
NVIDIA GTX 1080 6GB
MSI Z97 Gaming 3 MB
PNY CS2211 240GB SSD

Comment 8

[Nils Ohlmeier [:drno]]

Emre: was the CPU usage with previous Firefox versions lower?

Jya: any idea how to find out if this is caused by YT JS code, or by Firefox code?

Comment 9

[Emre]

Sorry, I am a new Firefox user. I have been using Google Chrome previously.

Comment 10

[Nils Ohlmeier [:drno]]

Emre can you open the 'stats for nerds' (right click in the running YT video) and compare what you see between Firefox and other browsers?

Feel free to also copy and paste the stats just here into the ticket.

Comment 11

[Emre]

I did compare them between Firefox and Chrome at the time I created this bug report. Since I have been using Edge because of high CPU usage with Firefox, I have also added Edge stats here. I have used the same video with same quality in all browsers.

Firefox: https://i.imgur.com/DgJUA17.jpg
Chrome: https://i.imgur.com/HDhkl8V.jpg
Edge: https://i.imgur.com/ZEkbQcA.jpg

Comment 12

[Jean-Yves Avenard [:jya]]

Awesome screen capture...
Amazing that edge could use so little here.

Can you install the media devtools extension on firefox?
https://addons.mozilla.org/en-US/firefox/addon/devtools-media-panel/

Once installed, with the video playing, press Ctrl-Shit-I there will be a media tabs, select it, and click the "refresh now" button.

Could you copy/paste the text here?

Comment 13

[Emre]

Apperantly new version of Firefox(60.0) is available. My Firefox updated itself and now I must say CPU usage is better. It doesn't go up to 40-50% it only hovers around 10%. I have added the info you needed from me just in case. I think I should also rollback to v59.0 and get this same info using that. Is that necessary?



Auto Refresh Rate:
1s
Media Info : [

    0 : {
        url : "https://www.youtube.com/watch?v=yb-ESEntTuA"
        mediaElements : [
            0 : {
                currentSrc : "blob:https://www.youtube.com/bbbc3284-2139-47a3-b274-fcfe92592140"
                currentTime : 125.502052
                readyState : 4
                videoPlaybackQuality : {
                    ratio : "100%"
                    droppedVideoFrames : 0
                    corruptedVideoFrames : 0
                }
                bufferedRanges : [
                    0 : {
                        start : 20.267
                        end : 45.317
                    }
                    1 : {
                        start : 111.467
                        end : 152
                    }
                ]
                mozMediaSourceObject : [
                    0 : {
                        sourceBuffers : [
                            0 : {
                                start : 0
                                end : 50.001
                            }
                            1 : {
                                start : 110.001
                                end : 159.301
                            }
                        ]
                    }
                    1 : {
                        sourceBuffers : [
                            0 : {
                                start : 20.267
                                end : 45.317
                            }
                            1 : {
                                start : 111.467
                                end : 152
                            }
                        ]
                    }
                ]
                debugInfo : {
                    Container Type : "MediaSource"
                    Audio Decoder(audio/opus) : "shutdown"
                    Audio Frames Decoded : "1639"
                    Audio State : "ni=0 no=0 wp=0 demuxr=0 demuxq=0 decoder=0 tt=-1,0 tths=-1 in=0 out=0 qs=0 pending=0 wfd=0 eos=0 ds=0 wfk=0 sid=13"
                    Video Decoder(video/vp9, 2560x1440 @ 60,04) : "shutdown"
                    Hardware Video Decoding : "enabled"
                    Video Frames Decoded : "1905 (skipped=0)"
                    Video State : "ni=0 no=0 wp=0 demuxr=0 demuxq=0 decoder=0 tt=-1,0 tths=-1 in=0 out=0 qs=0 pending:0 wfd=0 eos=0 ds=0 wfk=0 sid=15"
                    Dumping Data for Demuxer : "17bb0fe1000"
                    Dumping Audio Track Buffer(audio/webm) : "mLastAudioTime=127,561000"
                    Audio Track Buffer Details : "NumSamples=4965 Size=2988904 Evictable=2026743 NextGetSampleIndex=3378 NextInsertionIndex=4965"
                    Audio Track Buffered : "ranges=[(0,000000, 50,001000), (110,001000, 159,301000)]"
                    Dumping Video Track Buffer(video/webm) : "mLastVideoTime=125,600000"
                    Video Track Buffer Details : "NumSamples=3935 Size=99125521 Evictable=48598291 NextGetSampleIndex=2351 NextInsertionIndex=3935"
                    Video Track Buffered : "ranges=[(20,267000, 45,317000), (111,467000, 152,000000)]"
                    Compositor dropped frame(including when element's invisible) : "1"
                    MediaDecoder=17ba4436e20 : "channels=2 rate=48000 hasAudio=1 hasVideo=1 mPlayState=PAUSED"
                    MDSM : "duration=634361000 GetMediaTime=125502052 GetClock=125553261 mMediaSink=17baca6d4c0 state=DORMANT mPlayState=2 mSentFirstFrameLoadedEvent=1 IsPlaying=0 mAudioStatus=idle mVideoStatus=idle mDecodedAudioEndTime=127554500 mDecodedVideoEndTime=125600000 mAudioCompleted=0 mVideoCompleted=0 "
                    VideoSink : "IsStarted=1 IsPlaying=0 VideoQueue(finished=0 size=4) mVideoFrameEndTime=125550000 mHasVideo=1 mVideoSinkEndRequest.Exists()=0 mEndPromiseHolder.IsEmpty()=0"
                    AudioSinkWrapper : "IsStarted=1 IsPlaying=0 AudioEnded=0"
                }
            }
        ]
    }

]

[
  {
    "url": "https://www.youtube.com/watch?v=yb-ESEntTuA",
    "mediaElements": [
      {
        "currentSrc": "blob:https://www.youtube.com/bbbc3284-2139-47a3-b274-fcfe92592140",
        "currentTime": 125.502052,
        "readyState": 4,
        "videoPlaybackQuality": {
          "ratio": "100%",
          "droppedVideoFrames": 0,
          "corruptedVideoFrames": 0
        },
        "bufferedRanges": [
          {
            "start": 20.267,
            "end": 45.317
          },
          {
            "start": 111.467,
            "end": 152
          }
        ],
        "mozMediaSourceObject": [
          {
            "sourceBuffers": [
              {
                "start": 0,
                "end": 50.001
              },
              {
                "start": 110.001,
                "end": 159.301
              }
            ]
          },
          {
            "sourceBuffers": [
              {
                "start": 20.267,
                "end": 45.317
              },
              {
                "start": 111.467,
                "end": 152
              }
            ]
          }
        ],
        "debugInfo": {
          "Container Type": "MediaSource",
          "Audio Decoder(audio/opus)": "shutdown",
          "Audio Frames Decoded": "1639",
          "Audio State": "ni=0 no=0 wp=0 demuxr=0 demuxq=0 decoder=0 tt=-1,0 tths=-1 in=0 out=0 qs=0 pending=0 wfd=0 eos=0 ds=0 wfk=0 sid=13",
          "Video Decoder(video/vp9, 2560x1440 @ 60,04)": "shutdown",
          "Hardware Video Decoding": "enabled",
          "Video Frames Decoded": "1905 (skipped=0)",
          "Video State": "ni=0 no=0 wp=0 demuxr=0 demuxq=0 decoder=0 tt=-1,0 tths=-1 in=0 out=0 qs=0 pending:0 wfd=0 eos=0 ds=0 wfk=0 sid=15",
          "Dumping Data for Demuxer": "17bb0fe1000",
          "Dumping Audio Track Buffer(audio/webm)": "mLastAudioTime=127,561000",
          "Audio Track Buffer Details": "NumSamples=4965 Size=2988904 Evictable=2026743 NextGetSampleIndex=3378 NextInsertionIndex=4965",
          "Audio Track Buffered": "ranges=[(0,000000, 50,001000), (110,001000, 159,301000)]",
          "Dumping Video Track Buffer(video/webm)": "mLastVideoTime=125,600000",
          "Video Track Buffer Details": "NumSamples=3935 Size=99125521 Evictable=48598291 NextGetSampleIndex=2351 NextInsertionIndex=3935",
          "Video Track Buffered": "ranges=[(20,267000, 45,317000), (111,467000, 152,000000)]",
          "Compositor dropped frame(including when element's invisible)": "1",
          "MediaDecoder=17ba4436e20": "channels=2 rate=48000 hasAudio=1 hasVideo=1 mPlayState=PAUSED",
          "MDSM": "duration=634361000 GetMediaTime=125502052 GetClock=125553261 mMediaSink=17baca6d4c0 state=DORMANT mPlayState=2 mSentFirstFrameLoadedEvent=1 IsPlaying=0 mAudioStatus=idle mVideoStatus=idle mDecodedAudioEndTime=127554500 mDecodedVideoEndTime=125600000 mAudioCompleted=0 mVideoCompleted=0 ",
          "VideoSink": "IsStarted=1 IsPlaying=0 VideoQueue(finished=0 size=4) mVideoFrameEndTime=125550000 mHasVideo=1 mVideoSinkEndRequest.Exists()=0 mEndPromiseHolder.IsEmpty()=0",
          "AudioSinkWrapper": "IsStarted=1 IsPlaying=0 AudioEnded=0"
        }
      }
    ]
  }
]

Comment 14

[Jean-Yves Avenard [:jya]]

thanks, but here the video was paused, it needs to be running to determine which video decoder is being used

Comment 15

[Jean-Yves Avenard [:jya]]

If the problem is fixed in 60, then we can close this bug as fixed.
Don't have any interest in fixing 59, and we're already working on 62 :)

Comment 16

[wondertx]

Not quite well on Firefox 62.

Comment 17

[jan.monschke]

I can reproduce this issue consistently when I'm streaming video from https://telekomsport.de and sometimes when I play videos from Twitter or YouTube. The CPU consumption on my MacBook Pro (Retina, 13-inch, Mid 2014) then ranges between 40% - 60% for one of the 4 "FirefoxCP Web Content" processes. When I move to another tab, the CPU consumption goes down after some time but it goes back up when I go back to the tab with the video. I'm on Firefox Quantom 64.

I downloaded the DevTools Media Panel and here's the output when I stream from Telekom Sport:

```
{
  "MediaInfo": {
    "HTMLMediaElement": {
      "autoplay": false,
      "buffered": [
        {
          "start": 14030.020333,
          "end": 14168.664333
        }
      ],
      "controls": false,
      "crossOrigin": null,
      "currentSrc": "blob:https://www.telekomsport.de/c4640c07-0edb-bd4c-b37e-821ec8a0f0f0",
      "currentTime": 14135.881004,
      "defaultMuted": false,
      "defaultPlaybackRate": 1,
      "duration": 14168.780333,
      "ended": false,
      "error": null,
      "loop": false,
      "mozAudioCaptured": false,
      "mozFragmentEnd": 14168.780333,
      "muted": false,
      "networkState": 2,
      "networkState_name": "NETWORK_LOADING",
      "paused": false,
      "playbackRate": 1,
      "played": [
        {
          "start": 14038.6749,
          "end": 14135.881004
        }
      ],
      "preload": "",
      "readyState": 4,
      "seekable": [
        {
          "start": 0,
          "end": 14168.780333
        }
      ],
      "seeking": false,
      "src": "blob:https://www.telekomsport.de/c4640c07-0edb-bd4c-b37e-821ec8a0f0f0",
      "srcObject": null,
      "volume": 1
    },
    "HTMLVideoElement": {
      "height": 0,
      "mozDecodedFrames": 2456,
      "mozFrameDelay": 0.010036077,
      "mozHasAudio": true,
      "mozPaintedFrames": 2430,
      "mozParsedFrames": 2495,
      "mozPresentedFrames": 2430,
      "videoHeight": 720,
      "videoWidth": 1280,
      "width": 0
    },
    "videoPlaybackQuality": {
      "ratio": "100%",
      "droppedVideoFrames": 0,
      "corruptedVideoFrames": 0
    },
    "mozMediaSourceObject": [
      {
        "sourceBuffers": [
          {
            "start": 14028.675,
            "end": 14168.664333
          }
        ]
      },
      {
        "sourceBuffers": [
          {
            "start": 14030.020333,
            "end": 14168.780333
          }
        ]
      }
    ],
    "debugInfo": {
      "Container Type": "MediaSource",
      "Audio Decoder(audio/mp4a-latm, 2 channels @ 48.0kHz)": "apple coremedia decoder",
      "Audio Frames Decoded": "4655",
      "Audio State": "ni=0 no=0 wp=0 demuxr=0 demuxq=0 decoder=0 tt=-1.0 tths=-1 in=4655 out=4655 qs=0 pending=0 wfd=0 eos=0 ds=0 wfk=0 sid=254",
      "Video Decoder(video/avc, 1280x720 @ 24.87)": "apple hardware VT decoder",
      "Hardware Video Decoding": "enabled",
      "Video Frames Decoded": "2456 (skipped=0)",
      "Video State": "ni=0 no=0 wp=0 demuxr=0 demuxq=0 decoder=0 tt=-1.0 tths=-1 in=2461 out=2457 qs=4 pending:0 wfd=0 eos=0 ds=0 wfk=0 sid=255",
      "Dumping Data for Demuxer": "11de10800",
      "Dumping Audio Track Buffer(audio/mp4)": "mLastAudioTime=14137.901666",
      "Audio Track Buffer Details": "NumSamples=6563 Size=4281567 Evictable=3340086 NextGetSampleIndex=5121 NextInsertionIndex=6563",
      "Audio Track Buffered": "ranges=[(14028.675000, 14168.664333)]",
      "Dumping Video Track Buffer(video/mp4)": "mLastVideoTime=14136.420333",
      "Video Track Buffer Details": "NumSamples=3467 Size=57248353 Evictable=43562326 NextGetSampleIndex=2661 NextInsertionIndex=3467",
      "Video Track Buffered": "ranges=[(14030.020333, 14168.780333)]",
      "Compositor dropped frame(including when element's invisible)": "0",
      "MediaDecoder=1629a5a30": "channels=2 rate=48000 hasAudio=1 hasVideo=1 mPlayState=PLAYING",
      "MDSM": "duration=14168664333 GetMediaTime=14135881004 GetClock=14135892608 mMediaSink=116d58a00 state=DECODING mPlayState=3 mSentFirstFrameLoadedEvent=1 IsPlaying=1 mAudioStatus=idle mVideoStatus=idle mDecodedAudioEndTime=14137901666 mDecodedVideoEndTime=14136300333 mAudioCompleted=0 mVideoCompleted=0 mIsPrerolling=0",
      "VideoSink": "IsStarted=1 IsPlaying=1 VideoQueue(finished=0 size=11) mVideoFrameEndTime=14135900333 mHasVideo=1 mVideoSinkEndRequest.Exists()=0 mEndPromiseHolder.IsEmpty()=0",
      "AudioSinkWrapper": "IsStarted=1 IsPlaying=1 AudioEnded=0"
    }
  }
}
```

Let me know if you need more info to reproduce this problem.

Comment 18

[jan.monschke]

Just for comparison, the same live-stream is using 10% - 20% CPU in Chrome

Comment 19

[Albert Scheiner [:alberts]]

My CPU just ramped up on this page: https://www.typeform.com/product/
There is a video running next to the "Easy to make" heading, served by a platform called https://wistia.com/

This is on a macbook pro 2015. Jeff, could this be relevant for bug 1429522?

Comment 20

[Jeff Muizelaar [:jrmuizel]]

(In reply to Albert Scheiner [:alberts] from comment #19)

My CPU just ramped up on this page: https://www.typeform.com/product/
There is a video running next to the "Easy to make" heading, served by a platform called https://wistia.com/

This is on a macbook pro 2015. Jeff, could this be relevant for bug 1429522?

Can you file a new bug and attach a profile https://developer.mozilla.org/en-US/docs/Mozilla/Performance/Profiling_with_the_Built-in_Profiler?

Comment 21

[Albert Scheiner [:alberts]]

Done. See bug 1579839

Comment 22

[[e-mail]]

It's crazy!

Two years after and the same problem.

Everybody i asked said has the same problem.

When playing videos the memory and the CPU go to the roof.
Not happens with Chrome.

The notebook fan looks like a helicopter.
I use Linux and i only hear my notebook fan when using Windows and playing videos on Firefox.

Thanks!

Comment 23

[[e-mail]]

Attachment: CPU usage when playing some video on Firefox

Comment 24

[Likshan Lingam]

I don't think the bug is still fixed even on Firefox 97 STABLE
and at the time my current browser Firefox beta is updated to version 98

When I play any media in the browser, it ramps the CPU up to 100%
I have tested so many things,

• Enabling Safe Mode
• Disabling and enabling hardware acceleration
• Enabling and disabling webrender
• Lots of playing around with about:config
• Following other bugs

And I have also experienced the same issue when using Google Meet

None of them fixed my issue ...
Should I create a new bug report for this ?!?