Decorations are slow

We are investigating huge performance issues since we updated our app to Slate 0.33, and have noticed that using a syntax highlighting plugin, like slate-prism, slows everything a lot.

• Slate version: 0.33.3 on Chrome
• Example: visit https://gitbookio.github.io/slate-prism/ paste a non-trivial code snippet (~100 lines) and start typing inside it

I have measured our the time to React.renderToString our app on a reasonable page containing code blocks like this one. Here are the times:

• with highlighting: 16437ms to render the app and document
• without: 899ms to render the app and document

I also measured the time spent in the calls of the decorateNode of the plugin, which amounts to 188ms. So the issue most likely comes from Slate and the way decorations are applied and rendered.

[jasonphillips]

So this is probably not the final / optimal solution to the problem, but may indicate a direction:

I can see that the main slowdown is simply that the react component for each child node (of a decorated code block, etc) currently receives all the decorations in its props (which may be hundreds in this case) and then iterates over all of them. What is needed is for decorations to not simply be passed to all children down the tree without discretion, and instead to be sent only to the children that overlap the decoration ranges.

Here I attempted that just on the slate-react side, by having each Node component order its decoration ranges around its children in advance and only pass down the ones that overlap each child:

https://github.com/ianstormtaylor/slate/compare/master...jasonphillips:speed-up-decorations-rendering

That leads to a significant speed-up, which you should be able to see here (I merely updated the slate-prism demo page with this build):

https://jasonphillips.github.io/slate-prism/

But it’s still not as fast as it could be. I’m relying on node.getKeysAsArray() for my orderings and then loop through the children, but there are surely faster ways. That being said, this is already much faster than the current practice of naively passing all decorations down the tree whether or not they fall outside the scope of each child node.

[Soreine]

I’ll see if I can improve upon your design @jasonphillips. As is, the performance feels good already.

I was thinking about converting the list of decorations to a sorted list of trivial decorations (a decoration with start and end on the same text key) and only pass down the decorations needed.

I’ll have a look at @zhujinxuan PRs to see if there are more opportunities