The React renderer takes ages too add 100k “html.Divs” to the app.layout when using a callback.
Do you guys have an hint, what I could do to improve the performance?
My current code:
# -*- coding: utf-8 -*-
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State
app = dash.Dash(__name__)
app.layout = html.Div(children=[
html.H1(children='Hello Dash'),
html.Div(children='''
Dash: A web application framework for Python.
'''),
html.Button('Add more', id='button'),
dcc.Loading(
html.Div(id='output-data-upload'),
id="loading",
type="default",
)
])
### Button Callback
@app.callback(
Output('output-data-upload', 'children'),
[Input('button', 'n_clicks')])
def update_output(n_clicks):
if n_clicks != None:
divs = []
for i in range(0,100000):
divs.append(html.Div(i))
return divs
if __name__ == '__main__':
app.run_server(debug=True)
can you please give me a short example how this javascript clientside return string should look like in my case?
In chris’ examples the html Tags are already created in python. he does not create them in the clientside callback.
I tried:
if (!window.dash_clientside) { window.dash_clientside = {}; }
window.dash_clientside.clientside = {
add_divs: function (n_clicks) {
return "html.Div('Hello World')"
}
}
I suspect you should return a dash_html_component Div object instead of directly trying to manipulate the real DOM (which presumably will conflict with the React DOM).
However my JavaScript skills are currently very weak so I wasn’t able to figure out how to import the Div object from Dash after 15 mins of playing around. If I get some more time I’ll do so more reading and try again.
@chrisbo I had some time this morning to play around with your example. So the pure html way won’t work as they are just strings for the parent div.children. The callback way does save a lot of bandwidth if you have a large data set, i.e. you just dump a text from 0 to 10000000000. But if your purpose is to play with the limit of number of components, we might need something else to optimize that. @chriddyp might have more thoughts on this.
I’ve noticed that since upgrading to 1.0.0, displaying big elements (in my case html tables with ~1000 rows, 75kb of data) is very slow.
When debugging in the browser, it shows that most of the time is spent in “content download”, but when I look in the WSGI logs, the query response time are all much lower than what I see in the browser which is weird. Does the “content download” include the rendering time? In which case maybe that part has got slower.
