search

plotly / dash

Data Apps & Dashboards for Python. No JavaScript Required.
https://plotly.com/dash
MIT License
21.34k stars 2.06k forks source link

[BUG] Performance Regression in dash-1.2.0 #904

Closed orenbenkiki closed 3 months ago

orenbenkiki commented 5 years ago

TL;DR: dash-1.2.0 JavaScript freezes the browser when handling ~100 callbacks. In comparison dash-1.1.1 only caused the browser to stutter.

Context

dash (1.2.0)
dash-bootstrap-components (0.7.0)
dash-core-components (1.1.2)
dash-daq (0.1.7)
dash-html-components (1.0.1)
dash-renderer (1.0.1)
dash-table (4.2.0)

Tests were done on both Chrome Version 76.0.3809.132 (Official Build) (64-bit) and Firefox Version 69.0 (64-bit) on Windows.

Description

This is a bit related to #879. Specifically, I use a pure CSS single-element spinner on the <div class='_dash-loading-callback'/> element. This worked mostly well in dash-1.1.1.

There was an occasional stutter in the CSS spinner. Mind you, these stutters were not due to waiting for the callbacks to compute; while actually waiting for the app - e.g., loading data from the DB - the spinner was smooth. Rather it seemed something to do with the JavaScript for dispatching the callbacks.

I didn't see the stutter in the CSS spinner set up by the Loading component. I read that CSS spinners might end up being dependent on JS responsiveness due to DOM and layout issues, so I tested several pure CSS spinners that seems "safe". It seems I'm not a sufficiently black CSS magician to find the magic difference between the smooth and stuttering spinners. At any rate, it was a tolerable stutter so I let it go.

Then I upgraded to dash 1.2.0, and what was a stutter turned into a full-fledged freeze. That is, my global CSS spinner would show a frame, then freeze for a few seconds, etc. Again, somehow the CSS spinner of the Loading component seems immune to this effect. However, my global "something is loading" spinner became completely unusable.

I also noticed https://github.com/plotly/dash-table/issues/561 - initially I thought the two issues are related. But even if I commented out creating any DataTable the issue remained. In contrast, if I disabled all my callbacks (except for one to get the spinner going), keeping the data tables (and the warnings), the problem disappeared. Again, when actually waiting for the results of the callback, the spinner is smooth.

Since all this was happening when I was developing my app, just to make sure, I downgraded to dash-1.1.1:

dash (1.1.1)
dash-bootstrap-components (0.7.0)
dash-core-components (1.1.1)
dash-daq (0.1.7)
dash-html-components (1.0.0)
dash-renderer (1.0.0)
dash-table (4.1.0)

And my CSS spinner returned to its old just-a-stutter behavior. So, I'm sticking with dash-1.1.1 for now.

No sample program here, sorry - the app is non-trivial. That said, I have cascades of events (one UI element controlling another that controls another, data loaded from DB affects list of valid options in some UI elements, etc.). When I load the application, there are ~100 callbacks being triggered. I accept that this takes a while - hence the spinner. However it seems that in dash-1.2.0, the JavaScript is "more blocking" when dispatching callbacks than dash-1.1.1 was, so this is "too many" callbacks for it to handle (without freezing the browser).

gvwilson commented 3 months ago

Hi - we are tidying up stale issues and PRs in Plotly's public repositories so that we can focus on things that are most important to our community. If this issue is still a concern, please add a comment letting us know what recent version of our software you've checked it with so that I can reopen it and add it to our backlog. (Please note that we will give priority to reports that include a short reproducible example.) If you'd like to submit a PR, we'd be happy to prioritize a review, and if it's a request for tech support, please post in our community forum. Thank you - @gvwilson