CSS : Link vs. @import

@import @import

CODE

<style>

@import url(‘a.css’);

@import url(‘b.css’);

</style>

import-import.gif

A.css와 B.css가 같이 다운로드 진행 됨

 

LINK @import

CODE

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

<style>

@import url(‘b.css’);

</style>

link-import.gif

IE에서 A.css가 다운로드 완료 후 B.css가 다운로드 진행 됨

LINK with @import

CODE

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

in a.css:

@import url(‘b.css’);

link-with-import.gif

A.css가 다운로드 완료 후 B.css가 다운로드 진행 됨

LINK blocks @import

CODE

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’);

link-blocks-import.gif

IE의 경우 A.css 다운로드 와 Proxy.css가 병렬 다운 로드 진행 된 후 a.css가 다운로드 완료후에 Import되어있는 b.css가 다운로드 진행 됨

link-blocks-import-not-ie.gif

 다른 브라우저의 경우 A.css와 proxy.css가 병렬 다운로드 되며 proxy.css가 다운로드 완료 후 b.css가 다운로드 진행 됨

 

many @imports

CODE

<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>

many-imports.gif

IE의 경우 js파일이 최초로 다운 로드 되며 그 후 css파일이 다운 로드 됩니다. 만약 script에서 예를 들어getElementsByClassName와 같이 style을 참조 하는 경우에는 예기치 않은 오류가 생길 수 있습니다.

 

LINK LINK

CODE

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

<link rel=’stylesheet’ type=’text/css’ href=’b.css‘>

import-import.gif

A.css와 B.css가 같이 다운로드 진행 됨

이라고 정리되어 있습니다.

그리고 4월달에 업데이트 하여 추가로 작성한 내용은

Import를 사용했을 경우와 사용하지 않았을 경우의 다운로드 순서 및 퍼포먼스에 대한 내용을 정리하고 있는데요

예를 들어 a.css의 안에 @import한 css가 4개가 있는 경우와 link로 html페이지 내에 4개의 css를 걸었을 경우가 있다고 했을 때 그리고 그 안쪽에 js파일도 링크가 되어있다고 했을 경우 다운 로드는 아래와 같이 이루어 집니다.

link-with-imports.gif

 

Import된 파일

many-links.gif

Link된 파일

첫번째 문제는 import를 시킨 파일의 경우 stylesheet 를 a.css가 다운로드 한 후 import된 css를 다운 로드를 진행 합니다.반면 Link된 파일은 바로 다운로드를 진행 합니다.

두번째 문제는 IE에서 다운로드 순서를 바꾼다는 점입니다. 다른 브라우저의 경우 Import된 css를 다운로드 후 script파일을 진행 하지만 IE의 경우 import된 css가 다운로드 되기 전에 script파일을 다운 로드 하게 됩니다.


이 글을 다 읽어주셨다면, 댓글을 남겨주세요. 좋았다라는 격려도 좋고, 잘못된 부분을 지적해 주시는 것도 좋습니다. 마음에 드셨다면 아래 Like 버튼을 눌러서 페이스북과 트위터로 소개해 주시면 더욱 좋겠습니다.