Blog 본문

지식공유/이슈&버그


 작성자 : 유낙동 (다음서비스 웹표준개발2팀)


INTRO
  • - font 축약형을 사용했을때와 그렇지 않은경우 비교 분석
  • - 비교 분석 결과에 따른 성능 결과 도출

결론

  • - Font 축약형 사용시 불필요한 폰트속성이 추가 됨
  • - 위 결과를 토대로 yslow를 이용한 페이지 로딩 속도를 실험한 결과, 성능에는 큰 차이점을 보이지 않음

축약형 사용/미사용 비교분석

비교

  • - css 적용 전 마크업
    소스결과
    <div id="font">
    	<h1>heading</h1>
    	<p>paragraph</p>
    	<i>italic</i>
    	<b>bold</b>
    </div>
    



  • - 축약형 미사용시 요소별 default 속성을 그대로 유지

    소스
    결과
    <style type="text/css">
    #font * {font-size:12px;font-family:dotum;}
    </style>
    
    <div id="font">
    	<h1>heading</h1>
    	<p>paragraph</p>
    	<i>italic</i>
    	<b>bold</b>
    </div>
    



  • - 축약형 사용시 요소별 defalut 속성을 덮어쓰게되어 모든 font속성 초기화
    htmlview
    <style type="text/css">
    #font * {font:12px/15px dotum;}
    </style>
    
    <div id="font">
    	<h1>heading</h1>
    	<p>paragraph</p>
    	<i>italic</i>
    	<b>bold</b>
    </div>
    



분석

  • - 축약형을 사용한 경우,  선언하지 않은 불필요한 폰트 속성이 선언되어있음을 확인할 수 있음.
    • 크롬 Computed Style
      축약형 사용축약형 미사용





비교/분석에 따른 성능 비교

  • - 10000개의 동일한 마크업을 생성 후 축약형을 사용한 경우와 그렇지 않은 경우를 yslow를 이용하여 측정
  • - 페이지 로딩시간 분석 (총 10회 측정)
    축약형 사용여부1회2회3회4회5회6회7회8회9회10회평균
    미사용0.878s0.840s1.213s1.218s0.848s1.223s1.094s1.250s0.899s1.258s1.0721
    사용1.107s1.186s1.197s1.188s0.822s0.839s1.214s0.839s1.228s1.213s1.0833
  • - 성능 측정 결과 큰 차이점이 없음을 확인


'지식공유 > 이슈&버그' 카테고리의 다른 글

img 요소의 여백  (2) 2013.07.09
Posted by darum

전체 댓글