canvas가 성능상의 이점을 가지는 이유가 궁금합니다.

Question

안녕하세요! 좋은 강의 감사합니다. 이미지 태그의 src를 직접 바꾸는 것 보다는 canvas를 사용하는 것이 좀 더 부드러운 애니매이션이 가능하다고 강의에서 언급해주셨는데요,  어떤 이유로 canvas가 성능상의 이점을 가지는지가 궁금해져 질문드립니다.

1분코딩 · Answer

캔버스 자체가 픽셀 하나하나의 색상데이터를 직접 다루는 식으로 동작을 하는거라 기본적으로 같은 추상화 레벨이 높은 고급 객체들을 다루는 것보다 연산이 빠르다고 합니다. 그 대신 그만큼 직접 해줘야 하는 일이 많아 코딩량은 더 많아지는 것이고요~ 이미지나 브라우저에따라, 육안으로 차이는 없을 수도 있기때문에 반드시 캔버스를 쓰실 필요는 없다고 생각됩니다^^ 덧붙여, 캔버스 판 크기가 커질 수록(픽셀수가 늘어날수록) 캔버스 성능이 저하되기 때문에, 경우에 따라서는 모든 처리를 캔버스로 하는 것도 바람직하지 않을 수 있습니다. 예를들어 게임을 만들 경우, 계속 동적인 움직임을 갖는 캐릭터들은 캔버스에서 그려주고 정적인 배경이미지는 CSS의 백그라운드로 처리하는 식으로 섞어서 해주기도 하거든요~ 구조나 환경에 따라 변수가 있을 수 있기때문에 나 CSS 배경이미지, 그리고 캔버스를 번갈아가며, 또는 혼합해서 테스트 해보시고, 제일 나아보이는 것으로 택해서 개발하시면 좋을 것 같다는 생각입니다. 애플에서도 성능상의 이유로 캔버스를 즐겨 사용하고 있기 때문에, 이 강의는 애플 클론인 만큼 똑같이 캔버스로 개발해주었습니다^^

신세현 · Answer

어떤 경우에 canvas를 사용하면 좋을지까지 이해가 됩니다. 여러 케이스와 함께 자세한 설명 남겨주셔서 감사합니다!