[BUG] Layout engine much slower on Chrome

When working with complex layouts the layout engine sometimes takes a considerable time to rerender because it has to measure the size of various components. For a long time I thought this was a general issue with the layout engine but it was just pointed out to me that this is much worse in Chrome.

In the contrived example below we have a reasonably complex layout of rows and columns and keep appending new rows with some text and plots.

from bokeh.layouts import Row, Column, Spacer
from bokeh.models.widgets import Div, Slider, Button
from bokeh.plotting import figure
from bokeh.io import curdoc

title = Div(text='<h1>Page title</h1>')

header = Row(children=[title, Spacer(sizing_mode='stretch_width'),
                       Div(text="Some link")],
             height=60, sizing_mode="stretch_width")

main = Column(sizing_mode='stretch_width')

def on_click(event):
    p = figure(sizing_mode='stretch_width')
    p.line([1, 2, 3], [1, 2, 3])
    row = Row(children=[Div(text="Some text") for i in range(10)]+[p],
              sizing_mode='stretch_width')
    main.children.append(row)

widgets = [Slider(start=0, end=10, title='Slider %d' % i) for i in range(10)]
button = Button(label='Click me')
button.on_click(on_click)
widgets.append(button)

nav = Column(children=widgets, width=200)

layout = Column(children=[header, Row(children=[nav, main])])

curdoc().add_root(layout)

The layout engine struggles the more items you add with the button presses in Chrome, while in Firefox it hardly slows down. Here are flame graphs generated by recording the performance in the two browsers.

Chrome

Firefox

You will note that it takes <2 seconds in Firefox and ~5 in Chrome. I’m not sure if this is just a Chrome performance issue but it would at least be good to investigate why it’s so much slower and if anything can be done to fix it.

Versions:

Bokeh 1.4.0 Chrome Version 78.0.3904.108 (Official Build) (64-bit) Firefox 70.0.1 (64-bit)

[xavArtley]

Hello don’t know if it helps but there it is performance on windows 10 chrome Version 78.0.3904.108 (Build officiel) (64 bits):

Same test on firefox 60.0.1 (64-bit):

Howver the difference seems mitigate when not using the debugger I made a rough test on 20 clicks an looking the scroll bar updating. It took me 27 seconds on chrome vs 23 seconds on firefox

[bryevdv]

I’m glad to hear of your successes @MarcSkovMadsen if you have some bandwidth in the next few months it would be really valuable to try and distill some small purposeful examples and documentation sections that could benefit all users.