반복 가능한 스트레스 장면 만들기
알려진 수의 움직이는 개체, 겹치는 효과 및 텍스트 레이블을 사용하여 테스트 상태를 구축합니다. 각 실행이 거의 동일한 작업을 제공하도록 기록 또는 고정 시드를 캡처합니다. 빈 장면 기준선과 혼잡한 장면을 비교한 다음 JavaScript 업데이트, 캔버스 그리기, 이미지 디코딩 또는 스타일 및 레이아웃 작업에 시간이 소요되는지 검사합니다.
그리기가 주된 비용이라면 비슷한 경로를 묶거나 불필요한 상태 변경을 줄이거나 바뀐 영역만 렌더링하는 방법을 시험하세요. 업데이트 로직이 병목이라면 프로파일러로 충돌 검사와 객체 반복 작업을 살펴보세요. MDN의 Canvas 최적화 안내는 이를 평가할 선택지로 설명하며, 속도 향상을 보장하는 만능 설정으로 다루지 않습니다.
비용이 큰 작업 하나를 바꾸고 결과를 확인하세요.
정적 배경을 반복해서 그리는 작업처럼 비용이 의심되는 원인을 하나 고르세요. 그 배경을 오프스크린 Canvas에 캐시하고 같은 장면에서 변경 전후를 비교합니다. 크기가 다른 화면과 리사이즈 후에도 시각적 결과를 확인하세요. 오래된 크기를 사용하거나 텍스트 배율이 달라지면 캐시가 부정확해질 수 있습니다.
비교에 사용한 기기, 브라우저, 장면, 동작을 기록하세요. 한 기기의 결과는 해당 실행을 진단하는 데 도움이 되지만 모든 브라우저나 기기의 성능을 입증하지는 않습니다. 인위적인 장면을 개선한 최적화가 다른 곳에서 조작감을 나쁘게 할 수 있으므로 원래 상호작용도 다시 테스트하세요.
캔버스 게임 성능 관련 질문
변경된 픽셀만 다시 그려야 합니까?
장면의 복잡성과 전체를 다시 그리는 비용에 따라 다릅니다. 부분 렌더링은 관리 작업을 늘리고 움직이는 객체 주변에 오래된 픽셀을 남길 수 있으므로 같은 재현 가능한 장면에서 두 방법을 비교하세요.
Canvas 작업을 묶으면 성능이 반드시 좋아지나요?
아니요. 시험해 볼 가설일 뿐입니다. 대상 브라우저와 작업 부하를 측정하고, 렌더링을 깨뜨리지 않으면서 관찰된 병목을 개선할 때만 변경을 유지하세요.
추가 읽을거리
오래된 정보를 발견하셨나요? 수정 사항 제보