[2012널리세미나] front-end 최적화의 끝판왕, csm + markup complexity

33
이준행 | me2day.net / rainygirl | 2012.02

Upload: nts-nuli

Post on 05-Dec-2014

370 views

Category:

Technology


3 download

DESCRIPTION

 

TRANSCRIPT

이준행����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  |����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  me2day.net����������� ������������������  /����������� ������������������  rainygirl����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  |����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  2012.02����������� ������������������  

1-1����������� ������������������  ����������� ������������������  ����������� ������������������  마크업����������� ������������������  복잡도����������� ������������������  

1-2����������� ������������������  ����������� ������������������  ����������� ������������������  DOM����������� ������������������  중첩����������� ������������������  원인����������� ������������������  

1-3����������� ������������������  ����������� ������������������  ����������� ������������������  마크업����������� ������������������  복잡도����������� ������������������  산출����������� ������������������  

1-4����������� ������������������  ����������� ������������������  ����������� ������������������  마크업����������� ������������������  복잡도����������� ������������������  자동����������� ������������������  스캔����������� ������������������  

����������� ������������������  

����������� ������������������  

����������� ������������������  

����������� ������������������  

����������� ������������������  

2-1����������� ������������������  ����������� ������������������  ����������� ������������������  CSM이란?����������� ������������������  

2-2����������� ������������������  ����������� ������������������  ����������� ������������������  CSM의����������� ������������������  특징����������� ������������������  

2-3����������� ������������������  ����������� ������������������  ����������� ������������������  속도향상효과����������� ������������������  

2-4����������� ������������������  ����������� ������������������  ����������� ������������������  NAVER����������� ������������������  me����������� ������������������  

2-5����������� ������������������  ����������� ������������������  ����������� ������������������  CSM����������� ������������������  Generator����������� ������������������  

����������� ������������������  

1  Markup����������� ������������������  Complexity����������� ������������������  

2  CSM����������� ������������������  -����������� ������������������  CSS����������� ������������������  Sprites����������� ������������������  Matrix����������� ������������������  

목차����������� ������������������  

1-1����������� ������������������  

DOM����������� ������������������  중첩과����������� ������������������  브라우저����������� ������������������  로딩����������� ������������������  속도����������� ������������������  

HTML����������� ������������������  문서의����������� ������������������  DOM����������� ������������������  Element가����������� ������������������  중첩될����������� ������������������  수록����������� ������������������  

복잡도가����������� ������������������  증가하고����������� ������������������  브라우저����������� ������������������  로딩����������� ������������������  속도가����������� ������������������  느려짐����������� ������������������  

평균����������� ������������������  중첩수����������� ������������������   PC����������� ������������������  1����������� ������������������  (IE9)����������� ������������������   PC����������� ������������������  2����������� ������������������  (IE9)����������� ������������������   PC����������� ������������������  1(Chrome14)����������� ������������������   PC����������� ������������������  1(Firefox5)����������� ������������������  

7.5����������� ������������������   668����������� ������������������   3354����������� ������������������   745����������� ������������������   485����������� ������������������  

10����������� ������������������   690����������� ������������������   3459����������� ������������������   742����������� ������������������   488����������� ������������������  

12.5����������� ������������������   712����������� ������������������   3683����������� ������������������   760����������� ������������������   495����������� ������������������  

PC����������� ������������������  1����������� ������������������  :����������� ������������������  CPU:����������� ������������������  Intel����������� ������������������  i7����������� ������������������  870����������� ������������������  2.93GHz,����������� ������������������  RAM:����������� ������������������  4G����������� ������������������  PC����������� ������������������  2����������� ������������������  :����������� ������������������  CPU:����������� ������������������  Intel����������� ������������������  Core2����������� ������������������  T7200����������� ������������������  2GHz,����������� ������������������  RAM:����������� ������������������  1G����������� ������������������  ����������� ������������������  동일개수����������� ������������������  div����������� ������������������  중첩을����������� ������������������  10,000회����������� ������������������  반복,����������� ������������������  중첩시키는����������� ������������������  방법을����������� ������������������  변경시켜����������� ������������������  평균����������� ������������������  중첩����������� ������������������  수����������� ������������������  변화시킴����������� ������������������  

1-1����������� ������������������  

DOM����������� ������������������  중첩과����������� ������������������  브라우저����������� ������������������  로딩����������� ������������������  속도����������� ������������������  

HTML����������� ������������������  문서의����������� ������������������  DOM����������� ������������������  Element가����������� ������������������  중첩될����������� ������������������  수록����������� ������������������  ����������� ������������������  

복잡도가����������� ������������������  증가하고����������� ������������������  브라우저����������� ������������������  로딩����������� ������������������  속도가����������� ������������������  느려짐����������� ������������������  

1-2����������� ������������������  

테이블����������� ������������������  레이아웃����������� ������������������  표현����������� ������������������  

1개����������� ������������������  테이블이����������� ������������������  셀에����������� ������������������  도달하는����������� ������������������  데에����������� ������������������  4회����������� ������������������  중첩,����������� ������������������  테이블����������� ������������������  2개����������� ������������������  사용시����������� ������������������  순식간에����������� ������������������  8~9회����������� ������������������  중첩����������� ������������������  

����������� ������������������  

정보����������� ������������������  표가����������� ������������������  아니라면����������� ������������������  테이블����������� ������������������  사용����������� ������������������  지양����������� ������������������  필요����������� ������������������  

table>tbody>tr>td����������� ������������������  

<table>      <tr>          <td  class=“leftmenu”>              <a  href=“#”>Menu1</a><br>              <a  href=“#”>Menu1</a><br>              <a  href=“#”>Menu1</a><br>          </td>          <td  class=“rightcontent”>              <p>title</p>          </td>      </tr>  </table>  

1-2����������� ������������������  

디자인����������� ������������������  표현을����������� ������������������  위한����������� ������������������  Element����������� ������������������  중첩����������� ������������������  

div>div>div>div����������� ������������������  

<div  class=“layout1”>      <div  class=“layout2”>          <div  class=“layout3”>              <div  class=“layout4”>                    <a  href=“#”>…</a>              </div>          </div>      </div>  </div>  

<div  class=“layout1”>      <a  href=“#”>…</a>      <div  class=“layout2”></div>      <div  class=“layout3”></div>      <div  class=“layout4”></div>  </div>  

1-2����������� ������������������  

목록����������� ������������������  Element����������� ������������������  남용����������� ������������������  

dl>dd>ul>li>dl>dd����������� ������������������  

목록����������� ������������������  Element는����������� ������������������  접근성����������� ������������������  향상,����������� ������������������  시멘틱����������� ������������������  마크업����������� ������������������  등의����������� ������������������  장점이����������� ������������������  있지만����������� ������������������  

남용시����������� ������������������  과도한����������� ������������������  구조화����������� ������������������  à����������� ������������������  마크업����������� ������������������  복잡도����������� ������������������  증가����������� ������������������  

<dl>      <dt>item1</dt>      <dd>          <ul>              <li>                  <a  href=“#”>item1-­‐1</a>              </li>              <li>                  <a  href=“#”>item1-­‐2</a>              </li>          </ul>      </dd>      <dt>item2</dt>      <dd>          <ul>  

     .  .  .    

1-2����������� ������������������  

목록����������� ������������������  Element����������� ������������������  남용����������� ������������������  

dl>dd>ul>li>dl>dd����������� ������������������  

<div  id="link">  <!-­‐-­‐오른쪽����������� ������������������  배너영역-­‐-­‐>  <div  id="banner">  

<ul>  <li  class="banner_link">  

<a  href="http://www.widget.go.kr"  .  .  .  >  <img  src="/images2/ban/ban_ra026_01.jpg“  .  .  .  />  

</a>  </li>  <li  class="banner_link">  

<a  href="raeaw032.jsp"  onclick="call_open();return  false;“  .  .  .  >  <img  src="/images2/ban/ban_ra025_01.jpg“  .  .  .  />  

</a>  </li>  

</ul>  </div>  <!-­‐-­‐//오른쪽����������� ������������������  배너영역-­‐-­‐>  

</div>  

1-2����������� ������������������  

목록����������� ������������������  Element����������� ������������������  남용����������� ������������������  

dl>dd>ul>li>dl>dd����������� ������������������  

<div  id="footer">  <div  id="footer_under">  

<ul  class="foot_li">  <li  class="pl_10">  

<span  class="f_t">  홈페이지운영시간:  08시~24시  

</span>  </li>  <li  class="pl_20">  

<a  href="/home/raejw002.jsp"  title="개인정보보호정책">  <img  src="/images2/but/but_ra012_01.gif"  alt="개인정보보호정책"/>  

</a>  </li>  .  .  .    

1-3����������� ������������������  

마크업����������� ������������������  복잡도����������� ������������������  등급����������� ������������������  산정����������� ������������������  

네이버����������� ������������������  전체����������� ������������������  HTML����������� ������������������  산출물의����������� ������������������  DOM����������� ������������������  Element����������� ������������������  평균����������� ������������������  중첩수를����������� ������������������  데이터베이스화����������� ������������������  

평균����������� ������������������  중첩수����������� ������������������  등급을����������� ������������������  산정하여����������� ������������������  중첩을����������� ������������������  지양토록����������� ������������������  유도����������� ������������������  

1-4����������� ������������������  

Markup����������� ������������������  QP����������� ������������������  (Quality����������� ������������������  Practice)����������� ������������������  에서����������� ������������������  자동����������� ������������������  스캔����������� ������������������  

NHN����������� ������������������  전체����������� ������������������  마크업����������� ������������������  산출물����������� ������������������  코드를����������� ������������������  스캔하여����������� ������������������  마크업����������� ������������������  복잡도를����������� ������������������  자동����������� ������������������  측정����������� ������������������  

프로젝트별����������� ������������������  리포트����������� ������������������  제공����������� ������������������  

지속적인����������� ������������������  마크업����������� ������������������  복잡도����������� ������������������  관리����������� ������������������  

2-1����������� ������������������  

CSS����������� ������������������  Sprites����������� ������������������  

디자인����������� ������������������  요소들을����������� ������������������  제각각����������� ������������������  여러����������� ������������������  파일이����������� ������������������  아닌.����������� ������������������  한����������� ������������������  두����������� ������������������  파일에����������� ������������������  모두����������� ������������������  모아����������� ������������������  배치하는����������� ������������������  방식����������� ������������������  

2-1����������� ������������������  

CSS����������� ������������������  Sprites����������� ������������������  의����������� ������������������  강점����������� ������������������  

HTTP����������� ������������������  요청����������� ������������������  최소화����������� ������������������  

용량����������� ������������������  절감����������� ������������������  

수십����������� ������������������  수백번의����������� ������������������  HTTP����������� ������������������  Request����������� ������������������  à����������� ������������������  단����������� ������������������  1번의����������� ������������������  HTTP����������� ������������������  Request����������� ������������������  

중복되는����������� ������������������  색상����������� ������������������  데이터����������� ������������������  제거로����������� ������������������  파일����������� ������������������  용량����������� ������������������  절감����������� ������������������  효과����������� ������������������  

����������� ������������������  

2-1����������� ������������������  

CSS����������� ������������������  Sprites����������� ������������������  

•  많은����������� ������������������  사이트들이����������� ������������������  사용하고����������� ������������������  있는����������� ������������������  방법����������� ������������������  

좌상단부터����������� ������������������  youtube,����������� ������������������  facebook,����������� ������������������  google,����������� ������������������  twitter����������� ������������������  

2-1����������� ������������������  

CSS����������� ������������������  Sprites����������� ������������������  의����������� ������������������  약점����������� ������������������  

만들기����������� ������������������  어렵다����������� ������������������  

구현����������� ������������������  난이도����������� ������������������  증가����������� ������������������  à����������� ������������������  개발����������� ������������������  유지비용����������� ������������������  증가����������� ������������������  

수정����������� ������������������  시����������� ������������������  다����������� ������������������  뜯어고치는����������� ������������������  불상사…⋯����������� ������������������  

제한적����������� ������������������  사용은����������� ������������������  성능����������� ������������������  향상효과����������� ������������������  미미����������� ������������������  ����������� ������������������  

유지보수가����������� ������������������  어렵다����������� ������������������  몇����������� ������������������  개만����������� ������������������  해봤자…⋯����������� ������������������  

2-1����������� ������������������  

CSM����������� ������������������  -����������� ������������������  CSS����������� ������������������  Sprites����������� ������������������  Matrix����������� ������������������  

E-HRM����������� ������������������  (Extreme����������� ������������������  HTTP����������� ������������������  Request����������� ������������������  Minimization)����������� ������������������  

이미지����������� ������������������  요청����������� ������������������  수를����������� ������������������  극단적으로����������� ������������������  줄여����������� ������������������  CSS����������� ������������������  Sprites����������� ������������������  활용����������� ������������������  

유지보수����������� ������������������  관리에도����������� ������������������  용이하도록����������� ������������������  재설계����������� ������������������  

특징����������� ������������������  

Matrix����������� ������������������  배열����������� ������������������  

이미지����������� ������������������  개수����������� ������������������  제한����������� ������������������  

해상도����������� ������������������  제한����������� ������������������  

PNG����������� ������������������  포멧����������� ������������������  

+����������� ������������������  ����������� ������������������  자동����������� ������������������  생성����������� ������������������  도구����������� ������������������  

2-2����������� ������������������  

매트릭스����������� ������������������  배열����������� ������������������  

10x10����������� ������������������  매트릭스����������� ������������������  형태의����������� ������������������  이미지����������� ������������������  배치����������� ������������������  ����������� ������������������  à����������� ������������������  ����������� ������������������  셀����������� ������������������  단위����������� ������������������  이미지����������� ������������������  배열����������� ������������������  

이미지����������� ������������������  판의����������� ������������������  공간����������� ������������������  활용도를����������� ������������������  높임����������� ������������������  

유지보수가����������� ������������������  쉬워짐����������� ������������������  

2-2����������� ������������������  

최대����������� ������������������  이미지����������� ������������������  개수����������� ������������������  제한����������� ������������������  

2개����������� ������������������  이하����������� ������������������  /����������� ������������������  페이지����������� ������������������  

최대����������� ������������������  해상도����������� ������������������  제한����������� ������������������  

3메가픽셀����������� ������������������  1024x1024x3����������� ������������������  

2-2����������� ������������������  

최대����������� ������������������  이미지����������� ������������������  개수����������� ������������������  및����������� ������������������  해상도����������� ������������������  제한����������� ������������������  

UI구성요소����������� ������������������  이미지를����������� ������������������  2개����������� ������������������  이하로����������� ������������������  제한����������� ������������������  à����������� ������������������  페이지����������� ������������������  응답속도����������� ������������������  극대화����������� ������������������  

NAVER����������� ������������������  me����������� ������������������  1000가지����������� ������������������  아이콘����������� ������������������  à����������� ������������������  1개����������� ������������������  png����������� ������������������  파일����������� ������������������  

2-2����������� ������������������  

최대����������� ������������������  이미지����������� ������������������  개수����������� ������������������  및����������� ������������������  해상도����������� ������������������  제한����������� ������������������  

UI구성요소����������� ������������������  이미지를����������� ������������������  2개����������� ������������������  이하로����������� ������������������  제한����������� ������������������  à����������� ������������������  페이지����������� ������������������  응답속도����������� ������������������  극대화����������� ������������������  

NAVER����������� ������������������  me����������� ������������������  1000가지����������� ������������������  아이콘����������� ������������������  à����������� ������������������  1개����������� ������������������  png����������� ������������������  파일����������� ������������������  

2-2����������� ������������������  

PNG����������� ������������������  Format����������� ������������������  

투명(Alpha)지원,����������� ������������������  무손실,����������� ������������������  고효율����������� ������������������  압축방식인����������� ������������������  PNG����������� ������������������  8bit����������� ������������������  포멧을����������� ������������������  사용����������� ������������������  

8bit����������� ������������������  컬러로����������� ������������������  표현할����������� ������������������  수����������� ������������������  없는����������� ������������������  요소(날씨����������� ������������������  구름)는����������� ������������������  PNG����������� ������������������  24bit����������� ������������������  포멧����������� ������������������  선택적����������� ������������������  사용����������� ������������������  

m.naver.com����������� ������������������  

2-3����������� ������������������  

얼마나����������� ������������������  좋아졌나?����������� ������������������  

2-3����������� ������������������  

사용자����������� ������������������  서비스����������� ������������������  응답속도����������� ������������������  향상,����������� ������������������  네트워크����������� ������������������  전송량����������� ������������������  절감����������� ������������������  

•  전송용량은����������� ������������������  87%,����������� ������������������  속도는����������� ������������������  36%����������� ������������������  감소����������� ������������������  ����������� ������������������  

•  HTTP����������� ������������������  Request����������� ������������������  1건����������� ������������������  당����������� ������������������  헤더����������� ������������������  파일����������� ������������������  크기가����������� ������������������  약����������� ������������������  300bytes����������� ������������������  ,����������� ������������������  이미지����������� ������������������  갯수����������� ������������������  축소만으로도����������� ������������������  속도����������� ������������������  개선����������� ������������������  가능����������� ������������������  

•  이미지파일����������� ������������������  칼라테이블����������� ������������������  통합으로����������� ������������������  이미지����������� ������������������  전체����������� ������������������  파일����������� ������������������  용량도����������� ������������������  감소,����������� ������������������  CSS����������� ������������������  용량����������� ������������������  증가����������� ������������������  영향����������� ������������������  상쇄

기존방식����������� ������������������   CSM����������� ������������������  방식����������� ������������������   %����������� ������������������  

요청횟수����������� ������������������   16����������� ������������������   1����������� ������������������   -94%����������� ������������������  

전송용량����������� ������������������   6,386bytes����������� ������������������   854bytes����������� ������������������   -87%����������� ������������������  

로딩속도����������� ������������������   0.078s����������� ������������������   0.050s����������� ������������������   -36%����������� ������������������  

기준����������� ������������������  :����������� ������������������  2011.1����������� ������������������  네이버����������� ������������������  메인����������� ������������������  블릿����������� ������������������  이미지����������� ������������������  ����������� ������������������  

2-4����������� ������������������  

사용자����������� ������������������  서비스����������� ������������������  응답속도����������� ������������������  향상,����������� ������������������  네트워크����������� ������������������  전송량����������� ������������������  절감����������� ������������������  

•  이미지����������� ������������������  용량����������� ������������������  1024Kb����������� ������������������  à����������� ������������������  603Kb����������� ������������������  

•  이미지����������� ������������������  호출����������� ������������������  수����������� ������������������  52개����������� ������������������  à����������� ������������������  27개 ����������� ������������������  ����������� ������������������  

•  평균����������� ������������������  로딩����������� ������������������  속도����������� ������������������  2.8초����������� ������������������  à����������� ������������������  1.0초����������� ������������������  (63%����������� ������������������  추가����������� ������������������  단축)����������� ������������������  

2.8 2.6 2.6

2.8 2.7 2.7 2.9 2.8 2.8 2.8

2.0

1.1 1.0 1.1 1.1 1.1 1.0 1.0 1.0 1.0 1.0 1.1 1.1 1.0 1.0 1.0 1.0 1.0 1.0 1.1 1.1

1 3 5 7 9 11 13 15 17 19 21 23 25 27 29 31

CSM����������� ������������������  적용����������� ������������������  (2011.����������� ������������������  5.����������� ������������������  11)����������� ������������������  

2-5����������� ������������������  

저걸����������� ������������������  언제����������� ������������������  다����������� ������������������  만들어요?����������� ������������������  

2-5����������� ������������������  

N-MET����������� ������������������  Sprites����������� ������������������  Generator����������� ������������������  

•  CSM����������� ������������������  가이드라인에����������� ������������������  맞게����������� ������������������  CSM����������� ������������������  이미지와����������� ������������������  CSS����������� ������������������  파일을����������� ������������������  자동����������� ������������������  생성해주는����������� ������������������  자동화����������� ������������������  개발도구����������� ������������������  

2-5����������� ������������������  

N-MET����������� ������������������  Sprites����������� ������������������  Generator����������� ������������������  

•  CSM����������� ������������������  가이드라인에����������� ������������������  맞게����������� ������������������  CSM����������� ������������������  이미지와����������� ������������������  CSS����������� ������������������  파일을����������� ������������������  자동����������� ������������������  생성해주는����������� ������������������  자동화����������� ������������������  개발도구����������� ������������������  

2-5����������� ������������������  

N-MET����������� ������������������  Sprites����������� ������������������  Generator����������� ������������������  

•  CSM����������� ������������������  가이드라인에����������� ������������������  맞게����������� ������������������  CSM����������� ������������������  이미지와����������� ������������������  CSS����������� ������������������  파일을����������� ������������������  자동����������� ������������������  생성해주는����������� ������������������  자동화����������� ������������������  개발도구����������� ������������������  

2-5����������� ������������������  

N-MET����������� ������������������  Sprites����������� ������������������  Generator����������� ������������������  

•  CSM����������� ������������������  가이드라인에����������� ������������������  맞게����������� ������������������  CSM����������� ������������������  이미지와����������� ������������������  CSS����������� ������������������  파일을����������� ������������������  자동����������� ������������������  생성해주는����������� ������������������  자동화����������� ������������������  개발도구����������� ������������������  

html.nhncorp.com����������� ������������������