# Slow loading editor - mermaid?

**URL:** <https://discourse.nodered.org/t/slow-loading-editor-mermaid/88990>\
**Category:** General\
**Created:** [26 June 2024 16:26 UTC](https://discourse.nodered.org/t/slow-loading-editor-mermaid/88990 "2024-06-26T16:26:15Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [26 June 2024 16:26 UTC](https://discourse.nodered.org/t/slow-loading-editor-mermaid/88990/1 "2024-06-26T16:26:16Z")

</div>

When I reload the editor page it often takes 20 seconds or so, which is painful as I am debugging and have to keep restarting. This is running node red on an i5 Ubuntu machine with the browser on the same machine.

When I look at the network tab most things are milliseconds, but I see

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/8/78affed57fa8990b215a9a1632cf5327b79deebb.png)  
and often it is more time than that.  
The URL is [http://localhost:1880/vendor/mermaid/mermaid.min.js?\_=1719418305320](http://localhost:1880/vendor/mermaid/mermaid.min.js?_=1719418305320) and if I put that in the browser it comes back instantly.  
The other large item fetched is [http://localhost:1880/nodes?\_=1719418305318](http://localhost:1880/nodes?_=1719418305318) which is 1.7MB and takes 94ms, so it does not appear to be a network problem.

I am using NR v4.0.0 but I don't think this is a new issue.

Any suggestions?

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [26 June 2024 19:44 UTC](https://discourse.nodered.org/t/slow-loading-editor-mermaid/88990/2 "2024-06-26T19:44:57Z")

</div>

Interesting. On my dev PC (W11, i9, 32GB RAM), it is still taking 4 seconds. But the most telling thing is that it is not being cached and that is surely wrong.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/f/4f77b630b36bb40051cde2f8aaad74981f7597a6.png)

Other scripts are cached correctly (return a 304 status as expected.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/b/9b2e95a241e71374a0649d54365455f184e4af54.png)

And the problem is that the cache-buster id on that resource is changing on each load so it can't be cached. Surely a bug?

Plugins also not being cached which may also be wrong? Though that is tiny on my system.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/b/cb6ff3f0940005ae6f738a5be285feccca86fd8a.png)

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [26 June 2024 19:58 UTC](https://discourse.nodered.org/t/slow-loading-editor-mermaid/88990/3 "2024-06-26T19:58:00Z")

</div>

> [@TotallyInformation](#):
>
> And the problem is that the cache-buster id on that resource is changing on each load so it can't be cached. Surely a bug?

Hmm, yes, that is not ideal.

Have raised [mermaid loading using non-standard cache busting · Issue #4810 · node-red/node-red · GitHub](https://github.com/node-red/node-red/issues/4810) to address it.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [26 June 2024 20:04 UTC](https://discourse.nodered.org/t/slow-loading-editor-mermaid/88990/4 "2024-06-26T20:04:01Z")

</div>

What is also strange:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/0/80f9ec5261148c3dc65e6b12e239ade634f44369.png)  
(with the cache turned off)

Though not the largest resource, it takes far longer than anything else to load:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/d/3d52e29cc6e6e6f7d94836df9f84e7b2c76c0d95.png)

Not sure why that is. Does the network time column include startup processing time for the library?

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [26 June 2024 20:26 UTC](https://discourse.nodered.org/t/slow-loading-editor-mermaid/88990/5 "2024-06-26T20:26:33Z")

</div>

The mermaid library is dynamically loaded the first time it's needed - or something like that. Unlike the other libaries that are all loaded as part of loading the editor.

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [26 June 2024 20:38 UTC](https://discourse.nodered.org/t/slow-loading-editor-mermaid/88990/6 "2024-06-26T20:38:13Z")

</div>

> [@knolleary](#):
>
> The mermaid library is dynamically loaded the first time it's needed

In that case should it even get loaded when I refresh the editor page (without anything open)?

---

<div class="post-metadata">

**Author:** ![arturv2000](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/arturv2000/32/88724_2.png) [@arturv2000](https://discourse.nodered.org/u/arturv2000)\
**Post date:** [27 June 2024 18:12 UTC](https://discourse.nodered.org/t/slow-loading-editor-mermaid/88990/7 "2024-06-27T18:12:27Z")

</div>

Just checked this, and it is "bizarre"...

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/1/911714d61399967738f728a3a6d33eff484de21b.png)

More than one refresh.

It real seems that the mermaid library takes a very long time downloading, but the strange part is that there are others "pieces" that are larger and takes lower time.

In the case of the download of the mermaid, wireshark indeed has some big gaps, and complains about some things...

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/9/f9ff6ad7532a56afb001cbae7a98adf29afa0651.png)

This was in a local network.

Via external server, it also takes quite some time, but other "large" chunks also take their time...

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/8/98552268e537a199f8126a27c2fe9c2e05e86799.png)

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [27 June 2024 20:11 UTC](https://discourse.nodered.org/t/slow-loading-editor-mermaid/88990/8 "2024-06-27T20:11:04Z")

</div>

Could it just be that the processor is bogged down loading the flows at the time mermaid is fetched and so the fetch slows down?

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [27 June 2024 20:39 UTC](https://discourse.nodered.org/t/slow-loading-editor-mermaid/88990/9 "2024-06-27T20:39:32Z")

</div>

Not sure, but here is mermaid loaded direct from JSDelivr in a fairly empty uibuilder page:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/5/b5b75ed5c677bfd0ed634e597da39b125bd802fc.png)

```html
    <!-- #region Supporting Scripts. These MUST be in the right order. Note no leading / -->
    <script defer src="https://cdn.jsdelivr.net/npm/mermaid@10.9.1/dist/mermaid.min.js"></script>
    <script defer src="../uibuilder/uibuilder.iife.min.js"></script>
    <script defer src="./index.js">/* OPTIONAL: Put your custom code in that */</script>
    <!-- #endregion -->

```

Not only is it MUCH smaller, it loads in a reasonable time. Weirdly small.

Installing the mermaid npm package in uibuilder and calling the local version gives this:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/4/749d827ceceee5dd912486bd80cfe202bdba5f8f.png)

```html
<script defer src="../uibuilder/vendor/mermaid/dist/mermaid.min.js"></script>

```

Which is obviously closer in size but as you can see only requires 50ms.

Just for fun, I also loaded it as a module as recommended in the docs:

From CDN:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/6/16f823b0acf8189e16fdf9097a9fdf9cf7c2d57e.png)

Local:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/f/3f57cb5cbbc9ba29fe27797ab6a95c72fe11d232.png)

The ESM version is so small because it is just this:

```auto
import { b9 } from "./mermaid-dcacb631.js";
export {
  b9 as default
};

```

Funky stuff!

---

<div class="post-metadata">

**Author:** ![arturv2000](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/arturv2000/32/88724_2.png) [@arturv2000](https://discourse.nodered.org/u/arturv2000)\
**Post date:** [27 June 2024 21:04 UTC](https://discourse.nodered.org/t/slow-loading-editor-mermaid/88990/10 "2024-06-27T21:04:45Z")

</div>

> [@Colin](#):
>
> Could it just be that the processor is bogged down loading the flows at the time mermaid is fetched and so the fetch slows down?

On the server, i don't so. At least checking the CPU usage via pm2 for the node-red process nothing in particular when loading the editor.

On the browser, yes, according to the task manager (from Edge) the tab goes up to 110~150 in this PC (i7-8550U)

Just did a small test, even using node-red "local" (127.0.0.1) the time that appears on the dev tools is more or less the same...

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/1/91c6bba52b69c68d25b37a3880fd9702bdcd89bd.png)

But Wireshark between the request and the final answer (HTTP/1.1 200) only takes 69ms.

The same download from a raspberrypi (local network), browser says 1.3s wireshark 0.5s.

It seems that the times shown in the devtools includes also some extra processing of the resource and not only the download time

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [28 June 2024 13:43 UTC](https://discourse.nodered.org/t/slow-loading-editor-mermaid/88990/11 "2024-06-28T13:43:25Z")

</div>

I've pushed the fix for the issue. We'll start caching the mermaid library properly with 4.0.2.

> <https://github.com/node-red/node-red/pull/4817>
>
> By default \`$.getScript\` will append a timestamp-based query param to ensure the… script doesn't get cached by the browser. This is entirely not what we want it to do.
> 
> We already have a cache-buster query param we use on all asserts loaded directly from the base html. This cache-buster value only changes when a new NR version is installed - which is when we want to ensure the browser loads the new version of the assets.
> 
> This PR updates the mermaid loading code to use our cache-buster value and not the timestamp one. This will save over 3Mb of traffic on each editor load (after the initial load).

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [1 July 2024 18:44 UTC](https://discourse.nodered.org/t/slow-loading-editor-mermaid/88990/12 "2024-07-01T18:44:39Z")

</div>

Having upgraded to 4.0.2 I am still not seeing mermaid being cached. It appears to have a cache-control max-age of 0, which I think says not to cache it.

---

<div class="post-metadata">

**Author:** ![arturv2000](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/arturv2000/32/88724_2.png) [@arturv2000](https://discourse.nodered.org/u/arturv2000)\
**Post date:** [1 July 2024 19:36 UTC](https://discourse.nodered.org/t/slow-loading-editor-mermaid/88990/13 "2024-07-01T19:36:08Z")

</div>

Just installed 4.0.2.

It is being cached

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/a/ba42deeb5a5de6f59bfef98f5137d9ff078d55f6.png)

It continues to take a long time according to the browser console, but that is a browser issue (probably the time it tables to load/parse the file)

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [1 July 2024 20:34 UTC](https://discourse.nodered.org/t/slow-loading-editor-mermaid/88990/14 "2024-07-01T20:34:12Z")

</div>

> [@arturv2000](#):
>
> but that is a browser issue (probably the time it tables to load/parse the file)

I don't think so actually since I tested it on a separate page and whilst it is pretty big, it only took 141ms from CDN! Not the 3.6s it is taking on my beefy dev PC.

~~And, I'm afraid it isn't caching. While the cache-buster now remains static, it is still showing a response code of 200 meaning that the browser can't cache it locally. I should be seeing a 304 on a reload.~~

Oops, my bad, I forgot to turn off disabled cache in dev tools!

So it is caching - but it is still taking 3 1/2 seconds to load for some reason. It doesn't do that on simpler web pages.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/7/37d979b23496ce5e217d942e899ff24eaa66faa8.png)

> - **Content Download**. The browser is receiving the response, either directly from the network or from a service worker. This value is the total amount of time spent reading the response body. Larger than expected values could indicate a slow network, or that the browser is busy performing other work which delays the response from being read.

Content download for the mermaid library is showing as 4s on my device. To me, the most likely issue is that the page load is processing a bunch of other stuff at the same time. I can't think of another reason this would take so long for Node-RED but not for another page.

Also not sure if this is related:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/1/31e6f0c976b7638c20d3ec4dd41ee968f86685d9.png)

But it is in a similar place in the call stack as far as I can tell.

---

<div class="post-metadata">

**Author:** ![arturv2000](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/arturv2000/32/88724_2.png) [@arturv2000](https://discourse.nodered.org/u/arturv2000)\
**Post date:** [1 July 2024 21:20 UTC](https://discourse.nodered.org/t/slow-loading-editor-mermaid/88990/15 "2024-07-01T21:20:08Z")

</div>

It's defenitly something to do with node-red, and the browser / node-red being busy loading other stuff.

According to wireshark, the network request takes a couple of milliseconds

Just tried one thing, to load an empty project (new created project) and the difference is significant

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/3/03d28b11735c4641dce96ba02b9dc2f3a5ff2764.png)

The first three times and the last, are with the default test project I have (it has around 100 nodes and some 7 tabs).

The other loads, are with a new / empty project.

If the sidebar (help, debug, etc..) is hidden (collapsed) it seems to help.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [29 September 2024 21:20 UTC](https://discourse.nodered.org/t/slow-loading-editor-mermaid/88990/16 "2024-09-29T21:20:53Z")

</div>

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.