[Vue.js] [Vuex] Canvas의 한계값

개요

Vue.js에서 Canvas 그리기의 영향을 시도했습니다.
공식 사이트에서는 CREATEJS(TWEENJS)를 이용한 범례이 있었습니다만, 이번은 requestAnimationFrame로 복수의 Canvas에 복수의 arc(엔)을 묘화 해 FPS를 계측해 보겠습니다.

실행 환경

MacBook Air (13-inch, Mid 2013)

El Capitan 10.11.6 (15G1212)

CPU : 1.3 GHz Intel Core i5

메모리 : 4GB 1600MHz DDR3

GPU : Intel HD Graphics 5000 1536 MB

브라우저: Google 크롬 버전 55.0.2883.95 (64-bit)

데모 페이지 , 출처
또한 가능한 한 전체 화면에 가까운 크기로 브라우저를 펼치고 있습니다.
※Developer 툴의 FPS Meter를 이용하고 있습니다

실행 결과

Canvas 수
arc(원)의 수
FPS(avg)


1
1000
60

1
2197
45

1
4096
25

1
8000
13

5
1
60

10
1
50

15
1
40

30
1
15

5
125
60

5
512
33

10
125
40

10
512
17

15
125
25

15
512
12


또한 비교 대상으로 조금 잡지만 라이브러리를 이용하지 않는 페이지를 시도했습니다.
데모 페이지
모든 패턴은 시도할 수 없지만 위의 결과와 비슷한 값이 되었습니다.
단지 이용 PC에 의해서 값은 크게 변동했습니다.

조만간 스마트 폰 브라우저에서도 시도해 보려고합니다. 단지 Vue.js를 이용해도 FPS는 크게 좌우되지 않으므로 PC 메인이라면 적극적으로 이용해 나갈까.