SlideShare una empresa de Scribd logo
1 de 53
HTML5 앱과 웹사이트를 보다
  빠르게 하는 50가지 트릭
       전용우
MS Build Conference 2012
6가지 원칙
•   네트워크 요청은 빠르게 응답할 것
•   최소한의 크기로 자원을 내려 받을 것
•   효율적인 마크업 구조를 가질 것
•   미디어 사용을 개선할 것
•   빠른 자바스크립트를 작성할 것
•   어플리케이션이 어떻게 동작되는지 알고
    있을 것
네트워크 요청은 빠르게 응답할 것
3xx 리다이렉트를 피할 것


   70%




         30%
Meta-refresh 사용금지




  14%
CDN을 사용할 것
동시 커넥션 수를 최소화 할 것
커넥션을 재활용할 것


HTTP Response

HTTP/1.1 200 OK
Content-Type: application/javascript
Content-Length: 230848
Connection: Keep-Alive
최소한의 크기로 자원을 내려 받을 것
777k
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>
          <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
이미지 스프라이트 사용

         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>
          …
          <!-- 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;
}
작은 크기의 돔을 유지해라
                                 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);
6가지 원칙
•   네트워크 요청은 빠르게 응답할 것
•   최소한의 크기로 자원을 내려 받을 것
•   효율적인 마크업 구조를 가질 것
•   미디어 사용을 개선할 것
•   빠른 자바스크립트를 작성할 것
•   어플리케이션이 어떻게 동작되는지 알고
    있을 것
감사합니다.

Más contenido relacionado

La actualidad más candente

Build Your Own CMS with Apache Sling
Build Your Own CMS with Apache SlingBuild Your Own CMS with Apache Sling
Build Your Own CMS with Apache Sling
Bob Paulin
 

La actualidad más candente (20)

Adobe Meetup AEM Architecture Sydney 2015
Adobe Meetup AEM Architecture Sydney 2015Adobe Meetup AEM Architecture Sydney 2015
Adobe Meetup AEM Architecture Sydney 2015
 
Css ppt
Css pptCss ppt
Css ppt
 
CSS Best practice
CSS Best practiceCSS Best practice
CSS Best practice
 
About Best friends - HTML, CSS and JS
About Best friends - HTML, CSS and JSAbout Best friends - HTML, CSS and JS
About Best friends - HTML, CSS and JS
 
Build Your Own CMS with Apache Sling
Build Your Own CMS with Apache SlingBuild Your Own CMS with Apache Sling
Build Your Own CMS with Apache Sling
 
K8s, Amazon EKS - 유재석, AWS 솔루션즈 아키텍트
K8s, Amazon EKS - 유재석, AWS 솔루션즈 아키텍트K8s, Amazon EKS - 유재석, AWS 솔루션즈 아키텍트
K8s, Amazon EKS - 유재석, AWS 솔루션즈 아키텍트
 
CSS3, Media Queries, and Responsive Design
CSS3, Media Queries, and Responsive DesignCSS3, Media Queries, and Responsive Design
CSS3, Media Queries, and Responsive Design
 
Tech talk on Tailwind CSS
Tech talk on Tailwind CSSTech talk on Tailwind CSS
Tech talk on Tailwind CSS
 
Css
CssCss
Css
 
CSS3 Media Queries And Creating Adaptive Layouts
CSS3 Media Queries And Creating Adaptive LayoutsCSS3 Media Queries And Creating Adaptive Layouts
CSS3 Media Queries And Creating Adaptive Layouts
 
Css 3
Css 3Css 3
Css 3
 
CSS Transitions, Transforms, Animations
CSS Transitions, Transforms, Animations CSS Transitions, Transforms, Animations
CSS Transitions, Transforms, Animations
 
데이터 분석가를 위한 신규 분석 서비스 - 김기영, AWS 분석 솔루션즈 아키텍트 / 변규현, 당근마켓 소프트웨어 엔지니어 :: AWS r...
데이터 분석가를 위한 신규 분석 서비스 - 김기영, AWS 분석 솔루션즈 아키텍트 / 변규현, 당근마켓 소프트웨어 엔지니어 :: AWS r...데이터 분석가를 위한 신규 분석 서비스 - 김기영, AWS 분석 솔루션즈 아키텍트 / 변규현, 당근마켓 소프트웨어 엔지니어 :: AWS r...
데이터 분석가를 위한 신규 분석 서비스 - 김기영, AWS 분석 솔루션즈 아키텍트 / 변규현, 당근마켓 소프트웨어 엔지니어 :: AWS r...
 
AWS Summit Seoul 2023 | AWS에서 OpenTelemetry 기반의 애플리케이션 Observability 구축/활용하기
AWS Summit Seoul 2023 | AWS에서 OpenTelemetry 기반의 애플리케이션 Observability 구축/활용하기AWS Summit Seoul 2023 | AWS에서 OpenTelemetry 기반의 애플리케이션 Observability 구축/활용하기
AWS Summit Seoul 2023 | AWS에서 OpenTelemetry 기반의 애플리케이션 Observability 구축/활용하기
 
Sling Models Overview
Sling Models OverviewSling Models Overview
Sling Models Overview
 
Media queries A to Z
Media queries A to ZMedia queries A to Z
Media queries A to Z
 
Html5 and-css3-overview
Html5 and-css3-overviewHtml5 and-css3-overview
Html5 and-css3-overview
 
Front End Best Practices
Front End Best PracticesFront End Best Practices
Front End Best Practices
 
Basic html
Basic htmlBasic html
Basic html
 
Html5 Basics
Html5 BasicsHtml5 Basics
Html5 Basics
 

Destacado (6)

유니브북 출시부터 운영까지
유니브북 출시부터 운영까지유니브북 출시부터 운영까지
유니브북 출시부터 운영까지
 
EcmaScript6(2015) Overview
EcmaScript6(2015) OverviewEcmaScript6(2015) Overview
EcmaScript6(2015) Overview
 
[NEXT] Flask 로 Restful API 서버 만들기
[NEXT] Flask 로 Restful API 서버 만들기 [NEXT] Flask 로 Restful API 서버 만들기
[NEXT] Flask 로 Restful API 서버 만들기
 
RESTful API 제대로 만들기
RESTful API 제대로 만들기RESTful API 제대로 만들기
RESTful API 제대로 만들기
 
REST API 설계
REST API 설계REST API 설계
REST API 설계
 
Flask, Redis, Retrofit을 이용한 Android 로그인 서비스 구현하기
Flask, Redis, Retrofit을 이용한 Android 로그인 서비스 구현하기Flask, Redis, Retrofit을 이용한 Android 로그인 서비스 구현하기
Flask, Redis, Retrofit을 이용한 Android 로그인 서비스 구현하기
 

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

처음부터 다시 배우는 HTML5 & CSS3 강의자료 7일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 7일차처음부터 다시 배우는 HTML5 & CSS3 강의자료 7일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 7일차
Michael Yang
 
High performance websites v1.0
High performance websites v1.0High performance websites v1.0
High performance websites v1.0
Byungsun Youn
 

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

알아봅시다, Polymer: Web Components & Web Animations
알아봅시다, Polymer: Web Components & Web Animations알아봅시다, Polymer: Web Components & Web Animations
알아봅시다, Polymer: Web Components & Web Animations
 
Hacosa jquery 1th
Hacosa jquery 1thHacosa jquery 1th
Hacosa jquery 1th
 
응답하라 반응형웹 - 3. bootstrap
응답하라 반응형웹 - 3. bootstrap응답하라 반응형웹 - 3. bootstrap
응답하라 반응형웹 - 3. bootstrap
 
Front-end Development Process - 어디까지 개선할 수 있나
Front-end Development Process - 어디까지 개선할 수 있나Front-end Development Process - 어디까지 개선할 수 있나
Front-end Development Process - 어디까지 개선할 수 있나
 
4-3. jquery
4-3. jquery4-3. jquery
4-3. jquery
 
ch04
ch04ch04
ch04
 
처음부터 다시 배우는 HTML5 & CSS3 강의자료 7일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 7일차처음부터 다시 배우는 HTML5 & CSS3 강의자료 7일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 7일차
 
What's new in IE11
What's new in IE11What's new in IE11
What's new in IE11
 
High performance websites v1.0
High performance websites v1.0High performance websites v1.0
High performance websites v1.0
 
파이썬 플라스크 이해하기
파이썬 플라스크 이해하기 파이썬 플라스크 이해하기
파이썬 플라스크 이해하기
 
3-2. selector api
3-2. selector api3-2. selector api
3-2. selector api
 
김찬웅_그룹웨어에 새 에너지를_NDC15
김찬웅_그룹웨어에 새 에너지를_NDC15김찬웅_그룹웨어에 새 에너지를_NDC15
김찬웅_그룹웨어에 새 에너지를_NDC15
 
20131217 html5
20131217 html520131217 html5
20131217 html5
 
Django를 Django답게, Django로 뉴스 사이트 만들기
Django를 Django답게, Django로 뉴스 사이트 만들기Django를 Django답게, Django로 뉴스 사이트 만들기
Django를 Django답게, Django로 뉴스 사이트 만들기
 
Polymer따라잡기
Polymer따라잡기Polymer따라잡기
Polymer따라잡기
 
Social Tutorial Platform: Webbles
Social Tutorial Platform: Webbles Social Tutorial Platform: Webbles
Social Tutorial Platform: Webbles
 
ecdevday3 효율적인 유지보수를 위한 개발 및 관리
ecdevday3 효율적인 유지보수를 위한 개발 및 관리ecdevday3 효율적인 유지보수를 위한 개발 및 관리
ecdevday3 효율적인 유지보수를 위한 개발 및 관리
 
[PyConKR 2014] 30분만에 따라하는 동시성 스크래퍼
[PyConKR 2014] 30분만에 따라하는 동시성 스크래퍼[PyConKR 2014] 30분만에 따라하는 동시성 스크래퍼
[PyConKR 2014] 30분만에 따라하는 동시성 스크래퍼
 
Secrets of the JavaScript Ninja - Chapter 12. DOM modification
Secrets of the JavaScript Ninja - Chapter 12. DOM modificationSecrets of the JavaScript Ninja - Chapter 12. DOM modification
Secrets of the JavaScript Ninja - Chapter 12. DOM modification
 
Html5 performance
Html5 performanceHtml5 performance
Html5 performance
 

Más de yongwoo Jeon (13)

deview2014
deview2014deview2014
deview2014
 
Web notification
Web notificationWeb notification
Web notification
 
Web Components 101 polymer & brick
Web Components 101 polymer & brickWeb Components 101 polymer & brick
Web Components 101 polymer & brick
 
Html5 시대의 웹앱 프로그래밍 방식의 변화
Html5 시대의 웹앱 프로그래밍 방식의 변화Html5 시대의 웹앱 프로그래밍 방식의 변화
Html5 시대의 웹앱 프로그래밍 방식의 변화
 
asm.js
asm.jsasm.js
asm.js
 
CoffeeScript
CoffeeScriptCoffeeScript
CoffeeScript
 
모바일 디버깅
모바일 디버깅모바일 디버깅
모바일 디버깅
 
Web component
Web componentWeb component
Web component
 
Html5 use cases
Html5 use casesHtml5 use cases
Html5 use cases
 
Client side storage in html5
Client side storage in html5Client side storage in html5
Client side storage in html5
 
Devfest
DevfestDevfest
Devfest
 
Scriptable cache
Scriptable cacheScriptable cache
Scriptable cache
 
Whats jindo
Whats jindoWhats jindo
Whats jindo
 

Último

Console API (Kitworks Team Study 백혜인 발표자료)
Console API (Kitworks Team Study 백혜인 발표자료)Console API (Kitworks Team Study 백혜인 발표자료)
Console API (Kitworks Team Study 백혜인 발표자료)
Wonjun Hwang
 
Merge (Kitworks Team Study 이성수 발표자료 240426)
Merge (Kitworks Team Study 이성수 발표자료 240426)Merge (Kitworks Team Study 이성수 발표자료 240426)
Merge (Kitworks Team Study 이성수 발표자료 240426)
Wonjun Hwang
 

Último (6)

Console API (Kitworks Team Study 백혜인 발표자료)
Console API (Kitworks Team Study 백혜인 발표자료)Console API (Kitworks Team Study 백혜인 발표자료)
Console API (Kitworks Team Study 백혜인 발표자료)
 
MOODv2 : Masked Image Modeling for Out-of-Distribution Detection
MOODv2 : Masked Image Modeling for Out-of-Distribution DetectionMOODv2 : Masked Image Modeling for Out-of-Distribution Detection
MOODv2 : Masked Image Modeling for Out-of-Distribution Detection
 
Continual Active Learning for Efficient Adaptation of Machine LearningModels ...
Continual Active Learning for Efficient Adaptation of Machine LearningModels ...Continual Active Learning for Efficient Adaptation of Machine LearningModels ...
Continual Active Learning for Efficient Adaptation of Machine LearningModels ...
 
A future that integrates LLMs and LAMs (Symposium)
A future that integrates LLMs and LAMs (Symposium)A future that integrates LLMs and LAMs (Symposium)
A future that integrates LLMs and LAMs (Symposium)
 
Merge (Kitworks Team Study 이성수 발표자료 240426)
Merge (Kitworks Team Study 이성수 발표자료 240426)Merge (Kitworks Team Study 이성수 발표자료 240426)
Merge (Kitworks Team Study 이성수 발표자료 240426)
 
캐드앤그래픽스 2024년 5월호 목차
캐드앤그래픽스 2024년 5월호 목차캐드앤그래픽스 2024년 5월호 목차
캐드앤그래픽스 2024년 5월호 목차
 

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

  • 1. HTML5 앱과 웹사이트를 보다 빠르게 하는 50가지 트릭 전용우
  • 3. 6가지 원칙 • 네트워크 요청은 빠르게 응답할 것 • 최소한의 크기로 자원을 내려 받을 것 • 효율적인 마크업 구조를 가질 것 • 미디어 사용을 개선할 것 • 빠른 자바스크립트를 작성할 것 • 어플리케이션이 어떻게 동작되는지 알고 있을 것
  • 8.
  • 9. 동시 커넥션 수를 최소화 할 것
  • 10.
  • 11. 커넥션을 재활용할 것 HTTP Response HTTP/1.1 200 OK Content-Type: application/javascript Content-Length: 230848 Connection: Keep-Alive
  • 12. 최소한의 크기로 자원을 내려 받을 것
  • 13. 777k
  • 14. Images (474k) Scripts (128k) Flash (84k) HTML (35k) Style Sheets (27k) Other (29k)
  • 15. 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
  • 16. HTML5 App Cache을 활용하라
  • 17.
  • 18.
  • 19. 자원을 캐시 가능하게 해라 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
  • 20. 조건 요청을 보내라 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
  • 22. 레거시 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
  • 23. 페이지의 위에 CSS를 넣을 것 <html> <head> <title>Test</title> <link rel="stylesheet" type="text/css"href="class.css" /> </head> <body> … … … </body> </html>
  • 24. @import의 사용을 피할 것 @import url(/stylesheets/one.css); @import url(/stylesheets/two.css); MyHeading { color: red; font-family: 'New Century Schoolbook', serif; background: white; }
  • 25. inline 스타일과 embedded 스타일은 피할 것 <html> <head> <title>Test</title> </head> <body> <style> .item { color:#009900;} </style> <div class=‘item’>MyItem</div> </body> </html>
  • 26. 사용하는 스타일만 CSS에 포함 #HomePage{ color: red; } #ContentPage{ color: green; }
  • 27. 스크립트는 아래에 넣을 것 <html> <head> <title>Test</title> </head> <body> … … … <script src="myscript.js" … ></script> </body> </html>
  • 28. 중복 코드 제거할 것 <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>
  • 29. 52%
  • 30. 단일 프레임워크 사용 <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>
  • 31. 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>
  • 33. Images (474k) Scripts (128k) Flash (84k) HTML (35k) Style Sheets (27k) Other (29k)
  • 34. 58
  • 35. 이미지 스프라이트 사용 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
  • 36. 실제 이미지 해상도를 사용해라 <html> <head> <title>Test</title> </head> <body> … <!-- logo.gif dimensions: 500 x 400 --> <img src="logo.png" width="50" height="40" /> … </body> </html>
  • 37. 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))
  • 38. 하나의 작은 크기 이미지는 DateURI을 사용해라 <html> <head> <title>Test</title> </head> <body> <img src= "data:image/png;base64 iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblA" alt="Red dot" /> </body> </html>
  • 39. 비디오의 미리 보기 이미지를 만들어라
  • 41. 코드를 최소화 해라 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;}
  • 42. 필요할 때 스크립트를 가져와라 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); } }
  • 43. 돔의 접근을 최소화해라 function CalculateSum() { var leftSide = document.body.all.lSide.value; var rightSide = document.body.all.rSide.value; document.body.all.result.value = leftSide + rightSide; }
  • 44. 다수의 엘리먼트를 찾을 때는 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; } }
  • 45. 마크업의 변경은 한번에 해라 function BuildUI() { var elm = document.getElementById('ui'); var contents = BuildTitle() + BuildBody() + BuildFooter(); elm.innerHTML = contents; }
  • 46. 작은 크기의 돔을 유지해라 Eleme Element Eleme Eleme ument HTML Body Element Eleme Eleme Element Eleme
  • 47. 내장 JSON 메서드를 사용해라 var jsObjStringParsed = JSON.parse(jsObjString); var jsObjStringBack = JSON.stringify(jsObjStringParsed);
  • 49. Timer 사용에 유의해라 6 6 6 6 6 6 6 6 6 10 10 10 10 50
  • 50. requestAnimationFrame을 사용해라 16.7 16.7 16.7 window.requestAnimationFrame(renderLoop);
  • 51. 활성화 될 때를 알아라 Page Visibility API document.hidden - (property); Visibilitychange - (event);
  • 52. 6가지 원칙 • 네트워크 요청은 빠르게 응답할 것 • 최소한의 크기로 자원을 내려 받을 것 • 효율적인 마크업 구조를 가질 것 • 미디어 사용을 개선할 것 • 빠른 자바스크립트를 작성할 것 • 어플리케이션이 어떻게 동작되는지 알고 있을 것