html5 앱과 웹사이트를 보다 빠르게 하는 50가지
TRANSCRIPT
HTML5 앱과 웹사이트를 보다 빠르게 하는 50 가지 트릭
전용우
MS Build Conference 2012
6 가지 원칙• 네트워크 요청은 빠르게 응답할 것• 최소한의 크기로 자원을 내려 받을 것• 효율적인 마크업 구조를 가질 것• 미디어 사용을 개선할 것• 빠른 자바스크립트를 작성할 것• 어플리케이션이 어떻게 동작되는지 알고 있을
것
네트워크 요청은 빠르게 응답할 것
3xx 리다이렉트를 피할 것
Series130%
70%
Meta-refresh 사용금지
14%
CDN 을 사용할 것
동시 커넥션 수를 최소화 할 것
WebApplication
Domain
WebApplication
Domain
Domain
커넥션을 재활용할 것
HTTP Response
HTTP/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 압축을 사용할 것
RequestGET / HTTP/1.1Accept: */*Accept-Language: en-usUA-CPU: x86Accept-Encoding: gzip, deflateHost: www.live.com
ResponseHTTP/1.1 200 OKContent-Length: 3479Expires: -1Date: Sun, 14 Mar 2010 21:30:46 GMTPragma: no-cacheContent-Encoding: gzip
HTML5 App Cache 을 활용하라
HTML5App
Cache
WebApplication
Domain
WebApplication
Domain
HTML5App
Cache
WebApplication
Domain
HTML5App
Cache
자원을 캐시 가능하게 해라
RequestGET /images/banner.jpg HTTP/1.1Host: www.microsoft.com
ResponseHTTP/1.1 200 OKContent-Type: image/jpegExpires: Fri, 20 Apr 2011 00:00:00 GMT
조건 요청을 보내라
RequestGET /images/banner.jpg HTTP/1.1Host: www.microsoft.comIf-Modified-Since:Sun, 10 Apr 2011 21:30:46 GMT
ResponseHTTP/1.1 304 Not ModifiedContent-Type: image/jpegLast-Modified: Sun, 1 Mar 2011 21:30:46 GMT
효율적인 마크업 구조를 가질 것
레거시 IE 모드는 http 헤더를 사용
Page Meta Tag
HTTP HeaderHTTP/1.1 200 OKDate: Sun, 14 Mar 2010 21:30:46 GMTX-UA-Compatible: IE=EmulateIE7
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
페이지의 위에 CSS 를 넣을 것
<html> <head>
<title>Test</title> <link rel="stylesheet" type="text/css"href="class.css" />
</head> <body> … … … </body>
</html>
@import 의 사용을 피할 것
@import url(/stylesheets/one.css); @import url(/stylesheets/two.css);
MyHeading { color: red; font-family: 'New Century Schoolbook', serif; background: white;
}
inline 스타일과 embedded 스타일은 피할 것
<html> <head>
<title>Test</title> </head> <body>
<style> .item { color:#009900;}
</style> <div class=‘item’>MyItem</div>
</body> </html>
사용하는 스타일만 CSS 에 포함
#HomePage{ color: red;
}
#ContentPage{ color: green;
}
스크립트는 아래에 넣을 것
<html> <head>
<title>Test</title> </head> <body> … … … <script src="myscript.js" … ></script> </body>
</html>
중복 코드 제거할 것
<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>
52%
단일 프레임워크 사용
<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>
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>
미디어 사용의 개선
Images (474k)Scripts (128k)Flash (84k)HTML (35k)Style Sheets (27k)Other (29k)
58
이미지 스프라이트 사용
240px
40p
x
40p
x
Multiple Files Image Sprite
40px
6 Images6 Connections96k Download
1 Image1 Connection21k Download
40px40px40px40px40px40px
실제 이미지 해상도를 사용해라
<html> <head>
<title>Test</title> </head> <body> … <!-- logo.gif dimensions: 500 x 400 --> <img src="logo.png" width="50" height="40" /> … </body>
</html>
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))
하나의 작은 크기 이미지는 DateURI 을 사용해라
<html> <head> <title>Test</title> </head> <body> <img src= "data:image/png;base64
iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblA" alt="Red dot" /> </body>
</html>
비디오의 미리 보기 이미지를 만들어라
빠른 자바스크립트 작성
코드를 최소화 해라
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;}
필요할 때 스크립트를 가져와라
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);
} }
function CalculateSum() { var leftSide = document.body.all.lSide.value; var rightSide = document.body.all.rSide.value;
document.body.all.result.value = leftSide + rightSide; }
돔의 접근을 최소화해라
다수의 엘리먼트를 찾을 때는 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;
} }
function BuildUI() { var elm = document.getElementById('ui'); var contents = BuildTitle() + BuildBody() +
BuildFooter(); elm.innerHTML = contents;
}
마크업의 변경은 한번에 해라
작은 크기의 돔을 유지해라
Document HTML Body
ElementElement
Element
ElementElement
Element
ElementElement
Element
내장 JSON 메서드를 사용해라
var jsObjStringParsed = JSON.parse(jsObjString); var jsObjStringBack = JSON.stringify(jsObjStringParsed);
너의 어플리케이션의 무슨 일을 하는지 알아라
Timer 사용에 유의해라
10 10 1010
6 6 6 6 6 6 6 6 6
50
requestAnimationFrame 을 사용해라
16.7 16.716.7
window.requestAnimationFrame(renderLoop);
활성화 될 때를 알아라
Page Visibility API
document.hidden - (property); Visibilitychange - (event);
6 가지 원칙• 네트워크 요청은 빠르게 응답할 것• 최소한의 크기로 자원을 내려 받을 것• 효율적인 마크업 구조를 가질 것• 미디어 사용을 개선할 것• 빠른 자바스크립트를 작성할 것• 어플리케이션이 어떻게 동작되는지 알고 있을
것
감사합니다 .