Your SlideShare is downloading. ×
0
Html5 performance
Html5 performance
Html5 performance
Html5 performance
Html5 performance
Html5 performance
Html5 performance
Html5 performance
Html5 performance
Html5 performance
Html5 performance
Html5 performance
Html5 performance
Html5 performance
Html5 performance
Html5 performance
Html5 performance
Html5 performance
Html5 performance
Html5 performance
Html5 performance
Html5 performance
Html5 performance
Html5 performance
Html5 performance
Html5 performance
Html5 performance
Html5 performance
Html5 performance
Html5 performance
Html5 performance
Html5 performance
Html5 performance
Html5 performance
Html5 performance
Html5 performance
Html5 performance
Html5 performance
Html5 performance
Html5 performance
Html5 performance
Html5 performance
Html5 performance
Html5 performance
Html5 performance
Html5 performance
Html5 performance
Html5 performance
Html5 performance
Html5 performance
Html5 performance
Html5 performance
Html5 performance
Html5 performance
Html5 performance
Html5 performance
Html5 performance
Html5 performance
Html5 performance
Html5 performance
Html5 performance
Html5 performance
Html5 performance
Html5 performance
Html5 performance
Html5 performance
Html5 performance
Html5 performance
Html5 performance
Html5 performance
Html5 performance
Html5 performance
Html5 performance
Html5 performance
Html5 performance
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Html5 performance

5,591

Published on

Published in: Technology
6 Comments
10 Likes
Statistics
Notes
No Downloads
Views
Total Views
5,591
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
71
Comments
6
Likes
10
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
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
  • Transcript

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

    ×