Much worse performance on Safari after rendering a large list

[richard-viney]

Problem

I have an app which shows a tree structure, and there's a level in the tree that, when opened, shows ~2000 child items. Expanding the first of those 2000 child nodes is very snappy on Firefox and Chrome, but on Safari takes ~20-30 seconds. Interestingly, expanding the first of the child nodes is the slowest, expanding the last of the child nodes is instant, and the delay is proportional to how many DOM elements exists after the node being expanded. On Chrome and Firefox everything is instant.

Maybe there's some DOM or other operation being done on child nodes that's particularly slow on Safari?

Steps To Reproduce

Steps to reproduce the behavior:

1. Open the affected app which is deployed on GitHub Pages here: https://dcmfx.github.io/dcmfx-playground/
2. Drop this file onto the page to load it: https://drive.google.com/file/d/1u41V9BOI5FMkz690IpePDNEOFQ9OK5Oy/view?usp=share_link
3. Scroll down to "(5200,9230)" and expand it to display 2161 child items.
4. Click on "Item 1"
5. On Safari 17.6 on macOS this will take a very long time (20-30s) to expand. On Chrome and Firefox all items open instantly.

Expected behavior

The performance of expanding items in the tree should be comparable in Safari to Chrome and Firefox.

Environment:

• Dioxus version: 0.6.0-alpha-3
• Rust version: 1.81.0
• OS info: macOS 14.6.1
• App platform: web
• Browsers: Safari 17.6, Firefox 130, Chrome 129

Questionnaire

I'm interested in fixing this myself but don't know where to start

[ealmloff]

It looks like the major performance difference is just recalculating styles. In chrome it takes ~50ms. In safari it takes ~1s. I'm not sure how actionable this issue is for Dioxus. Browsers have different performance characteristics that Dioxus doesn't have control over. If this is specifically triggered by the way Dioxus adds that many elements, then this might be something we could fix, but I don't see anything suspicious in the dev tools. Recalculating styles is being batched properly in both browsers. If it is just slow to calculate styles when adding that many elements regardless of the method in safari, there isn't anything Dioxus can do

If you want to work on debugging this issue, try creating a plain javascript/html script with the same css that adds that many elements. If appending children manually with javascript with the same html + css is much faster, then we might be using operations that end up invalidating styles on more nodes than we need to when applying mutations

[richard-viney]

Thanks!

I will look into whether the current CSS is somehow triggering a slow path on Safari, and then try to create an equivalent plain HTML/CSS demo that has no performance issues, indicating that something might be fixable in Dioxus.