webcompat / web-bugs

A place to report bugs on websites.
https://webcompat.com
Mozilla Public License 2.0
747 stars 67 forks source link

www.runnersworld.com - High CPU usage #19389

Closed dineshdb closed 5 years ago

dineshdb commented 6 years ago

URL: https://www.runnersworld.com/training/g23341982/best-bodyweight-exercises/?slide=27

Browser / Version: Firefox 64 Nightly Operating System: Linux Tested Another Browser: No

Problem type: Something else Description: Too much CPU usage, more than 80% on i7 6700HQ. Don't know where else to report this. Steps to Reproduce: Open the site and it eats up all CPU. It might be mining cryptocurrency in the background. I don't know any other place to report so I am reporting it here even though I think it does not belong here.

Browser Configuration
  • mixed active content blocked: false
  • buildID: 20181003100127
  • tracking content blocked: false
  • hasTouchScreen: false
  • gfx.webrender.blob-images: true
  • gfx.webrender.all: true
  • mixed passive content blocked: false
  • layers.acceleration.force-enabled: false
  • gfx.webrender.enabled: false
  • image.mem.shared: true
  • channel: nightly

From webcompat.com with ❤️

softvision-oana-arbuzov commented 6 years ago

Thanks for the report @dineshdb , I was able to reproduce the issue. Strangely I was not able to reproduce the issue on Chrome.

I've created a performance profile. https://perfht.ml/2NvSiuf

Tested with: Browser / Version: Firefox Nightly 64.0a1 (2018-10-08) Operating System: Linux Ubuntu 16.04

Moving to Needsdiagnosis for further investigation.

karlcow commented 6 years ago

It seems to spend a lot of times on ads processing too. But indeed this is high

PID    COMMAND      %CPU  TIME     #TH   #WQ  #PORTS MEM    PURG   CMPRS  PGRP  PPID  STATE    BOOSTS             %CPU_ME %CPU_OTHRS UID  FAULTS     COW      MSGSENT     MSGRECV     SYSBSD     SYSMACH
61217  plugin-conta 299.0 05:18.98 105/8 13   680-   1990M- 27M-   0B     58860 58860 running  *0[18]             8.36413 0.00000    501  1288818+   27378    1354618+    662564+     4575106+   1322310+

@digitarald The window is not slow, but the CPU is high. so not qf. :p ?

karlcow commented 5 years ago

This is still happening.

Chrome

Screenshot Description

Firefox

Screenshot Description

new perf profile. http://bit.ly/2FI3ANy

This is related to the slideshow markup. if I remove the node there. I get the CPU down. There are 28 videos in there.

Just a hunch… do they all start at the same and autoplay even if they are not being displayed?

@alastor0325 how would I verify this hypothesis?

alastor0325 commented 5 years ago

Sorry for my late reply.

This site definitely needs to change their implementation... There are 24 video playing at the same time. They should play one at a time, because there are so many video which are not in the viewport and overlapped by other videos.

You can install media panel and then you can see the media information after opening the web console and choosing "Media-Webrtc".

karlcow commented 5 years ago

Thanks a lot @alastor0325. I wonder if Chrome does something different or if something in their codepath is hiding the video. I will check this.

alastor0325 commented 5 years ago

I've also filed a bug to track this issue.

karlcow commented 5 years ago

@alastor0325 Just for confirmation. It seems that there is nothing specific into the chrome version. The videos are not hidden in any ways. So we could say that it's partially an issue with firefox. Though they could definitely improve the user experience.

<div class="slideshow-slide slideshow-slide-landscape slideshow-slide-file loaded" id="slide-1" data-id="1">
  <div class="slideshow-toolbar">
    <span class="slideshow-toolbar-count"><span class="slideshow-toolbar-count-position">2</span> of 28</span>
  </div>
  <div class="slide-media-outer" data-id="1">
    <div class="slide-media ">
      <div class="slide-media-inner slide-media-loop">
        <video src="https://hmg.h-cdn.co/videos/lunge-1537969237.mp4" autoplay="" loop="" muted="" playsinline=""></video></div>
    </div>
  </div>
  <div class="slideshow-slide-content">
    <div class="slideshow-slide-hed">
      Walking Lunge
      <span class="slideshow-slide-expand-content"></span>
    </div>
    <div class="slideshow-slide-dek">
      <p>Stand with feet hip-width apart. Step forward with right foot, bending both knees to 90 degrees. Drive through right heel to stand, while stepping left foot forward and dropping into a lunge on the left side. Continue walking forward, making sure back knee hovers just off the floor with each step. You can perform this move with body weight or holding two dumbbells or kettlebells for an added challenge. Do 10 to 15 reps per side.</p>
    </div>
  </div>
</div>

Their code seems to use https://github.com/camwiegert/in-view ( @camwiegert ) so they should be able to know what to do with the gallery events.

Let's move this as needscontact.

alastor0325 commented 5 years ago

@karlcow we can ask them not to play video unless the video is visible, if they want to improve their performance. In the meanwhile, I will fix the bug in our side to improve performance.

softvision-oana-arbuzov commented 5 years ago

I no longer able to reproduce the issue. CPU usage is low 3-4% both on Firefox and Chrome.

Tested with: Browser / Version: Firefox Nightly 72.0a1 (2019-11-19), Chrome 76.0.3809.132 Operating System: Linux Ubuntu 16.04

@dineshdb can you still reproduce it?