[Canvas] willReadFrequently

getImageData()가 빈번하게 호출되는 로직이 있었다. throttle을 적용해서 500ms마다 호출되는데도 다음과 같은 경고가 브라우저 콘솔에 뜬다.

Canvas2D: Multiple readback operations using getImageData are faster with the willReadFrequently attribute set to true. See: https://html.spec.whatwg.org/multipage/canvas.html#concept-canvas-will-read-frequently

 

canvas 객체에서 getContext()를 호출할 때 넣을 수 있는 옵션이다. 용도가 분명한 직관적인 이름의 옵션. 다음은 리액트 환경에서 작업하면서 일단은 useEffect()에서 로직이 작성됐다. 별로 리액트스럽진 못하지만, 리팩토링은 다음 턴으로 넘기겠다.

    const canvas = canvasRef.current;    
    const ctx = canvas.getContext("2d", {
      willReadFrequently: true,
    });

 

mdn에 아주 간단하게 설명이 나와 있다. 설명이 충분하지 않다.

A boolean value that indicates whether or not a lot of read-back operations are planned. This will force the use of a software (instead of hardware accelerated) 2D canvas and can save memory when calling 
getImageData() frequently.

 

조금만 자세하게 알아보자. 기본적으로 캔버스 작업은 하드웨어 가속을 사용하고 여기서 말하는 하드웨어는 그래픽 카드다. canvas로 화면이 렌더링되면 그래픽 카드의 VRAM에 픽셀 정보가 올라간다. getImageData()는 픽셀 데이터 등의 여러 정보를 가져오는데 바꿔 말하면, CPU가 GPU에 요청해서 해당 데이터를 가져와야 한다는 의미다. CPU가 일반 램의 데이터에 바로 접근하는 것보다 VRAM에 요청해 접근하는 것이 느릴 수밖에 없다.

 

일반적인 렌더링 성능을 생각할 때는 하드웨어 가속 적용(디폴트)이 유리하지만 getImageData()처럼 VRAM에서 픽셀 정보 등을 가져와 코드 로직에서 사용해야 하는 상황에서는 하드웨어 가속이 유리하지 않을 수 있다. 이 때 willReadFrequently: true로 두면 하드웨어 가속을 끄고(VRAM에 캔버스의 정보를 저장하지 않고) 일반 램과 CPU에서 캔버스를 관리하게 된다. 렌더링 성능이 중요할 때는 사용할 일이 거의 없을 것이고, getImageData()를 매우 빈번하게 호출해야 하는 상황에서는 최적화 과정에서 필요할 수 있다.