Closed Bug 1408085 Opened 2 years ago Closed 2 years ago

resizeWaterfall via requestIdleCallback

Categories

(DevTools :: Netmonitor, enhancement, P2)

enhancement

Tracking

(firefox57 fix-optional, firefox58 fixed)

RESOLVED FIXED
Firefox 58
Tracking Status
firefox57 --- fix-optional
firefox58 --- fixed

People

(Reporter: gasolin, Assigned: gasolin)

References

Details

Attachments

(5 files)

Currently request-list-header send rezieWaterfall action with setTimeOut 500ms delay.
http://searchfox.org/mozilla-central/source/devtools/client/netmonitor/src/components/request-list-header.js#

by using requestIdleCallback we can trigger the call at spare time and doing cancelIdleCallback when several resize events are triggered.


For a 421ms frame, the resizeWaterfall call took about 117ms, but Recalculate Style takes near 2x time (221ms)
Attached image requestIdleCallback
after using requestIdleCallback, the average time is down to ~200ms per frame(which is still large).
Blocks: 1350969
Assignee: nobody → gasolin
Before the patch, reSizeWaterfall takes 500 ms to start update.
Comment on attachment 8918749 [details]
Bug 1408085 - resizeWaterfall via requestIdleCallback;

https://reviewboard.mozilla.org/r/189582/#review194858

::: devtools/client/netmonitor/src/components/request-list-header.js:90
(Diff revision 1)
>    resizeWaterfall() {
>      let waterfallHeader = this.refs.waterfallHeader;
>      if (waterfallHeader) {
>        // Measure its width and update the 'waterfallWidth' property in the store.
>        // The 'waterfallWidth' will be further updated on every window resize.
> -      setTimeout(() => {
> +      cancelIdleCallback(this._resizeTimerId);

I am seeing linting error:

'cancelIdleCallback' is not defined (no-undef)
Comment on attachment 8918749 [details]
Bug 1408085 - resizeWaterfall via requestIdleCallback;

https://reviewboard.mozilla.org/r/189582/#review194860
Attachment #8918749 - Flags: review?(odvarko)
Comment on attachment 8918749 [details]
Bug 1408085 - resizeWaterfall via requestIdleCallback;

https://reviewboard.mozilla.org/r/189582/#review195248

::: devtools/client/netmonitor/src/components/request-list-header.js:90
(Diff revision 1)
>    resizeWaterfall() {
>      let waterfallHeader = this.refs.waterfallHeader;
>      if (waterfallHeader) {
>        // Measure its width and update the 'waterfallWidth' property in the store.
>        // The 'waterfallWidth' will be further updated on every window resize.
> -      setTimeout(() => {
> +      cancelIdleCallback(this._resizeTimerId);

old linter doesn't recognize the new API... I'll use window.cancelIdelCallback/requestIdleCallback instead
After the patch, reSizeWaterfall called immediately when idle.
Comment on attachment 8918749 [details]
Bug 1408085 - resizeWaterfall via requestIdleCallback;

https://reviewboard.mozilla.org/r/189582/#review195466

Thanks Fred!

Honza
Attachment #8918749 - Flags: review?(odvarko) → review+
Pushed by flin@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/bb545de71336
resizeWaterfall via requestIdleCallback;r=Honza
https://hg.mozilla.org/mozilla-central/rev/bb545de71336
Status: NEW → RESOLVED
Closed: 2 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 58
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.