Reduce synchronous layout triggered by JavaScript-based media controls

• Component: WebCore Misc.
• Status: RESOLVED FIXED

[Joseph Pecoraro]

JavaScript-based media controls are triggering synchronous layout potentially multiple times during page loads with media elements. This causes unnecessary work during page loads. 

Specifically, the Apple and iOS media controls updateProgress methods, querying the offsetWidth/offsetHeight of the timeline:

>    updateProgress: function() {
>        Controller.prototype.updateProgress.call(this);
>
>        var width = this.controls.timeline.offsetWidth;
>        var height = this.controls.timeline.offsetHeight;
>        ...
>    }

During a normal page load of a <video controls url="..."> this gets triggered 8 times. We should be able to reduce that.

[Joseph Pecoraro]

Created attachment 233628 [details]
[PATCH] Proposed Fix

Based on measurements from Andreas this improved PLT by ~0.5%. It reduces the number of calls to offsetWidth from 8 to 3 when just loading a page with a video and controls.

I see one possible issue with this patch, if the media element itself changes size the cached values may be wrong. That is because the timeline is flex based and we do not know when the element itself changed size. So that may be a regression that could be addressed later.

[WebKit Commit Bot]

Comment on attachment 233628 [details]
[PATCH] Proposed Fix

Clearing flags on attachment: 233628

Committed r170315: <http://trac.webkit.org/changeset/170315>

[WebKit Commit Bot]

All reviewed patches have been landed.  Closing bug.