1 安装Node.js

# Download and install nvm:
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash
 
# in lieu of restarting the shell
\. "$HOME/.nvm/nvm.sh"
 
# Download and install Node.js:
nvm install 20
 
# Verify the Node.js version:
node -v # Should print "v20.19.1".
nvm current # Should print "v20.19.1".
 
# Verify npm version:
npm -v # Should print "10.8.2".

2 对应版本和配置

package.json

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "description": "",
  "devDependencies": {
    "electron": "^33.0.0"
  }
}

main.js

const { app, BrowserWindow } = require('electron')
 
const createWindow = () => {
  const win = new BrowserWindow({
    width: 1280,
    height: 800
  })
 
  //win.loadFile('index.html')
  //win.loadURL('chrome://gpu')
  //win.loadURL('about:flags')
  win.loadURL('https://baidu.com')
}
 
app.whenReady().then(() => {
  createWindow()
})

3 参数

# mali 1
"start": "electron --show-fps-counter --no-sandbox --enable-gpu-rasterization --enable-gpu-compositing --use-gl=angle --use-angle=gl-egl --enable-features=VaapiVideoDecoder,VaapiVideoEncoder .",
# mali 2
"start": "electron --show-fps-counter --no-sandbox --enable-gpu-rasterization --enable-gpu-compositing --use-gl=angle --use-angle=vulkan --enable-features=VaapiVideoDecoder,VaapiVideoEncoder .",
# panfrost
"start": "electron --show-fps-counter --no-sandbox --enable-gpu-rasterization --enable-gpu-compositing --use-gl=angle --use-angle=gl --enable-features=VaapiVideoDecoder,VaapiVideoEncoder .",

如上面所述，前2种是针对mali闭源gpu的，因为他不支持opengl，只支持opengl es，第3种是panfrost的，支持opengl，性能上实际观感差别不大，fps都能跑到50+

对应3种方式，基本都能开启所有硬件加速和gpu的选项，不过由于cpu太强了，开不开gpu加速，流畅度基本没影响，主打一个心理安慰。