Upload
nts-nuli
View
371
Download
3
Embed Size (px)
DESCRIPTION
Citation preview
이준행����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ |����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ 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����������� ������������������