Html5 performance

성능관점에서 본 HTML5 전용우

HTML5?

Performance

TOC1. Animation2. Storage3. CSS Class4. CORS

1. Animation 텍스트dddddd http://www.ﬂickr.com/photos/rasputern/3462874340/

setInterval

this._key = setInterval(function(){ if(this.start < this.end){ this.start += 1; this.ele.style.left = this.start*10+"px"; }else{ clearInterval(this._key); }},1000/60);

• 모든 브라우저 지원• 비용이 많이 듬.• UI Thread에서 다른 경우로 멈추는 경 우가 발생.

.move{ left: 100px; -webkit-transition-property: left; -webkit-transition-duration: 1s; -webkit-transition-timing-function: ease;}

• UI Thread에서 작동하지 않음.• 랜더링 엔진을 이용하여 빠름.• 일부(translate3d...)는 GPU사용.• 조절하기기 힘듬.

requestAnimationFrame

webkitRequestAnimationFrame(function(){ this.ele.style.left = this.start*10+"px"; if(this.start < this.end){ this.startNum += 1; webkitRequestAnimationFrame( arguments.callee.caller ); }});

• 안보일때 발생안함.• 60fp(16.66ms)실행.• 한번에 처리할 수 있음.• 쉽게 마이그레이션이 가능.

Animation• CSS3• requestAnimationFrame

2. Storage 텍스트dddddd

Cookie

document.cookie = "key=value";

• 서버에 전달되어 네트워크 성능이 나쁨.• 작은 사이즈(4kb)• IO성능이 나쁨.

localStorage

localStorage.add("key") = "value";

• 사용하기 쉬움.• 사이즈가 큼.(5mb+)• 대부분 지원.• 클라이언트에만 있음.• IO성능이 좋음.

Write (4kb)1.5ms cookie localStorage1.0ms .5ms .0ms IE8 Safari5 Chrome13 Mobile Safari Android Browser

Write (4kb)1.5ms x146 cookie localStorage1.0ms .5ms .0ms IE8 Safari5 Chrome13 Mobile Safari Android Browser

Read (4kb)2.0ms cookie localStorage1.5ms1.0ms .5ms .0ms IE8 Safari5 Chrome13 Mobile Safari Android Browser

Read (4kb)2.0ms cookie localStorage x401.5ms1.0ms .5ms .0ms IE8 Safari5 Chrome13 Mobile Safari Android Browser

동기적으로 실행.

webSQL/indexed DB

• 비동기로 실행되어 문제 없음• 사용법이 어려움.• 호환성 문제.

Storage• localStorage• indexedDB

3. CSS Class 텍스트dddddd

className

var className = ele.className;if ((" "+className+" ").indexOf(" left ") == -1) { ele.className += "left";}

• 삭제, 추가할 때 직접 스크립트로 파싱.

classList

ele.classList.add("left");

• low level에서 class을 다루기 때문에 성능 이 좋음.• 유지보수하기도 좋음.

className classList600,000ops/sec450,000ops/sec x3300,000ops/sec150,000ops/sec 0ops/sec Chrome20 FF14 Safari5 MSafari(iOS5)

CSS Class• classList

4. Ajax (CORS) Cross-origin resource sharing 텍스트dddddd

• 헤더를 설정할 수 없음.• get방식만 가능.• 응답 포맷은 JSON만 사용가능.• 보안에 취약.

http://www.me2day.net/user.jsonp?id=mixed

http://www.me2day.net/user.jsonp?id=mixed {“name”:”전용우”}

http://www.me2day.net/user.jsonp?id=mixed <name> 전용우 </name>

• 헤더 설정 가능.• 응답 포맷 결정가능.• 느림.• 일부 디바이스에서 작동하지 않음.

CORS(XMLHttpRequest2)

Clientvar req = new XMLHttpRequest();req.addEventListener("load", function(){ console.log(req.responseText);}, false);req.open(GET, http://www.me2day.net/user.jsonp);xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=utf-8");req.setRequestHeader(X-Test, one);req.withCredentials = "true";req.send("id=mixed");

Server<? header("Access-Control-Allow-Origin: http://www.test.com"); //경로 지정 header("Access-Control-Allow-Headers: X-Test"); //받고 싶은 헤더 설정 header("Access-Control-Allow-Credentials: true"); //쿠키 사용 설정?>{"data" : "<?=$Name?>"}

http://www.me2day.net/user.jsonp?id=mixed {“name”:”전용우”}

http://www.me2day.net/user.jsonp?id=mixed <name> 전용우 </name>

• 모바일 서비스에서 사용하기 적합. • iOS 4.2 ~ • android 2.1~• 헤더 설정.• 보안 해결.• 성능 좋음.• 다양한 응답 포맷지원.

CORS• XMLHttpRequest2

정리• Animation: CSS3, requestAnimationFrame• Storage: localStorage, indexedDB• CSS Class : classList• CORS : XMLHttpRequest2

감사합니다.

http://helloworld.naver.com	2758
http://www.hanrss.com	167
http://xing.xinics.com	24
http://nimbus.nimbusnetworks.co.kr	5
http://translate.googleusercontent.com	2
http://localhost	1
http://mail.nhncorp.com	1
http://pinterest.com	1
http://nimbusnetworks.co.kr	1
http://www.linkedin.com	1

Html5 performance

by yongwoo Jeon on Jul 07, 2012

Accessibility

Categories

Upload Details

Usage Rights

10 Embeds 2,961

Statistics

Html5 performance Presentation Transcript