[bug] WebKitWebProces high CPU usage

[xueweiwujxw]

Describe the bug

After compiling on Ubuntu 20.04, I put the output on another Ubuntu 20.04 computer to run. The system on this computer is newly installed. The CPU usage of WebKitWebProcess is abnormally high, but it is normal on my local machine. My web code has not done much, only websocket communication once per second.

Especially after the popup appears, the CPU usage will double directly.

Reproduction

I'm sorry I cannot provide the complete code, but I can explain the frameworks and configuration files I am using.

• package.json

  {
  "type": "module",
  "scripts": {
  "predev": "sh ./scripts/dev.env.sh",
  "prebuild": "sh ./scripts/pro.env.sh",
  "dev": "vite",
  "build": "tsc && vite build",
  "preview": "vite preview",
  "tauri": "tauri"
  },
  "dependencies": {
  "@emotion/react": "^11.10.6",
  "@emotion/styled": "^11.10.6",
  "@fontsource/roboto": "^4.5.8",
  "@mui/icons-material": "^5.11.11",
  "@mui/material": "^5.11.12",
  "@mui/styled-engine-sc": "^5.11.11",
  "@mui/system": "^5.11.12",
  "@mui/x-date-pickers": "^6.0.1",
  "@tauri-apps/api": "^1.3.0",
  "dayjs": "^1.11.7",
  "echarts": "^5.4.1",
  "echarts-for-react": "^3.0.2",
  "multi-provider-react": "^0.1.2",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "react-icons": "^4.8.0",
  "react-is": "^18.2.0",
  "react-router-dom": "^6.8.2",
  "styled-components": "^5.3.8"
  },
  "devDependencies": {
  "@babel/core": "^7.21.4",
  "@babel/eslint-parser": "^7.21.3",
  "@tauri-apps/cli": "^1.3.1",
  "@types/node": "^18.7.10",
  "@types/react": "^18.0.15",
  "@types/react-dom": "^18.0.6",
  "@typescript-eslint/eslint-plugin": "^5.57.1",
  "@typescript-eslint/parser": "^5.57.1",
  "@vitejs/plugin-react": "^3.0.0",
  "eslint": "^8.37.0",
  "eslint-plugin-react": "^7.32.2",
  "eslint-plugin-react-hooks": "^4.6.0",
  "prettier": "^2.8.8",
  "typescript": "^4.6.4",
  "vite": "^4.0.0",
  "vite-plugin-eslint": "^1.8.1"
  }
  }

• tauri.conf.json

  {
  "build": {
  "beforeDevCommand": "yarn dev",
  "beforeBuildCommand": "yarn build",
  "devPath": "http://localhost:1420",
  "distDir": "../dist",
  "withGlobalTauri": false
  },
  "package": {
  "version": "0.1.0"
  },
  "tauri": {
  "allowlist": {
    "all": false,
    "window": {
      "close": true,
      "hide": true,
      "maximize": true,
      "minimize": true,
      "startDragging": true,
      "unmaximize": true,
      "setFullscreen": true
    },
    "shell": {
      "all": false,
      "open": true
    },
    "dialog": {
      "all": false,
      "open": true,
      "save": true,
      "message": true
    },
    "fs": {
      "all": false,
      "readFile": true,
      "writeFile": true
    },
    "os": {
      "all": true
    }
  },
  "bundle": {
    "active": true,
    "icon": [
      "icons/32x32.png",
      "icons/128x128.png",
      "icons/128x128@2x.png",
      "icons/icon.icns",
      "icons/icon.ico"
    ],
    "targets": [
      "deb",
      "msi",
      "dmg"
    ]
  },
  "security": {
    "csp": null
  },
  "updater": {
    "active": false
  },
  "windows": [
    {
      "fullscreen": true,
      "resizable": true,
      "title": "demod-ui-tauri",
      "width": 1200,
      "height": 800,
      "decorations": false,
      "theme": "Light"
    }
  ]
  }
  }

Expected behavior

It shouldn't have such a high usage. On my local machine, it only has a little over 20% usage, but on the target machine, it has at least 700% usage.

Platform and versions

[✔] Environment
    - OS: Ubuntu 20.04 X64
    ✔ webkit2gtk-4.0: 2.38.6
    ✔ rsvg2: 2.48.9
    ✔ rustc: 1.70.0 (90c541806 2023-05-31)
    ✔ Cargo: 1.70.0 (ec8a8a0ca 2023-04-25)
    ✔ rustup: 1.26.0 (5af9b9484 2023-04-05)
    ✔ Rust toolchain: stable-x86_64-unknown-linux-gnu (default)
    - node: 16.19.0
    - pnpm: 7.30.0
    - yarn: 1.22.19
    - npm: 8.19.3

[-] Packages
    - tauri [RUST]: 1.2.4
    - tauri-build [RUST]: 1.2.1
    - wry [RUST]: 0.23.4
    - tao [RUST]: 0.15.8
    - @tauri-apps/api [NPM]: 1.3.0
    - @tauri-apps/cli [NPM]: 1.3.1

[-] App
    - build-type: bundle
    - CSP: unset
    - distDir: ../dist
    - devPath: http://localhost:1420/
    - framework: React
    - bundler: Vite
Done in 3.98s.

local machine: Linux 5.15.0-73-generic #80~20.04.1-Ubuntu SMP Wed May 17 14:58:14 UTC 2023 x86_64 x86_64 x86_64 GNU/Linux
target machine: Linux 5.15.0-67-generic #74~20.04.1-Ubuntu SMP Wed Feb 22 14:52:34 UTC 2023 x86_64 x86_64 x86_64 GNU/Linux

Stack trace

No response

Additional context

No response

[xueweiwujxw]

It seems that the problem is caused by the Mui animation effect. After disabling it with the following code, the usage has significantly decreased, with the highest usage around 100%. This issue usually occurs during page switching or Menu rendering. However, both my local machine and the target machine are using integrated graphics, so it may be because the integrated graphics on my local machine are slightly stronger.

const tstheme = createTheme({
  components: {
    MuiCssBaseline: {
      styleOverrides: {
        '*, *::before, *::after': {
          transition: 'none !important',
          animation: 'none !important',
        },
      },
    },
  },
  transitions: {
    create: () => 'none',
  },
});