HTML5 앱과 웹사이트를 보다  빠르게 하는 50가지 트릭       전용우
MS Build Conference 2012
6가지 원칙•   네트워크 요청은 빠르게 응답할 것•   최소한의 크기로 자원을 내려 받을 것•   효율적인 마크업 구조를 가질 것•   미디어 사용을 개선할 것•   빠른 자바스크립트를 작성할 것•   어플리케이션이 ...
네트워크 요청은 빠르게 응답할 것
3xx 리다이렉트를 피할 것   70%         30%
Meta-refresh 사용금지  14%
CDN을 사용할 것
동시 커넥션 수를 최소화 할 것
커넥션을 재활용할 것HTTP ResponseHTTP/1.1 200 OKContent-Type: application/javascriptContent-Length: 230848Connection: Keep-Alive
최소한의 크기로 자원을 내려 받을 것
777k
Images (474k)Scripts (128k)Flash (84k)HTML (35k)Style Sheets (27k)Other (29k)
gzip 압축을 사용할 것Request                          ResponseGET / HTTP/1.1                   HTTP/1.1 200 OKAccept: */*        ...
HTML5 App Cache을 활용하라
자원을 캐시 가능하게 해라RequestGET /images/banner.jpg HTTP/1.1Host: www.microsoft.com                   Response                   H...
조건 요청을 보내라RequestGET /images/banner.jpg HTTP/1.1Host: www.microsoft.comIf-Modified-Since:Sun, 10 Apr 2011 21:30:46 GMT    ...
효율적인 마크업 구조를 가질 것
레거시 IE모드는 http헤더를 사용Page Meta Tag<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"> HTTP Header HTTP/1.1 200 OK D...
페이지의 위에 CSS를 넣을 것<html>          <head>                   <title>Test</title>                   <link rel="stylesheet" typ...
@import의 사용을 피할 것@import url(/stylesheets/one.css);@import url(/stylesheets/two.css);MyHeading {    color: red;    font-fa...
inline 스타일과       embedded 스타일은 피할 것<html>    <head>              <title>Test</title>   </head>   <body>              <sty...
사용하는 스타일만 CSS에 포함#HomePage{    color: red;}#ContentPage{    color: green;}
스크립트는 아래에 넣을 것<html>          <head>                   <title>Test</title>          </head>          <body>          … … …...
중복 코드 제거할 것<html>          <head>                    <title>Test</title>          </head>          <body>          …      ...
52%
단일 프레임워크 사용<script   src="jquery.js" … ></script><script   src="prototype.js" … ></script><script   src="dojo.js" … ></scr...
3rd Party 스크립트 삽입하지 말 것<script   src="facebookconnect.js" … ></script><script   src="facebooklike.js" … ></script><script ...
미디어 사용의 개선
Images (474k)Scripts (128k)Flash (84k)HTML (35k)Style Sheets (27k)Other (29k)
58
이미지 스프라이트 사용         Multiple Files                   Image Sprite                                  40px                  ...
실제 이미지 해상도를 사용해라<html>          <head>                   <title>Test</title>          </head>          <body>          …  ...
CSS3를 활용해라border-radius:18px;-webkit-border-radius: 100px;-moz-border-radius: 100px;-ms-gradient(linear, 50% 50%, 0% 34%, ...
하나의 작은 크기 이미지는      DateURI을 사용해라<html>          <head>          <title>Test</title>          </head>          <body>     ...
비디오의 미리 보기 이미지를     만들어라
빠른 자바스크립트 작성
코드를 최소화 해라Initial (66 Characters)function Sum(number1, number2) {    return (number1 + number2);}Characters Removed (54 Ch...
필요할 때 스크립트를 가져와라var userTileScriptsLoaded = false;function CustomizeUserTile(){    if (userTileScriptsLoaded == false){   ...
돔의 접근을 최소화해라function CalculateSum() {    var leftSide = document.body.all.lSide.value;    var rightSide = document.body.al...
다수의 엘리먼트를 찾을 때는        selector api를 사용해라function doValidation() {    var reqs = document.querySelectorAll(".required");  ...
마크업의 변경은 한번에 해라function BuildUI() {    var elm = document.getElementById(ui);    var contents = BuildTitle() + BuildBody()...
작은 크기의 돔을 유지해라                                 Eleme                       Element                                 Eleme  ...
내장 JSON 메서드를 사용해라var jsObjStringParsed = JSON.parse(jsObjString);var jsObjStringBack = JSON.stringify(jsObjStringParsed);
너의 어플리케이션의무슨 일을 하는지 알아라
Timer 사용에 유의해라6        6   6     6   6     6   6    6   6    10        10        10       10                       50
requestAnimationFrame을             사용해라    16.7              16.7            16.7window.requestAnimationFrame(renderLoop);
활성화 될 때를 알아라 Page Visibility APIdocument.hidden - (property);Visibilitychange - (event);
6가지 원칙•   네트워크 요청은 빠르게 응답할 것•   최소한의 크기로 자원을 내려 받을 것•   효율적인 마크업 구조를 가질 것•   미디어 사용을 개선할 것•   빠른 자바스크립트를 작성할 것•   어플리케이션이 ...
감사합니다.
Html5 앱과 웹사이트를 보다 빠르게 하는 50가지
Html5 앱과 웹사이트를 보다 빠르게 하는 50가지
Html5 앱과 웹사이트를 보다 빠르게 하는 50가지
Html5 앱과 웹사이트를 보다 빠르게 하는 50가지
Upcoming SlideShare
Loading in...5
×

Html5 앱과 웹사이트를 보다 빠르게 하는 50가지

1,826

Published on

Published in: Technology
1 Comment
33 Likes
Statistics
Notes
No Downloads
Views
Total Views
1,826
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
44
Comments
1
Likes
33
Embeds 0
No embeds

No notes for slide

Html5 앱과 웹사이트를 보다 빠르게 하는 50가지

  1. 1. HTML5 앱과 웹사이트를 보다 빠르게 하는 50가지 트릭 전용우
  2. 2. MS Build Conference 2012
  3. 3. 6가지 원칙• 네트워크 요청은 빠르게 응답할 것• 최소한의 크기로 자원을 내려 받을 것• 효율적인 마크업 구조를 가질 것• 미디어 사용을 개선할 것• 빠른 자바스크립트를 작성할 것• 어플리케이션이 어떻게 동작되는지 알고 있을 것
  4. 4. 네트워크 요청은 빠르게 응답할 것
  5. 5. 3xx 리다이렉트를 피할 것 70% 30%
  6. 6. Meta-refresh 사용금지 14%
  7. 7. CDN을 사용할 것
  8. 8. 동시 커넥션 수를 최소화 할 것
  9. 9. 커넥션을 재활용할 것HTTP ResponseHTTP/1.1 200 OKContent-Type: application/javascriptContent-Length: 230848Connection: Keep-Alive
  10. 10. 최소한의 크기로 자원을 내려 받을 것
  11. 11. 777k
  12. 12. Images (474k)Scripts (128k)Flash (84k)HTML (35k)Style Sheets (27k)Other (29k)
  13. 13. gzip 압축을 사용할 것Request ResponseGET / HTTP/1.1 HTTP/1.1 200 OKAccept: */* Content-Length: 3479Accept-Language: en-us Expires: -1UA-CPU: x86 Date: Sun, 14 Mar 2010 21:30:46 GMTAccept-Encoding: gzip, deflate Pragma: no-cacheHost: www.live.com Content-Encoding: gzip
  14. 14. HTML5 App Cache을 활용하라
  15. 15. 자원을 캐시 가능하게 해라RequestGET /images/banner.jpg HTTP/1.1Host: www.microsoft.com Response HTTP/1.1 200 OK Content-Type: image/jpeg Expires: Fri, 20 Apr 2011 00:00:00 GMT
  16. 16. 조건 요청을 보내라RequestGET /images/banner.jpg HTTP/1.1Host: www.microsoft.comIf-Modified-Since:Sun, 10 Apr 2011 21:30:46 GMT Response HTTP/1.1 304 Not Modified Content-Type: image/jpeg Last-Modified: Sun, 1 Mar 2011 21:30:46 GMT
  17. 17. 효율적인 마크업 구조를 가질 것
  18. 18. 레거시 IE모드는 http헤더를 사용Page Meta Tag<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"> HTTP Header HTTP/1.1 200 OK Date: Sun, 14 Mar 2010 21:30:46 GMT X-UA-Compatible: IE=EmulateIE7
  19. 19. 페이지의 위에 CSS를 넣을 것<html> <head> <title>Test</title> <link rel="stylesheet" type="text/css"href="class.css" /> </head> <body> … … … </body></html>
  20. 20. @import의 사용을 피할 것@import url(/stylesheets/one.css);@import url(/stylesheets/two.css);MyHeading { color: red; font-family: New Century Schoolbook, serif; background: white;}
  21. 21. inline 스타일과 embedded 스타일은 피할 것<html> <head> <title>Test</title> </head> <body> <style> .item { color:#009900;} </style> <div class=‘item’>MyItem</div> </body></html>
  22. 22. 사용하는 스타일만 CSS에 포함#HomePage{ color: red;}#ContentPage{ color: green;}
  23. 23. 스크립트는 아래에 넣을 것<html> <head> <title>Test</title> </head> <body> … … … <script src="myscript.js" … ></script> </body></html>
  24. 24. 중복 코드 제거할 것<html> <head> <title>Test</title> </head> <body> … <script src="jquery.js" … ></script> <script src="myscript.js" … ></script> <script src="navigation.js" … ></script> <script src="jquery.js" … ></script> </body></html>
  25. 25. 52%
  26. 26. 단일 프레임워크 사용<script src="jquery.js" … ></script><script src="prototype.js" … ></script><script src="dojo.js" … ></script><script src="animater.js" … ></script><script src="extjs.js" … ></script><script src="yahooui.js" … ></script><script src="mochikit.js" … ></script><script src="lightbox.js" … ></script><script src="jslibs.js" … ></script><script src="gsel.js" … ></script>
  27. 27. 3rd Party 스크립트 삽입하지 말 것<script src="facebookconnect.js" … ></script><script src="facebooklike.js" … ></script><script src="facebookstats.js" … ></script><script src="tweetmeme.js" … ></script><script src="tweeter.js" … ></script><script src="tweetingly.js" … ></script><script src="googleanalytics.js" … ></script><script src="doubleclick.js" … ></script><script src="monitor.js" … ></script><script src="digg.js" … ></script>
  28. 28. 미디어 사용의 개선
  29. 29. Images (474k)Scripts (128k)Flash (84k)HTML (35k)Style Sheets (27k)Other (29k)
  30. 30. 58
  31. 31. 이미지 스프라이트 사용 Multiple Files Image Sprite 40px 40px40px 40px 40px 40px 40px 40px 240px 6 Images 1 Image 6 Connections 1 Connection 96k Download 21k Download
  32. 32. 실제 이미지 해상도를 사용해라<html> <head> <title>Test</title> </head> <body> … <!-- logo.gif dimensions: 500 x 400 --> <img src="logo.png" width="50" height="40" /> … </body></html>
  33. 33. CSS3를 활용해라border-radius:18px;-webkit-border-radius: 100px;-moz-border-radius: 100px;-ms-gradient(linear, 50% 50%, 0% 34%, from(#666666), to(#666666), color-stop(.3,#333333))-webkit-gradient(linear, 50% 50%, 0% 34%, from(#666666), to(#666666), color-stop(.3,#333333))-moz-gradient(linear, 50% 50%, 0% 34%, from(#666666), to(#666666), color-stop(.3,#333333))
  34. 34. 하나의 작은 크기 이미지는 DateURI을 사용해라<html> <head> <title>Test</title> </head> <body> <img src= "data:image/png;base64 iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblA" alt="Red dot" /> </body></html>
  35. 35. 비디오의 미리 보기 이미지를 만들어라
  36. 36. 빠른 자바스크립트 작성
  37. 37. 코드를 최소화 해라Initial (66 Characters)function Sum(number1, number2) { return (number1 + number2);}Characters Removed (54 Characters)function Sum(number1,number2){return number1+number2;}Compacted (30 Characters)function Sum(a,b){return a+b;}
  38. 38. 필요할 때 스크립트를 가져와라var userTileScriptsLoaded = false;function CustomizeUserTile(){ if (userTileScriptsLoaded == false){ var head = document.getElementsByTagName("head")[0]; script = document.createElement(script); script.type = text/javascript; script.src = upload.js; head.appendChild(script); }}
  39. 39. 돔의 접근을 최소화해라function CalculateSum() { var leftSide = document.body.all.lSide.value; var rightSide = document.body.all.rSide.value; document.body.all.result.value = leftSide + rightSide;}
  40. 40. 다수의 엘리먼트를 찾을 때는 selector api를 사용해라function doValidation() { var reqs = document.querySelectorAll(".required"); var missingRequiredField = false; for (var i = 0; i < reqs.length; i++) { if (reqs[i].value == "") missingRequiredField = true; }}
  41. 41. 마크업의 변경은 한번에 해라function BuildUI() { var elm = document.getElementById(ui); var contents = BuildTitle() + BuildBody() + BuildFooter(); elm.innerHTML = contents;}
  42. 42. 작은 크기의 돔을 유지해라 Eleme Element Eleme Elemeument HTML Body Element Eleme Eleme Element Eleme
  43. 43. 내장 JSON 메서드를 사용해라var jsObjStringParsed = JSON.parse(jsObjString);var jsObjStringBack = JSON.stringify(jsObjStringParsed);
  44. 44. 너의 어플리케이션의무슨 일을 하는지 알아라
  45. 45. Timer 사용에 유의해라6 6 6 6 6 6 6 6 6 10 10 10 10 50
  46. 46. requestAnimationFrame을 사용해라 16.7 16.7 16.7window.requestAnimationFrame(renderLoop);
  47. 47. 활성화 될 때를 알아라 Page Visibility APIdocument.hidden - (property);Visibilitychange - (event);
  48. 48. 6가지 원칙• 네트워크 요청은 빠르게 응답할 것• 최소한의 크기로 자원을 내려 받을 것• 효율적인 마크업 구조를 가질 것• 미디어 사용을 개선할 것• 빠른 자바스크립트를 작성할 것• 어플리케이션이 어떻게 동작되는지 알고 있을 것
  49. 49. 감사합니다.
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×