높은-성능 웹 사이트 디자인에 대 한 @import를 사용 하지 마십시오

중간 거래 SEO 진단 Taobao 게스트 클라우드 호스트 기술 홀

높은-성능 웹 디자인의 다섯 번째 챕터에서 나 간단히 언급 @import 사이트의 성능에 몇 가지 부정적인 영향을가지고 내가 웹 2.0 엑스포 연설에서 문제를 탐험 그리고 몇 가지 테스트 페이지 및 HTTP 폭포 차트, 아래 사용 될 것입니다. 이 질문에 대 한 결론은: 빠르게 페이지를 만드는 동시에 로드할 스타일 시트를 원하는 경우 링크를 사용 하 여 @import 대신.

@import 대 링크

당신이 알고, 두 가지 방법으로 귀하의 페이지에 스타일 파일을 가져올 수 있다. 링크 태그를 사용할 수 있습니다.

< 연결 rel = '스타일' href = ' a.css ' / >

또는 @import 메서드를 사용 하 여:

< 스타일 >
@import url ('a.css');
</스타일 >

그것은 간단 하기 때문에 링크를 사용 하는 것을 선호-그리고 @import를 사용 하는 경우에, 당신은 @import 스타일 코드 앞에 넣어 항상 기억할 필요가, 그렇지 않으면 작동 하지 않습니다. 그리고 그것은 또한 웹 사이트의 성능에 대 한 좋은 @import의 사용을 피하는 밖으로 변합니다.

@import @import

내가 링크와 @import 두 가지 방법의 차이 찾아보기 거 야. 이 예제에서는 두 개의 스타일 시트: A.css 및 B.css. 각 스타일 시트는 사이트의 성능에 미치는 영향을 보고 쉽게 그것 다운로드, 2 초 정도 걸릴 하도록 구성 됩니다. 첫 번째 예제에서는 두 개의 스타일 파일을 가져오려면 @import를 사용 합니다. @import @import를 호출 하 고,이 예제는 HTML 코드에 작성할 수 있습니다.

< 스타일 >
@import url ('a.css');
@import url ('b.css');
</스타일 >

만약 당신이 사용 하 고 @import가이 방법, 하지만이 경쟁 조건으로 인해 자바 스크립트 오류가 발생할 수 있습니다 성능 문제가입니다. 2 스타일 파일 (첫 번째 작은 요청은 HTML 파일에 대 한) 나 그림에서와 같이 동시에 다운로드 됩니다. 문제는 지금 때 @import 다른 스타일으로 중첩 또는 링크와 함께 사용.

그림 1: 항상 사용 @import 괜찮습니다.

링크 @import

사용 하 여 연결 부하 a.css b.css @import를 사용 하 여 가져올이 링크 @import 예:

< 연결 rel = '스타일' 유형 ' text/css ' href = 'a.css' =
< 스타일 >
@import url ('b.css');
</스타일 >

그림 2에서와 같이 IE (6, 7, 및 8에서 테스트), 그러면 스타일 시트 파일을 로드 한. 자원의 동시 다운로드 페이지를 가속에 열쇠 이다. 같이, IE에서이 메서드는 페이지 로드에 더 많은 시간을 발생 합니다.

그림 2입니다. 병렬 다운로드를 파괴 하는 IE에서 @import 혼합 링크

중첩 @import 링크

이 예에서 링크 중첩 @import A.CSS 링크를 통해 페이지 그리고 B.CSS를 소개 하는 @import 규칙을 통해 a.css에 삽입 됩니다.

HTML 코드:

< 연결 rel = '스타일' 유형 ' text/css ' href = 'a.css' =

A.css에:

@import url ('b.css');

이 방법은 또한 병렬로 로드 되지 코드를 방지 하지만이 시간 그것은 모든 브라우저에 대 한. 사실,이 하지 우리가 느껴야 이상한, 단순히 그것에 대해 생각을 이해할 수 있을 것입니다. 브라우저는 먼저 A.CSS를 다운로드 하 고 어느 시점에서 브라우저에서 b.css를 로드 시작 하기 전에 @import 규칙을 발견, 그것을 분석 해야 합니다.

그림 3입니다. 링크를 통해 로드 스타일 파일의 @import를 사용 하 여 모든 브라우저에서 병렬 다운로드를 중단 합니다.

@import 차단 링크

위의 예제에서는 놀라운 결과 일으킬 수 있는 IE에 미묘한 변화를 만드는: a.css 및 PROXY.CSS 파일을 새로운 스타일 가져오기 링크를 사용 하 여. PROXY.CSS 추가 스타일을 추가 하지 않습니다, 그리고 @import 규칙을 통해 b.css를 수입 하는 데 사용만.

HTML 코드는 다음과 같습니다.

< 연결 rel = '스타일' 유형 ' text/css ' href = 'a.css' =
< 연결 rel = '스타일' 유형 ' text/css ' href = 'proxy.css' = >

PROXY.CSS 코드:

@import url ('b.css');

이 예제에서는 링크 @import를 차단 하 고 그림 4에에서 표시 된 결과 함께 IE에서 실행 됩니다. 첫 번째 요청 하는 HTML 문서입니다. 두 번째 요청은 A.css (2 초 했다), 그리고 세 번째 (아주 작은) 요청 했다 proxy.css. 네 번째 요청은 B.CSS (또한 2 초 정도 걸립니다). 놀랍게도, IE b.css을 다운로드 하는 다운로드 a.css 완료 될 때까지 시작 되지 않습니다. 하지만 다른 모든 브라우저에서이 발생 하지 않습니다, 그리고 결과 페이지를 더 빨리 나타난다. 그림 5 아래에 나와 있습니다.

그림 4입니다. IE에서 링크는 @import를 사용 하 여 임베디드 다른 스타일 파일을 차단 합니다.

그림 5입니다. 비 IE 브라우저에서 링크는 @import 포함 된 스타일 시트를 차단 하지 않습니다.

여러 @imports

이 여러 @imports를 사용 하 여 예제는 IE에서 @import를 사용 하 여 예상 보다 다른 순서로 다운로드할 수 리소스를 발생할 수 있습니다. 이 예제에서는 (각 다운로드 시간 2 초를 걸릴 것 이다) 6 스타일 시트는 JS 스크립트 파일 (요구 하는 다운로드 4 초) 선행 하 고.

< 스타일 >
@import url ('a.css');
@import url ('b.css');
@import url ('c.css');
@import url ('d.css');
@import url ('e.css');
@import url ('f.css');
</스타일 >
< 스크립트 유형 = "텍스트/자바 스크립트" src = "One.js" >< / 스크립트 >

그림 6 보면, 가장 긴 스트립 스크립트를 4 초 정도 걸립니다. 코드의 끝에 나열 되어 있지만 처음 IE에서 다운로드 됩니다. 스크립트 코드가 Getelementsbyclassname는 스타일 시트 파일에서 적용 된 경우 다음 예기치 않은 결과가 발생할 수 있습니다 스타일, 전에 스크립트 로드 되기 때문에 개발자는 코드의 끝에 그것을 배치 하지만.

그림 6 @import는 리소스 파일의 다운로드는 IE에서 throw 순서 중단

링크 링크

링크를 사용 하 여 스타일을 소개 하는 간단 하 고 더 안전한:

< 연결 rel = '스타일' 유형 ' text/css ' href = 'a.css' =
< 연결 rel = '스타일' 유형 ' text/css ' href = 'b.css' = >

링크를 사용 하 여 스타일 모든 브라우저에 병렬로 다운로드 되도록. 이 링크를 링크의 예제, 그림 7에서과 같이입니다. 링크는 또한 리소스는 개발자에 의해 개발 된 순서 대로 다운로드 됩니다 보장 합니다.

그림 7 세: 모든 브라우저 병렬로 다운로드 받을 수 있도록 링크를 사용 하 여

이러한 모든 질문 즉 계정에 주의가 필요 합니다. 그것에 대해 아주 나쁜 것은 리소스 파일, 개별 장소에 다운로드 될 수 있습니다 및 모든 브라우저를 모든 @import 규칙을 가져오고 즉시 (통해 가져온 @import 스타일) 그들을 다운로드 스타일 파일을 다운로드할 때 일부 적극적인 수행 해야 합니다. 모든 브라우저이 이런식으로 되고있다 알고, 난 것이 좋습니다 @import 피하 삽입 스타일 항상 링크를 사용 하 여.

더 많은 테스트

독자의 의견에 따라 저자는 두 가지 테스트 추가: @imports 링크와 여러 개의 링크를 사용 하 여 각 4 스타일 삽입 HTML 파일에 파일. 로드와 @imports, proxy.css 그리고 proxy.css를 사용 하 여 링크 4 스타일 파일 @import를 사용 하 여 로드 합니다. 예, 링크의 있다 4 링크 태그 (이 방법은 정확 하 게는 나는 것이 좋습니다) 소개 4 스타일 파일을 HTML 파일에. 이 두 개의 HTTP 폭포 그래프는 숫자 8과 그림 9에 나와 있습니다.

@imports와 숫자 8: 링크

그림 9: 여러 링크

@imports 링크를 사용 하 여 데모, 첫 번째 문제가입니다 4 스타일 파일 다운로드 proxy.css 부하 모든 브라우저에서 완료 될 때까지 시작 되지 것입니다. 다른 한편으로, 다중 링크 색은 즉시 이러한 스타일 파일을 다운로드합니다.

두 번째 문제는 IE 다운로드 순서를 변경. 페이지의 코드 (그림의 가장 긴 섹션)의 밑에 10 초 스크립트를 덧붙였다. 모든 비 IE 브라우저에서 @import 스타일 파일 (proxy.css 파일에 도입 된) 다음 스크립트 파일을 지정 된 순서에 따라 엄격 하 게 먼저 다운로드 됩니다. 그러나, IE에서 스크립트 삽입 됩니다 @import 스타일 앞 예제 @imports 링크를 사용 하 여 그림 8 세에. 스타일 파일을 다운로드 하는 더 많은 시간을 보내고 i e 6와 i e 7에서 그들은 긴 스크립트는 두 개의 사용 가능한 연결 중 하나에서 실행 될 때까지 기다려야 하기 때문에 발생 합니다. 그러나, IE 렌더링 하지 않습니다 페이지에 아무것도 때까지 스타일 파일을 다운로드 하 고이 방법으로 @import를 사용 하 여 최대 12 초 동안 빈 유지 페이지 발생할 수 있습니다. @import 대신 링크를 사용 하 여 그림 9 쇼에 나와 여러 링크와 마찬가지로 로드 순서를 유지 하. 이 경우에, 페이지 렌더링만 4 초 걸립니다.

페이지 리소스의 로드 시간을 단순히 보고 무슨 일인지 과장은. 그러나 신흥 시장에서 특히 협대역 또는 느린 속도 사용 하는 사용자에 대 한 이러한 응답 시간 지상에서 조금 있을 수 있습니다.

스타일 파일의 @import를 사용 하 여 추가 총 페이지 로드 시간 (즉, 페이지의 총 부하 시간 증가)에 반환

IE에서 @import를 사용 하 여 파일의 다운로드 순서를 변경 하면 됩니다. 이 페이지의 렌더링을 방해 하 고 더 느린 페이지를 만들 수 있는 스타일 파일 다운로드, 더 걸릴을 하면 됩니다.

기사: www.cn8f.com