Severe performance issues with Obsidian 1.7.4

[rotane]

Describe the bug
Since Obsidian updated to 1.7 a few days ago, i'm getting severe lag when typing. I've identified the culprit to be Iconize, and more precisely, when "toggle icons in links" is set to on.

When editing a note that has at least one linked file (which also shows an icon), typing has a serious delay. As soon as i disable all community plugins including Iconize, typing is practically instant. But once Iconize is present again (even if it's the only active community plugin), the input lag is back.

Expected behavior
Typing should be instantaneous.

Console Infos
Here's the console output from the Developer Console:

I click anywhere in a note:
[Violation] Forced reflow while executing JavaScript took 33ms

I type "asd":
[Violation] Forced reflow while executing JavaScript took 78ms
[Violation] Forced reflow while executing JavaScript took 72ms
[Violation] Forced reflow while executing JavaScript took 68ms

I wait and type "asd" again:
[Violation] Forced reflow while executing JavaScript took 85ms
[Violation] Forced reflow while executing JavaScript took 75ms
[Violation] Forced reflow while executing JavaScript took 68ms

I type SHIFT-POS1:
[Violation] Forced reflow while executing JavaScript took 53ms

I hit DELETE:
[Violation] Forced reflow while executing JavaScript took 117ms

I keep my finger on any button go get something like "aaaaaaaaaaaaaaaaaaaaaaa":
[Violation] Forced reflow while executing JavaScript took 85ms
[Violation] Forced reflow while executing JavaScript took 215ms
[Violation] Forced reflow while executing JavaScript took 549ms
[Violation] Forced reflow while executing JavaScript took 692ms

(Obsidian takes a good full second until it shows me "aaaaaaaaaaaaaaaaaaaaaaa")

… and so on.

Additional context

• I'm on Windows 10, Core i5 4440 (4× 3.1 GHz), 16 GB RAM.
• I completely uninstalled Obsidian and reinstalled it with the current installer. No change.
• Iconize Settings show "Emoji Style: Native", Icon Identifier ":", "Use icon in frontmatter: off"
• Once i toggle "icons in links" to off, typing becomes again instant.
• Turning "Toggle icons while editing notes" to off helps, but only a bit.

[FlorianWoelki]

Unfortunately, I am not able to reproduce this. Do you maybe have a minimal reproduction example? Maybe some smaller notes that I can use to reproduce the issue?

[rotane]

I just created a test vault and found this after some tinkering: Maybe you can reproduce this when you set your Vault settings like this:
Files and Links → New link format → "Absolute Path in vault". (Then you need to update a link in your test vault/note to the new format or create a new link to test it.)

(Sidenote: Once you do this, this issue is back: #445. It appears fixed when the setting is set to the default "shortest path possible".)

[LandonSchropp]

I don't have repo steps, other than it seems to be occurring within a note that has a bunch of icons, both with the : syntax as well as in the icon property of linked files.

Here's what the performance trace looks like as I'm typing:

[arteny]

reporduced for me same way, it is not possible normally edit note when Toggle icons for links is enabled. Any symbol change delays for 1 sec.

[JigenDD]

This has been a HUGE problem for me as well: A longer note (1000 words+) with lots of links and/or headings with icons will result in major slowdown when typing (i.e. imputing new characters with the keyboard). Scrolling with the wheel or changing tabs has no slowdown whatsoever though.

All in all, the "typing lag" will manifest itself more the more icons there are (which WILL happen as you add more text)... To the point typing just becomes unbearably sluggish and irresponsive (some keys actually not even registering and not showing up in the screen) and you just have to deactivate Iconize.

Deactivating Iconize instantly solves the "typing lag" problem, so it is pretty clear this plugin is the problem.

• In my experience, this lag is only noticeable in notes going over the 1000-1500 word mark, and with an abundance of links (with icons) and headings (with icons). Short simple notes with a handful of links will not reveal this problem.
• I am using icons both in headings (H1, H2, H3, etc), and in linked notes (which have icons added to them via the icon property.

[wallynm]

I was able to reproduce this issue, with notes very small, you only need to have duplicate several times some link with icons, and as the note have more and more of those icons, the page becomes very slow, for every icon, it becomes even slower.

[wallynm]

After several tests, i've tried several older versions of Obsidian and all of them the performance issue was still present, tried disabled all icons, left only the custom ones and the slow was still going. After several trials, i've disabled my Theme (currently using "Border" theme from store) and my issue was related with my theme in the end.

Gonna try identify what's the issue with this teme and if identify something i get back here (:

[wallynm]

Ok, just found out that im my case - theme "Border" were responsible for the perf issue, few classes was causing the problem:

body:not(.is-mobile) .workspace::before {
    transition: width var(--anim-out), height var(--anim-out);
}

body:not(.is-mobile):has(.mod-top>.workspace-tab-header-container:hover, .titlebar-button-container:hover, .status-bar:hover) .workspace::before {
    transition: width var(--anim-out), height var(--anim-in);
}

body:not(.is-mobile):has(.workspace-ribbon.side-dock-ribbon:hover) .workspace::before {
    transition: width var(--anim-in), height var(--anim-out);
}

Not really sure what they're customizing, but i think while were typing those divs are updating and making a lot of calculations because of animation property.

Don't know if other users have the same issue as i, but a easy way to identify is try to disable the theme and see if generate any impact on the perf typing with icons configured. While updating CSS i've had to reload obsidian window to update CSS changes and see if the perf issues was solved while i was disabling some CSS snippets.

Update:
Seems that those other classes are impactating aswell:

.is-hidden-frameless .workspace-split.mod-vertical>*>.workspace-leaf-resize-handle,
.is-hidden-frameless .workspace-split.mod-left-split>.workspace-leaf-resize-handle,
.is-hidden-frameless .workspace-split.mod-right-split>.workspace-leaf-resize-handle {
    height: calc(var(--divider-vertical-height) - var(--header-height) - 4px);
}

.workspace-split.mod-vertical>*>.workspace-leaf-resize-handle,
.workspace-split.mod-left-split>.workspace-leaf-resize-handle,
.workspace-split.mod-right-split>.workspace-leaf-resize-handle {
    height: calc(var(--divider-vertical-height) - 4px);
}

But I couldn't confirm. Sometimes it slows down with those applied, sometimes not. For sure, it's going to leave without them.

After more fewer tests, adding several icons (over 50) to the same page, the typing became slower even with themes disabled

Tests made on Macbook M3
Obsidian version: 1.5.11
Obsidian version: 1.6.3
Obsidian version: 1.6.7
Obsidian version: 1.7.5
Obsidian version: 1.7.6

[vickychijwani]

I have the same issue since Obsidian 1.7.x in a large note with dozens of links. I was not having issues with the same note prior to Obsidian 1.7.x.

I am attaching a performance trace which clearly shows all the time is being spent recalculating styles, just as @LandonSchropp mentioned: Trace-20241113T173428.json.

The trace points to this piece of code as the trigger for an expensive forced reflow on every keypress:

obsidian-iconize/src/lib/util/text.ts

Line 3 in 14da152

getComputedStyle(document.body).getPropertyValue('--font-text-size') ?? '0',