오프스크린 렌더링은 비트맵에 브라우저 윈도우의 컨텐츠를 얻게 합니다. 그래서 아무곳에서나 렌더링 될 수 있습니다. 예를 들어 3D 에서 텍스처위에 렌더링 될 수 있습니다. Electron 의 오프스크린 렌더링은 Chromium Embedded Framework 프로젝트와 비슷한 접근방식을 사용합니다.
두 방식의 렌더링을 사용할 수 있고 효율적으로 하기 위해 변경된 영역만 'paint'
이벤트에 전달됩니다. 렌더링을 중지하거나, 계속하거나, 프레임 속도를 변경할 수
있습니다. 명시된 프레임 속도는 상한선입니다. 웹페이지에 아무일도 발생하지
않으면 프레임이 생성되지 않습니다. 프레임 속도 최고값은 60입니다. 그 이상은
이점은 없고, 성능 저하만 발생합니다.
GPU 가속 렌더링은 컴포지션에 GPU 가 사용되는 것을 의미합니다. 프레임이 GPU 에서 복사되기 때문에 더 많은 성능이 필요합니다. 그래서 이 방식이 좀 더 느립니다. 이 방식의 장점은 WebGL 과 3D CSS 애니메이션 지원입니다.
이 방식은 CPU에서 렌더링을 위해 소프트웨어 출력 장치를 사용하여 프레임 생성이 더 빠릅니다. 그래서 이 방식을 GPU 가속보다 선호합니다.
이 방식을 사용하려면 app.disableHardwareAcceleration()
API 를 호출하여 GPU 가속을 비활성화 하여야합니다.
const {app, BrowserWindow} = require('electron')
app.disableHardwareAcceleration()
let win
app.once('ready', () => {
win = new BrowserWindow({
webPreferences: {
offscreen: true
}
})
win.loadURL('http://github.com')
win.webContents.on('paint', (event, dirty, image) => {
// updateBitmap(dirty, image.getBitmap())
})
win.webContents.setFrameRate(30)
})