Weird lag when switching tabs with a lot of content in Chrome

[Josh-Cena]

Have you read the Contributing Guidelines on issues?

• [X] I have read the Contributing Guidelines on issues.

Prerequisites

• [X] I'm using the latest version of Docusaurus.
• [X] I have tried the npm run clear or yarn clear command.
• [X] I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• [X] I have tried creating a repro with https://new.docusaurus.io.
• [ ] I have read the console error message carefully (if applicable).

Description

On Chrome, switching tabs with a lot of content causes a perceivable lag.

Reproducible demo

https://docusaurus.io/docs/next/deployment#triggering-deployment-with-github-actions

Steps to reproduce

Open the link above in Chrome.

Click on the "Remote" tab item.

The page freezes for quite a while.

Expected behavior

Tab switches seamlessly.

Actual behavior

Sometimes there's even a loading spinner??

If you switch for a few times, it starts to load normally again, I suppose because of caching.

(The gif is not super clear what's happening because it doesn't show the click operation—every time my cursor moves to a tab heading, I immediately clicked. That "I-beam cursor" is actually a loading spinner, which fails to be captured by the recorder. I hope it can reproduce on others' browsers)

Your environment

• Environment name and version (e.g. Chrome 89, Node.js 16.4): 102.0.5005.115
• Operating system and version (e.g. Ubuntu 20.04.2 LTS): macOS 12.4

Self-service

• [X] I'd be willing to fix this bug myself.

[Josh-Cena]

All the folks on Discord can't reproduce this, but I can reproduce on a fresh site and in Incognito. Will try to debug this on my own.