1. 성능관점에서 본 HTML5
전용우

2. HTML5?

4. Performance

5. TOC
1. Animation
2. Storage
3. CSS Class
4. CORS

6. 1. Animation
텍스트dddddd
http://www.flickr.com/photos/rasputern/3462874340/

9. setInterval

10. 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);

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

12. CSS3

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

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

15. requestAnimationFrame

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

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

18. Animation
• CSS3
• requestAnimationFrame

19. 2. Storage
텍스트dddddd

20. Cookie

21. document.cookie = "key=value";

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

23. localStorage

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

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

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

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

28. Read (4kb)
2.0ms
cookie localStorage
1.5ms
1.0ms
.5ms
.0ms
IE8 Safari5 Chrome13 Mobile Safari Android Browser

29. Read (4kb)
2.0ms
cookie localStorage
x40
1.5ms
1.0ms
.5ms
.0ms
IE8 Safari5 Chrome13 Mobile Safari Android Browser

30. 동기적으로 실행.

31. webSQL/indexed DB

32. var request = indexedDB.open("todos");
var db;
request.onsuccess = function(e) {
var v = "1.99";
var setVrequest = db.setVersion(v);
db = e.target.result;
setVrequest.onsuccess = function(e) {
if(db.objectStoreNames.contains("some")) {
db.deleteObjectStore("some");
}
var store = db.createObjectStore("some",{keyPath: "id"});
};
};
//////////////////////////////////////////////////////////////////
var trans = db.transaction(["some"], IDBTransaction.READ_WRITE);
var store = trans.objectStore("some");
var data = {
"id": new Date().getTime(),
"text": "test"
};
var request = store.put(data);
request.onsuccess = function(e) {
console.log("success");
};
request.onerror = function(e) {
console.log("Error Adding: ", e);
};

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

34. Storage
• localStorage
• indexedDB

35. 3. CSS Class
텍스트dddddd

36. className

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

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

39. classList

40. ele.classList.add("left");

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

42. className classList
600,000ops/sec
450,000ops/sec
x3
300,000ops/sec
150,000ops/sec
0ops/sec
Chrome20 FF14 Safari5 MSafari(iOS5)

43. CSS Class
• classList

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

45. JSONP

48. <script src=”http://www.me2day.net/user.jsonp?id=mixed”/></script>

49. <script src=”http://www.me2day.net/user.jsonp?id=mixed”/></script>

50. <script src=”http://www.me2day.net/user.jsonp?id=mixed”/></script>
<script src=”http://www.me2day.net/user.jsonp?id=mixed”>
_callback({“name”:”전용우”});
</script>

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

52. Flash

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

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

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

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

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

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

62. CORS(XMLHttpRequest2)

63. Client
var 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");

64. 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?>"
}

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

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

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

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

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

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

73. CORS
• XMLHttpRequest2

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

75. 감사합니다.