Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Slow initial rendering of element content #24385

Closed
monfera opened this issue Oct 23, 2018 · 14 comments
Closed

Slow initial rendering of element content #24385

monfera opened this issue Oct 23, 2018 · 14 comments
Assignees
Labels
bug Fixes for quality problems that affect the customer experience Feature:Canvas impact:high Addressing this issue will have a high level of impact on the quality/strength of our product. loe:medium Medium Level of Effort performance Team:Presentation Presentation Team for Dashboard, Input Controls, and Canvas

Comments

@monfera
Copy link
Contributor

monfera commented Oct 23, 2018

Kibana version:
8fc3d4 or before on master; seen this for a good while

Steps to reproduce:

  1. Perform initial load
  2. Either blank screen appears (as below), or a watch face appears in place of each element
  3. It takes several seconds to see rendered element content

Expected behavior:
In this case, these are all shapes which don't rely on external resources, so an instantaneous load is anticipated. cc @cqliu1 @w33ble

Screenshots (if relevant):
slow initial load

Errors in browser console (if relevant):
none

Any additional context:
Seems to happen if browser page is left around unused for a longer while; with warm caches the shapes can show up almost immediately.

@monfera
Copy link
Contributor Author

monfera commented Oct 23, 2018

Fun gif: looks like some mouse interactions are needed to bring out the watch faces. Gif is showing it, and that layouting is fully functional (sans choppiness due to some sync work) despite element contents still loading
fun

@cqliu1 cqliu1 added the Team:Presentation Presentation Team for Dashboard, Input Controls, and Canvas label Oct 23, 2018
@w33ble
Copy link
Contributor

w33ble commented Oct 23, 2018

I've noticed it feels a lot slower too. It might be related to the deferred interpreter and socket loading I added recently. We should definitely figure out what's going on though.

@w33ble w33ble added loe:medium Medium Level of Effort and removed triage_needed loe:medium Medium Level of Effort labels Nov 12, 2018
@w33ble w33ble self-assigned this Nov 15, 2018
@monfera
Copy link
Contributor Author

monfera commented Nov 20, 2018

May be related: #25850

@monfera
Copy link
Contributor Author

monfera commented Nov 23, 2018

Possibly related: currently, loading a Canvas workbook (eg. on a workpad switch, or browser reload, if a workbook was already open) causes a POST to the http:/?????????:????/???/api/canvas/workpad/workpad-????????? route, with the entire workbook persisted. @cqliu1 @w33ble do you know if it's still needed? This might be where the update is originated (update):

              // tests if user has permissions to write to workpads
              // TODO: remove this and switch to checking user privileges when canvas loads when granular app privileges are introduced
              // https://github.com/elastic/kibana/issues/20277
              workpadService.update(params.id, fetchedWorkpad).catch(err => {

@w33ble
Copy link
Contributor

w33ble commented Nov 28, 2018

Well, #20277 is still open, so I assume we still need it. @cqliu1 knows more than I do, but it's certainly worth looking into. Thanks for the pointer.

@cqliu1
Copy link
Contributor

cqliu1 commented Nov 29, 2018

We don't have a better way to check if a user has write permissions until granular app permissions goes into security #20277.

@w33ble
Copy link
Contributor

w33ble commented Dec 17, 2018

I started timing things and found that the loading of plugins takes a long time too, causing the throbber to show up for a while before any of the elements even load. I opened #27352 as a result.

@w33ble
Copy link
Contributor

w33ble commented Dec 20, 2018

Ignoring the plugin slowness for now, I got some timing from some elements, and it's all over the place; some are pretty quick, some take several seconds to resolve. Still working on a way to time expressions better (and hopefully in a more isolated way).

In the meantime, here's the output of a workpad with a single page and a single element:

screenshot 2018-12-19 17 03 23

The first 3 are basically expected; the expression has no resolved value, the value is fetched, and then the component is re-rendered. All the other lines here are (needless) re-renders (another performance issue to chase down later). The circled line is one of two things... either a re-render later on, or a second resolution of the resolved value. I've seen server functions get called multiple times on load, so I think it could be either one of those things...

All these re-renders on mouse move can't be helping the interface lag at all either 😢.

dec-19-2018 17-22-55

@monfera
Copy link
Contributor Author

monfera commented Jan 28, 2019

Eliminating duplicated workbook loading is still blocked by #20277

@monfera
Copy link
Contributor Author

monfera commented Jan 28, 2019

@w33ble I'll check the mousemove issue soon

@monfera monfera self-assigned this Jan 28, 2019
@w33ble w33ble changed the title [Canvas] Slow initial rendering of element content Slow initial rendering of element content Jan 29, 2019
@w33ble
Copy link
Contributor

w33ble commented Feb 27, 2019

I just found a huge cause of initial rendering slowness. We are currently rendering elements twice on load 😢. I opened #32161 to track it, and will open a PR to fix it shortly.

UPDATE: fix is #32163

@timductive
Copy link
Member

@w33ble do you think we can close this issue due to your previous fix or are we still tracking other performance issues?

@timductive timductive added bug Fixes for quality problems that affect the customer experience impact:high Addressing this issue will have a high level of impact on the quality/strength of our product. labels Jun 10, 2019
@w33ble
Copy link
Contributor

w33ble commented Jun 10, 2019

I think we can close it. Loading time isn't really a source of problems anymore.

@w33ble w33ble closed this as completed Jun 10, 2019
@toog
Copy link

toog commented Mar 7, 2023

We currently have similar slow rendering when loading a canvas with a lot of element inside.
As you can see it appears transiently a view with crosses at the location of the canvas elements.

Our elements mainly image assets, each make requests to determine the rendering of the image

Would it be possible to have a mechanism to control the order of rendering ? for example if an element makes a request that takes longer than another, not to wait for the global results to have the global rendering pass.

image

kibana : 7.16.3
browser : Firefox (last version)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Fixes for quality problems that affect the customer experience Feature:Canvas impact:high Addressing this issue will have a high level of impact on the quality/strength of our product. loe:medium Medium Level of Effort performance Team:Presentation Presentation Team for Dashboard, Input Controls, and Canvas
Projects
None yet
Development

No branches or pull requests

7 participants