Description
openedon May 7, 2019
We recently switched to a newer Dash version and noticed our application got considerably slower. While in Dash v0.40.0 it usually took ~20s for a page to load, in the newer versions this goes up to ~55s, or even 90s depending on the browser.
After some digging, it turns out that having a plain HTML table built using dash-html-components considerably slows the page down. We cannot use a dash-table in this case as we need links inside the table.
There is a considerable difference between v0.40.0 and all versions released after, so I'm assuming that whatever is slowing this down was added in v0.40.0. Page load timings for different dash versions and the code examples can be found below.
Any ideas why this became an issue and what can be done to fix this? Thanks!
dash v0.39.0; dash-core-components v0.44.0; dash-html-components v0.14.0; dash-renderer v0.20.0:
- Example 1: ~1s
- Example 2: ~2s
dash v0.40.0; dash-core-components v0.45.0; dash-html-components v0.15.0; dash-renderer v0.21.0:
- Example 1: ~1s
- Example 2: ~2s
dash v0.41.0; dash-core-components v0.46.0; dash-html-components v0.15.0; dash-renderer v0.22.0:
- Example 1: ~1s
- Example 2: ~9-10s
dash v0.42.0; dash-core-components v0.47.0; dash-html-components v0.16.0; dash-renderer v0.23.0:
- Example 1: ~1s
- Example 2: ~9-10s
Example 1:
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
app = dash.Dash()
options = list({'label': 'City %d' % i, 'value': 'city-%d' % i} for i in range(10))
children = []
for i in range(5):
children.extend([
html.Label('Multi-Select Dropdown'),
dcc.Loading(dcc.Dropdown(id='dropdown-%d' % i, options=options, value=['city-0', 'city-1'], multi=True)),
])
app.layout = html.Div(children)
for i in range(4):
@app.callback(
[Output('dropdown-%d' % (i + 1), 'options'), Output('dropdown-%d' % (i + 1), 'value')],
[Input('dropdown-%d' % i, 'value')])
def update_options(value):
return [options, value]
if __name__ == '__main__':
app.run_server(debug=True)
Example 2:
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
app = dash.Dash()
options = list({'label': 'City %d' % i, 'value': 'city-%d' % i} for i in range(10))
children = []
for i in range(5):
children.extend([
html.Label('Multi-Select Dropdown'),
dcc.Loading(dcc.Dropdown(id='dropdown-%d' % i, options=options, value=['city-0', 'city-1'], multi=True)),
])
children += [html.Tr([html.Td('Label'), html.Td(html.A('?action=enable'))])] * 800
app.layout = html.Div(children)
for i in range(4):
@app.callback(
[Output('dropdown-%d' % (i + 1), 'options'), Output('dropdown-%d' % (i + 1), 'value')],
[Input('dropdown-%d' % i, 'value')])
def update_options(value):
return [options, value]
if __name__ == '__main__':
app.run_server(debug=True)