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

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (6)

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

Similaire à Html5 앱과 웹사이트를 보다 빠르게 하는 50가지 (20)

Plus de yongwoo Jeon

Plus de yongwoo Jeon (13)

Dernier

Dernier (6)

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