@import를 사용하기 전에 알고 사용하자!!

Steve Souders씨가 In Chapter 5 of High Performance Web Sites책에서 언급을 했었고,
이번  Web 2.0 Expo에서 더 자세하게 발표를 하셨고 그걸 정리해서 올리신 내용입니다.
왜 import를 지양하는지에 대해서 자세한 설명을 해주셨네요.
뭐 결론적으로는 link를 쓰는것이 import를 쓰는것보다 빠르다이구요 ㅋㅋㅋ.

왜 그런지 구체적인 내용으로 들어가보도록 하겠습니다.

1. LINK vs. @import

<link rel='stylesheet' href='a.css'>
@import url('a.css');
이렇게 두가지 방법이 있습니다. link를 쓰는것이 import를 쓰는것보다 속도향상적인 면에서 
뛰어납니다.

2. @import @import

<style>
@import url('a.css');
@import url('b.css');
</style>
<script src='one.js' type='text/javascript'></script>
이렇게 import를 연속으로 쓰는것은 페이지 로딩중에 스크립트오류가 발생할 수 
있음에도 불구하고(순서가 어떻든 스크립트가 먼저 로딩되기 때문입니다.)
페이지의 속도 면에서는 문제될것이 없습니다.

         하지만 style과 import를 같이 사용할 경우 속도 문제가 발생합니다.

3. LINK @import

<link rel='stylesheet' type='text/css' href='a.css'>
<style>
@import url('b.css');
</style>
IE(6,7,8)에서는 이러한 방법이 stylesheets를 나눠서 다운로드하는것을 
야기시킵니다.
페이지 속도 향상의 주요한 내용중 하나는 정보를 병행해서 읽어드리는 것입니다..
하지만 아래 그래프와 같이 html,link,import식으로 나눠서 읽어 드려 페이지의 
속도를 느리게 되는 것을 야기시킵니다.

4. LINK with @import

<link rel='stylesheet' type='text/css' href='a.css'>

in a.css:

@import url('b.css');
위와 같은 방식은 병행적으로 스크립트를 로딩하는것을 막습니다. 즉 a.css를 다운로드 후 b.css를
fetch하기 시작하는 것을 아래와 같이 볼 수 있습니다. 
결론적으로 link에서의 import사용은 병행적인 다운로드를 할 수 없게 합니다.

5.LINK blocks @import

in the HTML document:

<link rel='stylesheet' type='text/css' href='a.css'>
<link rel='stylesheet' type='text/css' href='proxy.css'>

in proxy.css:

@import url('b.css');
a.css는 link가 사용되어 졌고, proxy.css는 새로운 link로 연결되었다. proxy.css는 @import로
되어있는 b.css를 포함하고 있습니다.
IE에서 이러한 예의 결과를 FIgure4를 보시면 됩니다. 읽어드린 순서는 1.html, 2.a.css, 3.proxy.css,
4.b.css 신기하게도 a.css가 끝날때까지 b.css를 다운로드하지 않았습니다. 다른브라우져에서는 
이런 현상이 발생되지 않았으며 Figure5에서 빠른 페이지 결과를 보실 수 있습니다.

6. many @imports

<style>
@import url('a.css');
@import url('b.css');
@import url('c.css');
@import url('d.css');
@import url('e.css');
@import url('f.css');
</style>
<script src='one.js' type='text/javascript'></script>
@import를 많이 사용한다면 IE에서는 순서가 뒤섞여 다운로드 됩니다. 이여섯개의 스타일 예는
스크립트 로드후에 다운로드 됩니다. Figure6을 보면 가장 긴 빨간선이 스크립트이고 4초의 
로드시간이 걸립니다.
스크립트 부분이 리스트의 마지막에 있음에도 불구하고 IE에서 가장 처음 다운드 됩니다. 
만약 스크립트코드를 포함한다면 stylesheeets(ex:getElementsByClassName등)로부터 
적용된 스타일들에 의존한다면 예상할 수 없는 결과들이 일어날것입니다. 
왜냐하면 개발자들이 스크립트를 맨 마지막목록에 넣었음에도 불구하고 style이 로드되기 
이전에 먼저 로드됩니다.

6. Link Link

<link rel='stylesheet' type='text/css' href='a.css'>
<link rel='stylesheet' type='text/css' href='b.css'>
위와같이 link를 사용한 스타일시트 사용방법이 가장 안전합니다. Link를 이용한다면
모든 브라우져에서의 병행 다운로드를 보장합니다. Figure7을 보면 Link를 사용하여
개발자가 원하는대로 순서대로 다운로드되는 것을 보장합니다.



이러한 이슈들은 IE에서 알려주어야합니다. 리소스를 낭비시키지 않고 개발자가 원하는 순서대로 다운로드
되어야합니다. 그리고 브라우져들이 변화함에도 불구하고 위와같은 이유로 @import보다 Link를 사용하길 권장합니다.

http://www.stevesouders.com/blog/2009/04/09/dont-use-import/(원문 : Steve Souders - don’t use @import)

덧글

[최동호]

땡스 남산 쵝오 리뉴얼할때 메샵에 적극적으로 반영해볼란다 ^^ㅋㅋㅋ

[seye2]

그래 잘해 지켜보고있어

[woo2life]

종흔 정보 감사합니다. bookmark해서 잊지 않도록 하겠습니다~