N8N v0.138.0 UI Performance Issues

dakotaheyman · September 29, 2021, 5:35pm

Hey there,

I noticed a negative change in performance when upgrading from 0.137.0 to 0.138.0 (and all updates since then). The User Interface is much slower when you open up the Node Editor to see output and change parameters. The actual execution seems unchanged but the interface definitely seems slower to me.

Is this a known issue and being worked on?

Thanks!

Jon · September 29, 2021, 5:38pm

Have you tried the latest version? 139.1 has some fixed for the ui in it so could be worth going to the latest 140 and seeing if it changes anything for you.

Release notes link is below if you wanted to take a look.

jhambach · September 29, 2021, 5:52pm

We are on 139.1 and are having the page lock up much more often now, I’m having to wait/kill the chrome tab often since upgrading.

Jon · September 29, 2021, 5:55pm

Is it on any specific node or while a workflow is running in the editor?

dakotaheyman · September 29, 2021, 5:57pm

I just tried v0.140.0 and it seems the same to me. It doesn’t seem to be specific to any specific node or while the workflow is running. For me, the issue is when I am creating a workflow, it takes longer to load the node details and use the dropdown menus to add parameters. Additionally, after a workflow has executed, it takes longer than usual to see the output. Old versions of n8n (0.137 and before) were very snappy but now it appears sluggish whenever I try to get into the Node Details panel

Jon · September 29, 2021, 6:00pm

What browser are you using and what version is it? It may help reproduce the issue or find a pattern.

jhambach · September 29, 2021, 6:07pm

Happens to me most often when I’m running a workflow with SplitInBatches, usually giving me a memory error. This is when the workflow is not running.

dakotaheyman · September 29, 2021, 6:31pm

Hey @Jon , great idea as I got very different results per browser:
I am running MacOS Catalina 10.15.7

Here are the browsers and their versions:
Chrome Version 93.0.4577.82 - This is what I was originally using, this is the slowest performance
Safari Version 14.1.2 (15611.3.10.1.5, 15611) - This runs by far the best and I see no performance issues at all, very snappy
Edge Version 93.0.961.52 - This runs better than Chrome but worse than Safari, somewhere in the middle

Jon · September 29, 2021, 6:34pm

That is good to know, hopefully one of the devs will be able to reproduce with Chrome. Edge uses the same underlying engine now so it is good that there is a bit of a slow down with it as well.

Mutasem · September 29, 2021, 7:59pm

Thanks for sharing. I have tried to reproduce the issue on Chrome but no luck so far.
What might be helpful is a performance recording from the performance tab when you run into an issue. That helped us before identify times when Vue reactivity went into overdrive and the ui got sluggish.

Mutasem · September 29, 2021, 8:40pm

@dakotaheyman can you please try upgrading to Chrome 94 since you are on Chrome 93?
There seems to be some complaints around Chrome 93 performance (for example around svg rendering, and we added the blurring effect to the background).
@RicardoE105 reported the same issue but after upgrading from 93 to 94, the UI was snappy again for him.
@jhambach idk what version or browser or using, but if it’s Chrome less than 94, can you also try upgrading?

dakotaheyman · September 30, 2021, 2:25pm

Hi @Mutasem thanks for looking into this! I just upgraded to Chrome 94 (Version 94.0.4606.61) and I see the same issues. Based on your suggestion I recorded the performance. For the recording, I opened up the FTP Node and clicked on the dropdowns and then exited the node.

How do I upload a file? I dont see a way to upload anything except pictures

mutdmour · September 30, 2021, 2:53pm

That’s disappointing… Maybe you can upload it to dropbox or something and send me a link?

Just to rule it out completely, if you can, can you disable the backdrop filter effect on backgrounds?

github.com

n8n-io/n8n/blob/3d6b40b8525e7afa471b6cc10b39be0c303743c2/packages/design-system/theme/src/common/popup.scss#L39

      
        
            	}
            }
            
            
.v-modal {
            	position: fixed;
            	left: 0;
            	top: 0;
            	width: 100%;
            	height: 100%;
            	background-color: var.$popup-modal-background-color;
            	backdrop-filter: blur(4px) opacity(1);
            }
            
            
@include mixins.b(popup-parent) {
            	@include mixins.m(hidden) {
            		overflow: hidden;
            	}
            }

You can do it directly from the console (like in this screenshot) and see if it makes any difference

dakotaheyman · September 30, 2021, 3:32pm

@mutdmour - I disabled the backdrop-filter and that completely resolved the issue! So I’m not sure what the long term resolution is but that definitely seems to be the root cause!

mutdmour · September 30, 2021, 6:15pm

thank you for testing it out.
it’s a nice-to-have feature.
removed it here remove backdrop filter by mutdmour · Pull Request #2268 · n8n-io/n8n · GitHub
will be included as part of the next release.

dakotaheyman · September 30, 2021, 6:34pm

@mutdmour Thanks so much! I really appreciate the amazing support that you and all the other n8n Devs provide!

jan · September 30, 2021, 9:30pm

Fix got released with [email protected]