Notebook performance improvements for April

[mjbvz]

• Keep view model on webview side (Flicker while executing cell #119582)

  • needs to acknowledge height

• Warmup viewport for all cells

  • Preload outputs like we already do for the markdown cells

• Adjusting the structure so that the container uses top while outputs are relative position @mjbvz

[rebornix]

A bit more details of why/how:

Keep view model on webview side

Currently we store all the layout info in main frame, and we send scrollTop position update requests to the webview whenever there is a layout change, even if the layout change is coming from the webview. For example, say we have a code cell with one output in the webview, followed by a markdown cell.

1. When the output height increases, it sends a dimension update event to main frame
2. In main frame, we will adjust the top position of the markdown cell (view model info), which will send a scrollTop adjustment request for the markdown cell
3. The webview receives the event, and the change the top of the markdown cell

Though the latency between main frame and webview is low, it can still be tens of milliseconds between step 1 and 3, then the outputs and webview overlap with each other: #119582.

One idea we have is we keep a copy of layout info in the webview, and update them first when output or markdown layout changes, the workflow will be

1. Output height increases, update the markdown cell top property immediately, and send a dimension update event to main frame
2. In main frame, update the top position of the markdown cell in view model, invalidate the cache of markdown/output, send an acknowledge message to the webview, which contains the offset of cells affected
3. The webview receives the message, update the top property of each cell affected again. Ideally, this update is effortless as the top position doesn't change at all

[mjbvz]

Pushed changes to the notebook dom structure. This includes:

• Flattening the structure of markdown cells
• Use relative offsets for output cells

[vscode-triage-bot]

Pinging notebook topic followers: @claudiaregio @rchiodo @greazer @DonJayamanne @jilljac

[rebornix]

@mjbvz discussed another approach to avoid outputs overlapping with markdown cells and code cells in a split second:

• Output rendered, size grow. Broadcast the height to UI but set maxHeight: 0; overflow: hidden on its container. Thus the outputs are not overlapping with any cell
• UI receives the event, adjust offset of code cells
• UI sends events to the webview to adjust the offsets of markdown cells
• UI sends an ack event to the webview
• Webview receives ack, reset maxHeight of the output container, the output will then become visible.

A comparison of OSS with this experiment and Insiders

Video

Screen.Recording.2021-04-09.at.11.44.45.AM.mov

Insiders (right)

When the output is rendered, it will overlap with code cells

And in next tick, code cells are pushed down, but markdown cells are not yet

OSS (left)

We pushed down code cells first

and then next tick

[rebornix]

The above experiment is now in main d3394d2 .