(Bug report) Lagging Trilium frontend when editing large note

[agentydragon]

Trilium Version

0.57.5

What operating system are you using?

Ubuntu

What is your setup?

Local + server sync

Operating System Version

Pop!_OS 22.04 LTS

Description

I have a long note in my Trilium Notes. When I type into it, instead of seeing every letter as I'm typing, it's laggy to the point where the letters appear only like 2-3 seconds after I type them...

From looking at the code in src/public/app/widgets/type_widgets/editable_text.js, I see that this is a known issue, but I wanted to submit the profile I recorded in Chrome devtools while typing into that note.

Overall it looks like this:

It looks like there's a periodically firing task calling this path, which takes a long time: https://github.com/zadam/trilium/blob/291ef87c9babced60672d59538c2a65c6bb30eef/src/public/app/widgets/type_widgets/editable_text.js#L184

I'm wondering if this could be optimized. The bulk of the time seems to be taken by this.watchdog.editor.setData(noteComplement.content || "");.

I wonder:

• Could we actually skip calling setData in case the editor's view of the data is the same as noteComplement.content?
• Instead of triggering updates every N milliseconds, could we trigger, say, N milliseconds after there haven't been any updates? That way, if you keep typing for 20 seconds, you'd have a smooth typing experience, and the slow save/editor sync would happen only once you're done typing.

Error logs

No response

[zadam]

That's interesting, do you have by chance open the same long note in another tab?

The profiling data you show should normally not happen - the .setData() you see should be triggered only when the note is being updated by something external to the current CKEditor instance - typically by sync or when the same note is opened in a second tab. When the note is opened in one tab only, then there's no need to call this method since the changes happen within the CKEditor, and it updates its internal state automatically. It's only with the second tab (having the same huge note) when we need to sync state from one CKEditor instance to another instance, where we need this long .setData().

Here's what I see on a huge note:

Here the stuttering is caused by something different - periodic auto-save. The majority of the time is spent with serializing the internal CKEditor data model into HTML.

[agentydragon]

I just tried again, making sure that I only have one tab of the large doc open, and I still see the big .setData() calls. I do have a bunch of user scripts, but I don't think they'd cause this, they don't update the content of this page. In case it might have changed recently, I'm on 0.57.5 (build date 2022-12-13T23:08:52+01:00).

As next steps I'll see if I can reproduce this with user scripts disabled and on a sanitized database that I could share.