Html5 performance

6,107 views
6,051 views

Published on

Published in: Technology
6 Comments
10 Likes
Statistics
Notes
No Downloads
Views
Total views
6,107
On SlideShare
0
From Embeds
0
Number of Embeds
4,333
Actions
Shares
0
Downloads
73
Comments
6
Likes
10
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Html5 performance

    1. 1. 성능관점에서 본 HTML5 전용우
    2. 2. HTML5?
    3. 3. Performance
    4. 4. TOC1. Animation2. Storage3. CSS Class4. CORS
    5. 5. 1. Animation 텍스트dddddd http://www.flickr.com/photos/rasputern/3462874340/
    6. 6. setInterval
    7. 7. 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);
    8. 8. • 모든 브라우저 지원• 비용이 많이 듬.• UI Thread에서 다른 경우로 멈추는 경 우가 발생.
    9. 9. CSS3
    10. 10. .move{ left: 100px; -webkit-transition-property: left; -webkit-transition-duration: 1s; -webkit-transition-timing-function: ease;}
    11. 11. • UI Thread에서 작동하지 않음.• 랜더링 엔진을 이용하여 빠름.• 일부(translate3d...)는 GPU사용.• 조절하기기 힘듬.
    12. 12. requestAnimationFrame
    13. 13. webkitRequestAnimationFrame(function(){ this.ele.style.left = this.start*10+"px"; if(this.start < this.end){ this.startNum += 1; webkitRequestAnimationFrame( arguments.callee.caller ); }});
    14. 14. • 안보일때 발생안함.• 60fp(16.66ms)실행.• 한번에 처리할 수 있음.• 쉽게 마이그레이션이 가능.
    15. 15. Animation• CSS3• requestAnimationFrame
    16. 16. 2. Storage 텍스트dddddd
    17. 17. Cookie
    18. 18. document.cookie = "key=value";
    19. 19. • 서버에 전달되어 네트워크 성능이 나쁨.• 작은 사이즈(4kb)• IO성능이 나쁨.
    20. 20. localStorage
    21. 21. localStorage.add("key") = "value";
    22. 22. • 사용하기 쉬움.• 사이즈가 큼.(5mb+)• 대부분 지원.• 클라이언트에만 있음.• IO성능이 좋음.
    23. 23. Write (4kb)1.5ms cookie localStorage1.0ms .5ms .0ms IE8 Safari5 Chrome13 Mobile Safari Android Browser
    24. 24. Write (4kb)1.5ms x146 cookie localStorage1.0ms .5ms .0ms IE8 Safari5 Chrome13 Mobile Safari Android Browser
    25. 25. Read (4kb)2.0ms cookie localStorage1.5ms1.0ms .5ms .0ms IE8 Safari5 Chrome13 Mobile Safari Android Browser
    26. 26. Read (4kb)2.0ms cookie localStorage x401.5ms1.0ms .5ms .0ms IE8 Safari5 Chrome13 Mobile Safari Android Browser
    27. 27. 동기적으로 실행.
    28. 28. webSQL/indexed DB
    29. 29. 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); };
    30. 30. • 비동기로 실행되어 문제 없음• 사용법이 어려움.• 호환성 문제.
    31. 31. Storage• localStorage• indexedDB
    32. 32. 3. CSS Class 텍스트dddddd
    33. 33. className
    34. 34. var className = ele.className;if ((" "+className+" ").indexOf(" left ") == -1) { ele.className += "left";}
    35. 35. • 삭제, 추가할 때 직접 스크립트로 파싱.
    36. 36. classList
    37. 37. ele.classList.add("left");
    38. 38. • low level에서 class을 다루기 때문에 성능 이 좋음.• 유지보수하기도 좋음.
    39. 39. className classList600,000ops/sec450,000ops/sec x3300,000ops/sec150,000ops/sec 0ops/sec Chrome20 FF14 Safari5 MSafari(iOS5)
    40. 40. CSS Class• classList
    41. 41. 4. Ajax (CORS) Cross-origin resource sharing 텍스트dddddd
    42. 42. JSONP
    43. 43. <script src=”http://www.me2day.net/user.jsonp?id=mixed”/></script>
    44. 44. <script src=”http://www.me2day.net/user.jsonp?id=mixed”/></script>
    45. 45. <script src=”http://www.me2day.net/user.jsonp?id=mixed”/></script> <script src=”http://www.me2day.net/user.jsonp?id=mixed”> _callback({“name”:”전용우”}); </script>
    46. 46. • 헤더를 설정할 수 없음.• get방식만 가능.• 응답 포맷은 JSON만 사용가능.• 보안에 취약.
    47. 47. Flash
    48. 48. http://www.me2day.net/user.jsonp?id=mixed
    49. 49. http://www.me2day.net/user.jsonp?id=mixed
    50. 50. http://www.me2day.net/user.jsonp?id=mixed {“name”:”전용우”}
    51. 51. http://www.me2day.net/user.jsonp?id=mixed
    52. 52. http://www.me2day.net/user.jsonp?id=mixed <name> 전용우 </name>
    53. 53. • 헤더 설정 가능.• 응답 포맷 결정가능.• 느림.• 일부 디바이스에서 작동하지 않음.
    54. 54. CORS(XMLHttpRequest2)
    55. 55. 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");
    56. 56. 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?>"}
    57. 57. http://www.me2day.net/user.jsonp?id=mixed
    58. 58. http://www.me2day.net/user.jsonp?id=mixed
    59. 59. http://www.me2day.net/user.jsonp?id=mixed {“name”:”전용우”}
    60. 60. http://www.me2day.net/user.jsonp?id=mixed
    61. 61. http://www.me2day.net/user.jsonp?id=mixed <name> 전용우 </name>
    62. 62. • 모바일 서비스에서 사용하기 적합. • iOS 4.2 ~ • android 2.1~• 헤더 설정.• 보안 해결.• 성능 좋음.• 다양한 응답 포맷지원.
    63. 63. CORS• XMLHttpRequest2
    64. 64. 정리• Animation: CSS3, requestAnimationFrame• Storage: localStorage, indexedDB• CSS Class : classList• CORS : XMLHttpRequest2
    65. 65. 감사합니다.

    ×