Vue version

3.2.47

Link to minimal reproduction

https://github.com/mathias22osterhagen22/force-reflow

Steps to reproduce

1. npm install
2. npm run dev
3. F12 open the console
4. Hit F5 multiple times till the message appears in the console: [Violation] Forced reflow while executing JavaScript took xxx ms (make sure to check all messages)

What is expected?

No [Violation] Forced reflow while executing JavaScript took xxx ms message

What is actually happening?

Get a [Violation] Forced reflow while executing JavaScript took xxx ms message in the console

System Info

Reproduction: 

  System:
    OS: Windows 10 10.0.22000
    CPU: (20) x64 12th Gen Intel(R) Core(TM) i7-12700H
    Memory: 10.45 GB / 31.71 GB
  Binaries:
    Node: 18.12.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.18 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 8.19.2 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.22000.120.0), Chromium (112.0.1722.64)
    Internet Explorer: 11.0.22000.120
  npmPackages:
    vue: ^3.2.47 => 3.3.4 

Prod:

  System:
    OS: Windows 10 10.0.22000
    CPU: (20) x64 12th Gen Intel(R) Core(TM) i7-12700H
    Memory: 10.22 GB / 31.71 GB
  Binaries:
    Node: 18.12.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.18 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 8.19.2 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.22000.120.0), Chromium (112.0.1722.64)
    Internet Explorer: 11.0.22000.120
  npmPackages:
    vue: ^3.2.47 => 3.2.47

Any additional comments?

Sometimes it doesn't happen on the reproduction but I have it systematically on the production project.

I don't know if it could be linked but I know that on the reproduction project I can trigger the warning message more often by enabling the Wappalyzer extension.

I tested with all extension disabled on production and and still gets the warning violation message.

I'm sorry, but I'm not sure what you are expecting us to do here.

The warning isn't Vue specific, nor does reproduction show that it is caused by something that should be "fixed" in Vue core. If rendering a huge table causes a reflow, it could theoretically trigger the same warning without Vue involved. I don't see there's anything actionable here.