Description
Demo on the current UI, site with a lot of nodes in the tree, production context (notice little hiccups when typing):
Goal: when editing text inline, there should be 0 hiccups and fps drops. E.g. even when just pressing and holding a button it should just flawlessly type in more characters.
One obvious way to solve that is to just debounce ckeditor input with a big timeout. This is dangerous, since if the editor quickly edits something and then closes the tab, the data would be lost. And even this way, when the user starts typing during saving, he would feel that little hick up.
Proper way to solve it would be to make those updates to feel unnoticeable, that is to fit them into frame interval or close to it (16ms).
When we edit properties of some node, these things are re-rendered:
- Publish button indicator and other small things. That's cheap
- Given content node and all of its parents both in content and document trees. This happens because Node render also depends on chilNodes. Before all nodes used to re-render, but I fixed that bug (it was causing up to 1.5s hickups on sites with many nodes!)
- Basically all of inspector is re-rendered, because we pass a node everywhere, to every single inspector editor. If we only passed a property, and not the whole node, that would make inspector editor to re-render only when that particular property changes. But that would limit our API and just wouldn't work in some cases.
Ways to optimize:
- Somehow be clever and reduce the number of components that need to be re-rendered. E.g. try to make a node in the tree not dependent on its children.
With inspector editors it's a lot harder to do the same thing. - Optimize the rendering of components. If components need to be re-rendered, maybe it's possible to make that happen quicker. E.g. extract all expensive calculations (like calculation of inspector tabs/groups) into external memoized functions.
- Do something very clever, which I'm not aware of ;-)
Anyways, I picked a low-hanging fruit by fixing the tree re-render, waiting to hear your thoughts about what else we should do next.