2014 Naver D2 세미나

html5 주요 api 및 네이버 오픈소스 소개

html5
markup + api 화면을 출력할 뿐만 아니라 어플리케이션으로 확장할 수 있다.
디바이스 제어
비동기 통신

크로스플랫폼
n-screen
웹브라우저 뿐만 아니라 가전제품과 다양한 디바이스로 확장성을 가지고 있다.

ios의 경우에는 userAgent가 없기 때문에 해상도와 ppi로 구분지어야 한다.

api지원유무 체크(디바이스에 따라서 지원유무가 다름)

file api용량제한 : 1.4g

html5 어플리케이션 (게임)

업데이트가 용이하다.
그래픽 처리는 네이티브가 더 효과적임
멀티프로세싱을 위한 custom webview
게임은 아직...

ref: jindoJS

• naver D2: http://dev.naver.com/d2
• 협업개발 서비스: http://yobi.io

웹브라우저 엔진의 구조와 원리

webkit

렌더링 엔진이 가장 큰 역할을 차지한다.
ie는 오픈소스가 아님

DOM

문서를 쉽게 관리하는 방식, 규칙

parser

dom을 해석함
dom <-> parse

css

box-model
모든 엘리먼트는 box

renderer tree

dom와 css를 조합하여 renderer tree를 만든다.
화면에 보이는 정보만 가짐 (body -> block)

layout

css에 의해서 드로잉하는 역할. dom의 위치를 옮긴다던지 색상을 변경한다.
incremental layout : dom변경 요청이 있을때 renderer tree변화가 일어난다. 효율을 위하여…
ex) html -> block(0,0,stage width, stage height)

Paint

layout에서 받은 정보에서 실질적으로 그리는 역할을 한다.

비트맵을 그리는 부분에서 병목이 걸린다.(paint)
멀티 쓰레드를 활용하여 처리역할을 나눈다. (paint, raster, js function, scroll, composite)

성능측정 통해서 어디에서 성능이슈가 있는지 확인할 수 있다. (개발자도구)

• rec : DOM -> DOMTree 로 변환
• layout : DOMTree데이터에서 좌표 계산
• paint : 비트맵 그리기
• compositing : 레이어 형식으로된 비트맵을 합성

css 프로퍼티에 따라 성능이 틀려진다.

paint할때가 가장 오래걸림. 대신 composite할때가 가장 빠름

화면 애니메이션 성능향상 팁

layer를 많이 사용하면 gpu병목현상이 일어날 수 있기 때문에 5~10장선에서 적당한 숫자로 사용하는것이 좋다.
settimeOut보다는 requestAnimationFrame 사용을 권장한다. (리서치해보기)
jquery보다는 css animation을 권장함.

자바스크립트 mead stack

• MongoDB
• Express
• AngularJS
• Node.js

자세한 내용은 음성메모 참고
얘기를 들어보니 프로그램 구조설계가 핵심이다.

품질좋은 코드생산

음성메모 참고
jsDoc 리서치해보기

실시간 테트리스 개임개발

Grunt.js - 자바스크립트 빌드
node webkit
 http://goo.gl/HZaqzZ 
facebook : naverd2