1673168 - Poor drawImage() video performance compared to other browsers

Status: UNCONFIRMED

(Core :: Graphics: Canvas2D, defect, P3)

Description

[Wessel Kroos]

Attachment: YouTube Ambilight - DrawImage performance browsers.png

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

Comment 1

[Wessel Kroos]

Attachment: YouTube Ambilight - Settings as mentioned in the repro steps.

Comment 2

[Jeff Muizelaar [:jrmuizel]]

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

Comment 3

[Wessel Kroos]

It's the Edge chromium variant.

Comment 4

[Jeff Muizelaar [:jrmuizel]]

Can you test the non-Chromium variant?

Comment 5

[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.

Comment 6

[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.

Comment 7

[Wessel Kroos]

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.

Comment 8

[Lee Salzman [:lsalzman]]

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

Comment 9

[Wessel Kroos]

Attachment: about-support.json

Hereby my configuration information from the about:support page

Comment 10

[Lee Salzman [:lsalzman]]

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.

Comment 11

[Wessel Kroos]

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? )

Comment 12

[Lee Salzman [: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.

Comment 13

[Wessel Kroos]

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

Comment 14

[Wessel Kroos]

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.