Open Bug 1673168 Opened 1 month ago Updated 6 days ago

Poor drawImage() video performance compared to other browsers

Categories

(Core :: Canvas: 2D, defect, P3)

Firefox 82
defect

Tracking

()

UNCONFIRMED

People

(Reporter: wessel_kroos, Unassigned)

References

(Blocks 1 open bug)

Details

Attachments

(3 files)

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.111 Safari/537.36

Steps to reproduce:

  1. Install the YouTube Ambilight extension: https://addons.mozilla.org/en-US/firefox/addon/youtube-ambilight
  2. Go to https://www.youtube.com/watch?v=vQVwkyn3-F8
  3. Turn on the following YouTube Ambilight settings in order:
    (The blue labeled settings button can be found in the bottom right of the video)
    Settings > Advanced: on
    Quality > Show framerate: on
    Quality > Synchronization: Power Saver (slide to the left)
    Quality > Smooth motion: on
  4. Refresh the page
  5. Set the video quality to 2160p60 (4k)

Test hardware:
CPU: Intel i7 6700k
GPU: NVidia 2070 RTX Super

Actual results:

Compared to other browsers (Chrome, Edge, Opera):

  1. The drawImage framerate is ~11x worse, 12.21fps vs ~136fps.
    (FPS labeled "Ambilight" in the screenshot)
  2. The video framerate is ~1.2x worse, 48.32fps vs ~60fps.
    (FPS labeled "Video" in the screenshot)

Expected results:

The drawImage and video framerates should be similar to other browsers on Windows 10.

There has been a similar bug reported but that one seems to be focused on macOS:
https://bugzilla.mozilla.org/show_bug.cgi?id=986945

Component: Untriaged → Canvas: 2D
Product: Firefox → Core

Is the version of Edge that you tested the Chromium one or the pre-Chromium one?

Flags: needinfo?(wessel_kroos)

It's the Edge chromium variant.

Flags: needinfo?(wessel_kroos)

Can you test the non-Chromium variant?

Flags: needinfo?(wessel_kroos)

The extension is not available for the Microsoft Legacy Edge browser. I've tried to convert the extension using the Microsoft (Legacy) Edge Extension Toolkit (https://docs.microsoft.com/en-us/microsoft-edge/extensions/guides/porting-chrome-extensions).

But the converted extension crashes because it uses some ES6 features that are unsupported in that browser.

Flags: needinfo?(wessel_kroos)

Even if I get the extension running on the Legacy Edge browser I don't think I can get any reliable framerates since I rely on the requestAnimationFrame callback.

From the MDN web notes:
https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
Notes
Edge versions below 17 and Internet Explorer do not reliably fire requestAnimationFrame before the paint cycle.

Here is a closed testcase: https://jsfiddle.net/lvl5hm/xosan6w9/29/

The rendering time for one frame in that testcase is for me between:
Chrome: 0.16ms - 0.30ms
Edge (Chromium): 0.16ms - 0.29ms
Edge (Legacy): 0.30ms - 1.60ms
Firefox: 11ms - 16ms

It looks like Firefox is ~50 times slower than other browsers.

Flags: needinfo?(lsalzman)

Can you please post your "about:support" information in the configuration that seems to be problematic?

Flags: needinfo?(lsalzman) → needinfo?(wessel_kroos)
Severity: -- → S3
Priority: -- → P3
Attached file about-support.json

Hereby my configuration information from the about:support page

Flags: needinfo?(wessel_kroos)

Using accelerated Direct2D canvas, so this isn't a problem with software canvas at least. A profile with the Graphics preset set would help us track down where the overhead is that you are seeing in your configuration.

I'm not familiar with the profile you're requesting. How can I share a profile with the Graphics preset set?
(Do you mean the profile for Firefox in the NVidia control panel? )

Flags: needinfo?(lsalzman)

https://profiler.firefox.com/

After you enable the profiler as described there, click on the down arrow on the profile icon and you will see a drop down menu with a combo box labeled "Settings". Change that to the "Graphics" preset. Then record a profile of the issue in question.

Flags: needinfo?(lsalzman)

To improve the profiler data I've created a isolated testcase:
https://codepen.io/wesselkroos/pen/mdEoxqG

The testcase results are on my machine:
Firefox: 15 fps | 66.27 ms (ms is the average drawImage duration in milliseconds of the last second)
Chrome: 144 fps | 0.33 ms
Edge (chromium): 144 fps | 0.21 ms

Here is the recorded profile for the above testresult on Firefox:
https://profiler.firefox.com/public/cg15rz0rdm47cp41e4c1b7n1ydth8wt6fhayswr/stack-chart/?globalTrackOrder=0-1&localTrackOrderByPid=10288-0~&thread=2&v=5

Flags: needinfo?(lsalzman)
Flags: needinfo?(lsalzman)

Something that might be worth knowing as well:

  1. I'm using a 144hz monitor so my results are capped at 144 fps.

  2. When I replace requestAnimationFrame(func) with setTimeout(func, 0) I'm able to get ~195 fps on Chrome and Edge (chromium). That would make the performance in chromium not ~11x but ~13x (= 195 / 15) faster.

  3. When I execute drawImage() 100 times per setTimeout callback I get ~8000 fps on Chrome.
    100 times per setTimeout seems to be the limit for Chrome, going beyond 100 times turns the video into a slideshow and keeps the fps at 8000.

  4. When I replace setTimeout with requestAnimationFrame and fire drawImage() 100 times per requestAnimationFrame callback I get even ~11000 fps on Chrome. That seems to shave off some overhead caused by the setTimeout scheduling.
    Going beyond 100 times per requestAnimationFrame callback also turns the video into a slideshow and keeps the fps at 11000.
    So that turns the end result in 733x (= 11000 / 15) faster in chromium.

You need to log in before you can comment on or make changes to this bug.