markdown-react significantly affects rendering.

[benloh]

Using Low-end mobile emulation to throttle network and CPU, rending a 499 node NodeTable (H213FA2020Prokopios) takes about 14 seconds. Of those 14 seconds, 8.5 seconds is eaten up by the markdown-react component.

Removing it, or disabling it, or otherwise figuring out how to use it judiciously would significantly improve performance.

[jdanish]

Is there a way to flag a node as including markdown or not and then only pass it through the renderer if it has actual markdown? I believe it currently only re-renders those nodes if they are edited so it should only be the initial rendering that is slowed by the markdown component, right? Otherwise maybe putting an "include markdown" flag in the template is a good short-term solution since I like it for my small graphs but we might turn it off for these massive ones.

[benloh]

I'm not sure how we would detect if there's markdown...

The fact that this is being called so much suggests there is some other inefficiency at work.

Sounds like we need to invest the time on this one.

[benloh]

Testing...Commenting out the markdown component reduces rendering time on low-end mobile from 14s down to 4.5s.

[kalanicraig]

Seems like making it a flag in the template would give us flexibility. When we know it’ll be a big network we can turn it off.

…

On Tue, Sep 8, 2020 at 11:21 PM benloh ***@***.***> wrote: Testing...Commenting out the markdown component reduces rendering time on low-end mobile from 14s down to 4.5s. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#139 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACKL4NBCJMDNZ24KSIHYC43SE3YDJANCNFSM4RA3IEBA> .

[jdanish]

I'm OK with the flag as a short-term solution as I like to use markdown in my smaller graphs like the CHAT one and yet I don't see it being used really in the larger graphs.

As for something more nuanced ... worst case, I'd think that when a node or edge gets saved, it can compare the returned markdown with the original text. If they differ, it can flip a flag to indicated "required MD" and if it is identical, then the opposite. If we save that with the nodes (including in the DB) then once one client has checked whether a node needs rendering, no one else will need to, and then only rendered nodes will require passing through the renderer. Of course, if every node detail of all 500 has MD it will still be slowed down, but at that point, I think that's OK. Just a thought - I am sure it is a bit more complicated than that.

[benloh]

59ccae1 improves performance by:

1. Removing Markdown component to a separate class
2. Only displaying the Markdown component if there is text.

Performance with "Low-end mobile" is now similar to performance without Markdown.