Excellence Sharing Growth

2018. 10. 11-12 COEX Grand Ballroom, Seoul

Scroll icon
See you next year!

DEVIEW 2018 행사가 종료되었습니다.

발표 영상과 자료를 지금 확인해보세요.

WATCH VIDEOS
2018 DEVIEW 행사 사진
2018 DEVIEW 행사 사진
2018 DEVIEW 행사 사진
2018 DEVIEW 행사 사진
2018 DEVIEW 행사 사진
2018 DEVIEW 행사 사진
2018 DEVIEW 행사 사진
2018 DEVIEW 행사 사진
2018 DEVIEW 행사 사진
2018 DEVIEW 행사 사진
2018 DEVIEW 행사 사진
2018 DEVIEW 행사 사진
2018 DEVIEW 행사 사진

SESSIONS

강연 목록

강연자 사진
강연 분야
  • 모바일
  • 성능
강연 제목
책에서는 맛볼 수 없는 HTML5 Canvas 이야기 ​(부제: Web Worker를 이용해 캔버스 성능을 극대화하기)
강연 내용
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. 브라우저 구현 현황

대상
  • 성능 향상이 필요한 Canvas2D 개발자
  • WebGL / WebXR (AR + VR) 개발자
  • Web Front-End 개발자
  • 웹 표준 및 브라우저 기술에 관심 많은 개발자
  • 기타 모든 개발자
강연자
방진호
전체 Schedule 보러가기

PARTNERS

  • baidu
  • carnegie mellon university
  • logo_coupang
  • google
  • hyper connect
  • imply
  • labs
  • labs europe
  • line
  • lunit
  • naver
  • naver business platform
  • nvidia
  • samsunginternet
  • superb ai
  • theori
  • udacity
  • urbanbase

LOCATION

장소
코엑스 그랜드볼룸 (Coex Grand Ballroom)
주소
서울 강남구 영동대로 513 코엑스, (지번) 삼성동 159 코엑스
연락처
02-6000-0114

그랜드볼룸은 봉은사 맞은편 코엑스 1층 북문 쪽에 위치해 있습니다.
지하철 이용 시 9호선 봉은사역 7번 출구를 이용하시거나 삼성역 6번 출구를 이용하시면 됩니다.

교통정보 더보기 >

DEVIEW 2018에 관하여 더 궁금한 점이 있다면?

FAQ 보러가기