CSS 가져오기와 link_Experience 교환의 차이점

몇몇 사이트의 페이지는 대부분 이렇게 작성되어 있는 것을 봤습니다



그리고 많은 사이트에서는 링크를 사용하고 있습니다



사이트 구글, 바이두163 등은 웹페이지에 직접 작성합니다

물론 링크와 가져오기를 사용하면 유지관리가 쉽다는 장점이 있지만 상대적으로 네트워크 속도가 느릴 경우 로딩이 중단이 발생하여 페이지 레이아웃 오류가 발생합니다

기능은 동일합니다

유일한 차이점은 서비스 개체가 다르다는 것입니다

@import는 CSS를 제공합니다

현재 페이지 서비스 링크입니다

일부 네티즌들은 @import가 먼저 실행될 것이라고 말했습니다.

외부 참조 CSS에서 link와 @import의 차이점

지난 이틀 동안 XHTML에서 CSS를 로드하는 여러 가지 방법을 작성했습니다. 그 중 외부 참조 CSS는 다음과 같습니다. 두 가지 방법: link 및 @import.

기본적으로 이 두 가지 방법은 CSS 파일을 로드하는 데 사용되지만 여전히 미묘한 차이가 있습니다.

차이점 1 : 조상의 차이. Link는 XHTML 태그에 속하며, @import는 전적으로 CSS에서 제공하는 메소드입니다.
링크 태그는 CSS를 로드하는 것 외에도 RSS 정의, rel 연결 속성 정의 등과 같은 다른 많은 작업도 수행할 수 있습니다. @import는 CSS만 로드할 수 있습니다.

차이점 2: 로딩 순서의 차이입니다. 페이지가 로드되면(즉, 뷰어가 볼 때) 링크에서 참조하는 CSS가 동시에 로드되는 반면, @import에서 참조하는 CSS는 페이지가 로드되기 전에 완전히 다운로드될 때까지 기다립니다. 따라서 @import가 CSS를 로드하는 페이지를 탐색할 때 스타일이 없을 때가 있습니다(깜박거림만 있을 뿐입니다). 이는 네트워크 속도가 느릴 때 매우 분명합니다(Dream City에서 CSS를 로드하는 방법은 @import를 사용하는 것입니다. 저는 다운로드합니다). 동시에 Dream City 웹 페이지를 탐색합니다.), 위의 문제가 발생합니다).

차이점 3: 호환성의 차이. @import는 CSS2.1에서 도입되었기 때문에 이전 브라우저에서는 이를 지원하지 않습니다. @import는 IE5 이상에서만 인식할 수 있지만 링크 태그에는 이러한 문제가 없습니다.

차이점 4: DOM을 사용하여 스타일을 제어할 때의 차이점. 스타일을 변경하기 위해 JavaScript를 사용하여 DOM을 제어할 때 @import는 DOM에서 제어할 수 없기 때문에 link 태그만 사용할 수 있습니다.

대략 이런 차이점이 있습니다(다른 차이점이 있으면 알려주시면 추가하겠습니다). 위의 분석에서는 링크 태그를 사용하는 것이 좋습니다.