1350227 - [Performance] Request data only when needed

Status: RESOLVED WORKSFORME

(DevTools :: Netmonitor, enhancement, P2)

Description

[[e-mail]]

Especially the response body is big resolveString might generate huge RDP traffic
Remove file column’s image, use img placeholder for images (just like for stack frames)

Comment 1

[[e-mail]]

Attachment: Bug 1350227 - [Performance] fetch data when request is selected

Review commit: https://reviewboard.mozilla.org/r/130214/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/130214/

Comment 2

[[e-mail]]

Move request data update flow from `netmonitor-controller::updateRequest` to selectRequest.

Now further data won't be fetched(except the image) when we receive the request, but will trigger the update when we select a request.

In experiment each selection will trigger 2~3 updates.
It means if we have 300 requests in a page, we will save 600~900 quests to backend.


It works fine now but before sending for review, I need to fix tests and make sure the function update data as expect.

Comment 3

[Ricky Chien [:rickychien] (inactive)]

Comment on attachment 8858234 [details]
Bug 1350227 - [Performance] fetch data when request is selected

https://reviewboard.mozilla.org/r/130214/#review132986

::: devtools/client/netmonitor/src/actions/requests.js:110
(Diff revision 1)
>      type: CLEAR_REQUESTS
>    };
>  }
>  
> +// update select request data asynchronizely
> +async function updateRequestData(request) {

Nice try!

Moreover, we can reduce the call times of updateRequest() here. These data payload can be merged into one object and call updateRequest() once at the end of the function.

Every updateRequest() call will trigger a store subscriber listener to update react component. We could reduce updateRequest() from 5 times to 1 time that must bring some extent of speed improvement when selecting a request.

Comment 4

[Ricky Chien [:rickychien] (inactive)]

Comment on attachment 8858234 [details]
Bug 1350227 - [Performance] fetch data when request is selected

https://reviewboard.mozilla.org/r/130214/#review133124

::: devtools/client/netmonitor/src/actions/requests.js:110
(Diff revision 1)
>      type: CLEAR_REQUESTS
>    };
>  }
>  
> +// update select request data asynchronizely
> +async function updateRequestData(request) {

This function doesn't need to be moved from NetmonitorController to here. We have already require NetMonitorController in this file, so we can seperate NetmonitorController.updateRequest() into at least two mehtods and then access them from NetmonitorController instance.

Redux action should be pure and simple. Keep it as simple as possible and think twice about whether actions are defined to be generic and atomic.

Comment 5

[Tim Nguyen :ntim]

Note that the search box supports a has-response-header flag, so please make sure not to break this.

Comment 6

[[e-mail]]

In test post-data-03 I found the upload header is not updated due to `reselect` will cache the request object in detail panels. We need get around with it to receive update from real request.

As Ricky mentioned in Comment 3, we can reduce updateRequest 6 times to 1 time, so I'll do it in bug 1356957 for a quick win and try to solve this later.

Comment 7

[[e-mail]]

After Bug 1356957 & Bug 1358715 landed, the requests update are reduced to 1~2 update. So we would not do this big update at this moment.

Comment 8

[Jan Honza Odvarko [:Honza] (always need-info? me)]

(In reply to [e-mail] from comment #0)

Especially the response body is big resolveString might generate huge RDP
traffic
Remove file column’s image, use img placeholder for images (just like for
stack frames)

Both implemented by now:

• File column's image removed
• Response lazily loadeds

Closing

Honza