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