Performance

Canvas

일반적인 최적화 원칙을 최대한 준수

• Optimizing canvas
• Improving HTML5 Canvas Performance
• Optimizing your JavaScript game for Firefox OS

Pixel perfection

• 모든 픽셀값은 반올림하여 Anti-aliasing 방지.
• HiDPI 디스플레이를 고려함. (devicePixelRatio가 정수가 아닌 장치에는 확인이 필요함.)
• imageSmoothingEnabled, image-rendering 적용.
• canvas-rect-vs-circle
• lineWidth problem

putImageData (over fillRect)

• fillRect method를 사용하지 않고, pixel data를 직접 조작해 성능을 확보함.
• Points를 일일이 그리지 않고 다수의 points를 한번에 그리도록 함.

OffscreenCanvas

• 아직 Chrome이 제대로 지원하지 않음.
• 현재는 점이 찍히는 부분(Plot area)만 전용 Canvas를 만들어 연산을 수행하고 있음.
• Plot cnavas에 렌더링이 끝나면 원본 canvas에 삽입하며, 명시적인 layered DOM으로 구성하지는 않음.
• 차후에 브라우저가 OffscreenCanvas를 제대로 지원할 때 Web Worker와 함께 적용하면 상당한 성능 개선이 있을 것으로 예상함.

HTTP

• Chrome의 hostname 당 최대 컨넥션은 6개이며, 이를 최대한 활용해야 함.
• Promise.all, 로컬 캐싱 등으로 극복함.
• Browserscope

JavaScript

loop 내의 코드는 성능을 최우선으로 고려

시간복잡도

• O(n)

for loop (over forEach/map)

• 코드 가독성, 함수형 패러다임을 위해서는 forEach, map 등 고차함수가 권장되나, 성능을 위해 for loop 사용.
• Airbnb JavaScript Style Guide
• for-vs-foreach

Number() (over ParseInt())

• 성능이 가장 우수하면서도 semantic한 Number()를 사용.
• number-vs-parseint-vs-plus

loop 밖의 코드는 가독성과 best practical를 우선

ES5로 transpile 하지 않음

• JavaScript 엔진은 꾸준히 최적화되고 있으므로 성능을 위해 ES5로 내리는 것은 무의미하다고 판단함.
• 따라서 Babel transpile은 Chrome 61까지만을 타겟으로 함.
• Six Speed

성능 테스트 결과

Home#프로젝트 성능

성능 개선의 여지

미미하지만 성능을 개선할 수 있는 몇몇 부분이 존재함.

• Web Worker
• Canvas state 변경을 최소화(save, restore 활용)
• Canvas redraw 범위 최소화