OPEN

<iframe src="//www.slideshare.net/slideshow/embed_code/key/zxWYaoZqux7aRN" width="595" height="485" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;" allowfullscreen> </iframe> <div style="margin-bottom:5px"> <strong> <a href="//www.slideshare.net/deview/122-html5-canvas" title="[122]책에서는 맛볼 수 없는 HTML5 Canvas 이야기 " target="_blank">[122]책에서는 맛볼 수 없는 HTML5 Canvas 이야기 </a> </strong> from <strong><a href="https://www.slideshare.net/deview" target="_blank">NAVER D2</a></strong> </div>

HTML5를 선도하였던 기술 <canvas> 에 대해서 다룹니다. 캔버스는 등장 이후 급속도로 성장해왔고, 이제 브라우저에서 빠질 수 없는 기능이 되었습니다. 전체 웹 페이지의 30% 이상이 캔버스를 사용하고 있으며 캔버스의 성능개선은 웹 개발자에게 매우 중요한 과제가 되었습니다.

본 세션에서는 캔버스의 성능을 개선할 수 있는 새로운 방법들에 대해서 다룹니다. 특히 최근 Chrome 69에 추가 된 OffscreenCanvas API를 사용하여 렌더링에 걸리는 부하를 메인 스레드에서 Web Worker로 위임함으로써 캔버스를 개선할 수 있는 방법과 내부 구현 원리에 대해 상세히 설명합니다. 나아가 국내에서는 잘 알려지지 않았지만 브라우저 내부에 구현되었던 몇몇 API들과 앞으로 캔버스가 나아갈 방향 (웹 표준과 브라우저 구현 관점에서)를 공유합니다.

1. Motivation
- HTML5 Canvas의 등장
- 웹 분야에서 Canvas의 위치
- 많은 개선에도 불구하고 Canvas가 느린 이유 
2. DOM과 Canvas 애니메이션의 차이점
- Retained Mode VS Immediate Mode
- DOM animation VS Canvas animation
- 장점과 단점 
3. 기존의 성능 개선 사례 및 문제점 분석
- 기존 사례1. < canvas >와 drawImage를 이용한 성능 개선
- 기존 사례2. Canvas Proxy와 Canvas In Workers
- 기존 사례3. WebGL in Web Worker
- 기존의 문제점은 무엇인가?
4. 새로운 OffscreenCanvas API 적용하기
- 이미지 복사 최소화 (Zero-copy image)
- Trasnferrable ImageBitmap을 활용한 Main thread 동기화 방식
- Compositor에 직접 commit하는 방식
- 기존 대비 개선 된 성능 비교 
5. 사례 연구
- Three.js in a worker
- Multiple WebGL views
- W3C WebXR spec
- Google Map 
6. 그 밖에 알려지지 않은 API 및 연구과제들
- Path2D
- HitRegion
- Color Space
- Input Events in Workers 
7. 브라우저 구현 현황