Bokeh page is slow to load

Community Support
1

I’m serving a page with bokeh serve, and when I load the page it is really slow. The page consists of a single table of data. it is taking >35 seconds for the page to load when I serve it without cdn and >25 seconds to load when I serve it with a cdn for the static resources.

Sample code:

import pandas as pd
from bokeh.models.widgets import DataTable, TableColumn
from bokeh.io import curdoc
from bokeh.models import ColumnDataSource
import numpy as np

df = pd.DataFrame(np.random.randn(30,4000), columns=[str(x) for x in range(4000)])
cds = ColumnDataSource(df)

## table
columns = [TableColumn(field=str(ci), title=str(ci)) for ci in df.columns] # bokeh columns
data_table = DataTable(columns=columns, source=cds, name="table", height=1000, width=1900) # bokeh table

## Create the page layout
curdoc().add_root(data_table)
curdoc().title = f"slow"

template:

{% extends base %}

{% block contents %}
<div>
<h1>My data</h1>
    {{ embed(roots.table) }}
</div>
{% endblock %}

I’ve tried in both chrome and firefox.

Here is the console output from chrome:

[bokeh] setting log level to: 'info'
bokeh.min.js?v=4e38fcb7a8f2989d2b1f9d55dee62dec:575 [bokeh] Websocket connection 0 is now open
bokeh-tables.min.js?v=ad0d7e8576738c4158cf2b0850c25a9b:47 [bokeh] jquery-ui is required to enable DataTable.reorderable
render @ bokeh-tables.min.js?v=ad0d7e8576738c4158cf2b0850c25a9b:47
build @ bokeh.min.js?v=4e38fcb7a8f2989d2b1f9d55dee62dec:449
renderTo @ bokeh.min.js?v=4e38fcb7a8f2989d2b1f9d55dee62dec:449
r @ bokeh.min.js?v=4e38fcb7a8f2989d2b1f9d55dee62dec:572
async function (async)
r @ bokeh.min.js?v=4e38fcb7a8f2989d2b1f9d55dee62dec:572
t.add_document_standalone @ bokeh.min.js?v=4e38fcb7a8f2989d2b1f9d55dee62dec:572
t.add_document_from_session @ bokeh.min.js?v=4e38fcb7a8f2989d2b1f9d55dee62dec:574
async function (async)
t.add_document_from_session @ bokeh.min.js?v=4e38fcb7a8f2989d2b1f9d55dee62dec:574
O @ bokeh.min.js?v=4e38fcb7a8f2989d2b1f9d55dee62dec:164
(anonymous) @ bokeh.min.js?v=4e38fcb7a8f2989d2b1f9d55dee62dec:164
(anonymous) @ bokeh.min.js?v=4e38fcb7a8f2989d2b1f9d55dee62dec:185
requestAnimationFrame (async)
(anonymous) @ bokeh.min.js?v=4e38fcb7a8f2989d2b1f9d55dee62dec:185
t.defer @ bokeh.min.js?v=4e38fcb7a8f2989d2b1f9d55dee62dec:185
t.embed_items @ bokeh.min.js?v=4e38fcb7a8f2989d2b1f9d55dee62dec:164
embed_document @ slow:53
(anonymous) @ slow:57
(anonymous) @ slow:73
o.safely @ bokeh.min.js?v=4e38fcb7a8f2989d2b1f9d55dee62dec:583
fn @ slow:47
bokeh.min.js?v=4e38fcb7a8f2989d2b1f9d55dee62dec:166 [bokeh] document idle at 35364 ms
bokeh.min.js?v=4e38fcb7a8f2989d2b1f9d55dee62dec:164 Bokeh items were rendered successfully

Any help would be much appreciated.

2

I am on bokeh v2.2.1 and the dependencies are also at their latest versions.

3

Speaking plainly, if you really need 4000 table columns, then Bokeh is not the appropriate tool. Bokeh works most efficiently when there are relatively few Bokeh objects (dozens), and more data inside larger CDS columns, and this example goes completely against that usage pattern by necessitating 4000 individual TableColumn objects. If you can transpose to 30 columns with 4000 rows, that would probably be suitable for Bokeh.

2 Likes
4

Thanks! That is much faster!

1 Like
5

(…) if you really need 4000 table columns , then Bokeh is not the appropriate tool. Bokeh works most efficiently when there are relatively few Bokeh objects (dozens) (…)

The number of objects isn’t the cause of the slowdown. SlickGrid, the underlying implementation of DataTable widget, is optimized for displaying large number of rows (memory and not display limited), but the number of columns must be small (which is clearly visible under a profiler).