Bug 1367205 (QF-Polymer)

[meta] Very poor Polymer performance compared to Chrome (Web Components v0)

NEW
Unassigned

Status

()

defect
P2
normal
2 years ago
4 months ago

People

(Reporter: sstangl, Unassigned, NeedInfo)

Tracking

(Depends on 2 bugs, Blocks 1 bug, {meta, perf})

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: [qf:meta], )

Reported by a user on https://www.reddit.com/r/firefox/comments/6cwn5s/gamingyoutubecom_performance_in_firefox_vs_chrome/, it appears that http://gaming.youtube.com takes about twice as long to load in Firefox Nightly as it does to load in Chrome Stable.

Taking a profile, https://perfht.ml/2q8dMXv, a significant chunk of time (~1s of 2s) is spent in gaming_polymer.js, which is their deployment of the Polymer framework.

An even more dramatic difference can be seen if you visit the Polymer homepage at https://www.polymer-project.org/. Chrome loads that effectively instantly, but Firefox takes between 7-10 seconds.

Polymer is a Google library, and it seems that they did not build it with Firefox performance in mind, but we nevertheless must improve the situation.
Alias: QF-Polymer
Polymer has to polyfil web components on FF.  Chrome implements the web components APIs natively so probably a lot of savings come from that.
There is a benchmark made by the Polymer team for an older version (0.8; current 1.9) available at http://polymerlabs.github.io/benchmarks/synth/medium-list/runner.html.

Running that in Firefox Nightly versus Chrome Stable gives the following timings:

> polymer/app.html:
> Chrome: 8.9ms; Firefox: 1551.9ms

> polymer-0.8-03242015/app-shadow.html
> Chrome: 225.7ms; Firefox: 1093.7ms

> polymer-0.8-03242015/app.html
> Chrome: 253.0ms; Firefox: 307.3ms

> polymer-0.8-03242015-class/app.html
> Chrome: 208.1ms; Firefox: 304.9ms
The original reporter of the Youtube Gaming performance issue left a comment that may be worth sharing.

> Hopefully it will be fixed before polymer is on youtube.com as well, which is currently available as an option on youtube.com/new and performance is pretty much the same as with gaming.youtube.com.

So, if Polymer is coming to Youtube, we *really* want to get on top of it. Presumably it will be spreading to other websites as well.
Do we have a timeframe for webcomponents? Maybe a subset implementation gets us far enough?
Flags: needinfo?(overholt)
(In reply to Naveed Ihsanullah [:naveed] from comment #4)
> Do we have a timeframe for webcomponents? Maybe a subset implementation gets
> us far enough?

Looking like end of 2017 for Custom Elements and currently unknown for Shadow DOM.
Flags: needinfo?(overholt)
Component: General → DOM
Keywords: meta
Priority: -- → P2
See Also: → 1366370
The pref to enable webcomponents isn't supported configuration.
It's notable for this bug that Google is now turning on the new Polymer-based Youtube interface for many (all?) of their users.

A recent [healthily upvoted] post on reddit has several comments complaining about very poor performance with the new UI in Firefox 55.
https://www.reddit.com/r/firefox/comments/70fy9b/new_youtube_interface_is_hogging_all_resources_in/
(In reply to Caspy7 from comment #9)
> It's notable for this bug that Google is now turning on the new
> Polymer-based Youtube interface for many (all?) of their users.
> 
> A recent [healthily upvoted] post on reddit has several comments complaining
> about very poor performance with the new UI in Firefox 55.
> https://www.reddit.com/r/firefox/comments/70fy9b/
> new_youtube_interface_is_hogging_all_resources_in/

I can't reproduce (Task Manager on Windows 10 on a Surface Book peaked around 30% for Nightly). Can someone who can capture a profile (https://developer.mozilla.org/en-US/docs/Mozilla/Performance/Reporting_a_Performance_Problem)?
Flags: needinfo?(caspy77)
Keywords: perf
OK, not sure if what I see (firefox-59.0.1-1.fc27.x86_64 eating a lot of CPU when on youtube.com) is what is discussed in this BZ, but this is mine perf profile: https://perfht.ml/2J6g0MF
(In reply to Jan Hutaø from comment #12)
> OK, not sure if what I see (firefox-59.0.1-1.fc27.x86_64 eating a lot of CPU
> when on youtube.com) is what is discussed in this BZ, but this is mine perf
> profile: https://perfht.ml/2J6g0MF

Thanks! Looks like you would benefit from OMTP (bug 1432531 is for enabling it on Linux).
We're going to ship Custom Elements and Shadow DOM v1 and not v0 which is what many existing Polymer-based sites use. Hence me breaking the dependency here.
No longer depends on: webcomponents
Summary: Very poor Polymer performance compared to Chrome → Very poor Polymer performance compared to Chrome (Web Components v0)
Linking to other Polymer performance bugs
Depends on: 1419833, 1336232
I came across a Custom Elements v0 polyfill which uses the browser’s native Custom Elements v1 implementation under the hood: https://github.com/WebReflection/ce-v0

This is better than the polyfill used by Polymer v1 (the version used on YouTube¹) which implements Custom Elements v0 from scratch regardless if the browser supports Custom Elements v1.

¹ Determined by checking the value of `window.Polymer.version` in the browser console.
My idea is that the polyfill could potentially be used as a reference for implementing a v0 wrapper around the v1 API implemented in Firefox.
Whiteboard: [qf:?] → [qf:meta]
Summary: Very poor Polymer performance compared to Chrome (Web Components v0) → [meta] Very poor Polymer performance compared to Chrome (Web Components v0)
Component: DOM → DOM: Core & HTML
You need to log in before you can comment on or make changes to this bug.