Skip to content

perf regression real world use case #13620

Open
@unpseudocomplique

Description

@unpseudocomplique

Vue version

v3.6.0-alpha.1

Link to minimal reproduction

https://play.vuejs.org/#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

Steps to reproduce

Scroll

What is expected?

Smooth scroll

What is actually happening?

Scroll block / bigger delay to display item

System Info

System:
    OS: Windows 11 10.0.26100
    CPU: (16) x64 AMD Ryzen 7 5800X 8-Core Processor
    Memory: 26.43 GB / 47.94 GB
  Binaries:
    Node: 22.14.0 - C:\nvm4w\nodejs\node.EXE
    Yarn: 1.22.22 - C:\nvm4w\nodejs\yarn.CMD
    npm: 10.9.2 - C:\nvm4w\nodejs\npm.CMD
    pnpm: 10.8.0 - C:\nvm4w\nodejs\pnpm.CMD
    bun: 1.2.18 - ~\.bun\bin\bun.EXE
  Browsers:
    Edge: Chromium (133.0.3065.82)

Any additional comments?

Hey, thanks you for your hard work.

Wanted to try vapor mode on a quite heavy gantt.
I had some errors so i cancel, but even without vapor mode enable i saw some perf regression.

So i tryed to make a smaller version of the gantt to do a reproduction. it's not perfect but i belive it's visible even more on the first scroll y axis scroll.

Reproduction link

3.5.17

v3.6.0-alpha.1

you might need to try to update the RESOURCE_COUNT variable depending your computer perf

In the real code, i have 8 named slot, with some use for each day case.

Metadata

Metadata

Assignees

No one assigned

    Labels

    ❗ p4-importantPriority 4: this fixes bugs that violate documented behavior, or significantly improves perf.regressionscope: reactivity

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions