As discussed in #8 bokeh scripts can slow down the rendering of a report when the amount of data is relatively large (a few mb). This can be reproduced with the following report:
Pre-Figure
```{.bokeh format=HTML}
import numpy as np
from bokeh.plotting import figure
from bokeh.models import ColumnDataSource
p = figure(width=200, height=200)
p.circle(x=np.random.random(300000), y=np.random.random(300000))
```
Post-Figure
Opening the rendered HTML will show the text Pre-Figure immediately, but nothing else. Then after some time the plot and the text Post-Figure will appear. When there are many figures and these figures appear "early" this can give the appearance that the file is broken.
Apparently bokeh starts rendering (and blocking) before the browser rendered the rest of the DOM. The DOM is probably already loaded, as the bokeh rendering is only exectued when the DomContent is loaded:
if (document.readyState != "loading") fn();
else document.addEventListener("DOMContentLoaded", fn);
In #8 LaurentRDC suggest using script defer. Unfortunately for inline scripts this is not availabe (source).
My suggestion is to move the script tag that provides bokeh with all the data to the bottom of the document.
This is somewhat of a niche usecase: Data has to be "relatively big" to have a measurable effect (more then >100.000 primitives are required on my computer). There are some bokeh specific workarounds: (1) opengl figures render faster (2) when rendering HTML which gets delivered via a webserver an AjaxDataSource can be used. (2) is not available for standalone HTML files (as to my knowledge local HTML files can't access adjacent json files).
As discussed in #8 bokeh scripts can slow down the rendering of a report when the amount of data is relatively large (a few mb). This can be reproduced with the following report:
Opening the rendered HTML will show the text
Pre-Figure
immediately, but nothing else. Then after some time the plot and the textPost-Figure
will appear. When there are many figures and these figures appear "early" this can give the appearance that the file is broken.Apparently bokeh starts rendering (and blocking) before the browser rendered the rest of the DOM. The DOM is probably already loaded, as the bokeh rendering is only exectued when the DomContent is loaded:
In #8 LaurentRDC suggest using
script defer
. Unfortunately for inline scripts this is not availabe (source).My suggestion is to move the script tag that provides bokeh with all the data to the bottom of the document.
This is somewhat of a niche usecase: Data has to be "relatively big" to have a measurable effect (more then >100.000 primitives are required on my computer). There are some bokeh specific workarounds: (1) opengl figures render faster (2) when rendering HTML which gets delivered via a webserver an AjaxDataSource can be used. (2) is not available for standalone HTML files (as to my knowledge local HTML files can't access adjacent json files).