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

HTML5 앱과 웹사이트를 보다
빠르게 하는 50가지 트릭
전용우

6가지 원칙
• 네트워크 요청은 빠르게 응답할 것
• 최소한의 크기로 자원을 내려 받을 것
• 효율적인 마크업 구조를 가질 것
• 미디어 사용을 개선할 것
• 빠른 자바스크립트를 작성할 것
• 어플리케이션이 어떻게 동작되는지 알고
있을 것

네트워크 요청은 빠르게 응답할 것

3xx 리다이렉트를 피할 것

70%

30%

Meta-refresh 사용금지

14%

동시 커넥션 수를 최소화 할 것

커넥션을 재활용할 것

HTTP Response

HTTP/1.1 200 OK
Content-Type: application/javascript
Content-Length: 230848
Connection: Keep-Alive

최소한의 크기로 자원을 내려 받을 것

Images (474k)
Scripts (128k)
Flash (84k)
HTML (35k)
Style Sheets (27k)
Other (29k)

gzip 압축을 사용할 것

Request Response
GET / HTTP/1.1 HTTP/1.1 200 OK
Accept: */* Content-Length: 3479
Accept-Language: en-us Expires: -1
UA-CPU: x86 Date: Sun, 14 Mar 2010 21:30:46 GMT
Accept-Encoding: gzip, deflate Pragma: no-cache
Host: www.live.com Content-Encoding: gzip

HTML5 App Cache을 활용하라

자원을 캐시 가능하게 해라

Request
GET /images/banner.jpg HTTP/1.1
Host: www.microsoft.com

Response
HTTP/1.1 200 OK
Content-Type: image/jpeg
Expires: Fri, 20 Apr 2011 00:00:00 GMT

조건 요청을 보내라

Request
GET /images/banner.jpg HTTP/1.1
Host: www.microsoft.com
If-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

효율적인 마크업 구조를 가질 것

레거시 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

페이지의 위에 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>
</body>
</html>

단일 프레임워크 사용

<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>

이미지 스프라이트 사용

Multiple Files Image Sprite

40px

40px
40px 40px 40px 40px 40px 40px 240px

6 Images 1 Image
6 Connections 1 Connection
96k Download 21k Download

실제 이미지 해상도를 사용해라

<html>
<head>
<title>Test</title>
</head>
<body>
…

<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;
}

작은 크기의 돔을 유지해라
Eleme
Element
Eleme

Eleme
ument HTML Body Element
Eleme

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.7

window.requestAnimationFrame(renderLoop);

활성화 될 때를 알아라

Page Visibility API
document.hidden - (property);
Visibilitychange - (event);

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

More Related Content

What's hot

Viewers also liked

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

More from yongwoo Jeon

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