Font 축약형 분석

작성자 : 유낙동 (다음서비스 웹표준개발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속성 초기화

  html	view
  <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.878s	0.840s	1.213s	1.218s	0.848s	1.223s	1.094s	1.250s	0.899s	1.258s	1.0721
  사용	1.107s	1.186s	1.197s	1.188s	0.822s	0.839s	1.214s	0.839s	1.228s	1.213s	1.0833

• - 성능 측정 결과 큰 차이점이 없음을 확인