> 웹 프론트엔드 > HTML 튜토리얼 > @import与link的区别与选择_html/css_WEB-ITnose

@import与link的区别与选择_html/css_WEB-ITnose

WBOY
풀어 주다: 2016-06-24 11:50:46
원래의
1276명이 탐색했습니다.

link

1 <head>2     <link rel="stylesheet" type="text/css" href="sheet1.css" media="all">3 </head>
로그인 후 복사

@import

1 <style type="text/css">2     @import url(sheet1.css);      3 </style>
로그인 후 복사

区别

  • 加载顺序:
  •     link是先将css文件加载到网页,然后再进行编译。@import是先加载完html结构再加载css文件,如果网速较慢则会影响视觉效果。

        link确保并行下载css文件,@import是一个一个下载。

        在IE中,link会阻断@import延长加载时间,多个@import的使用还会打乱资源文件的下载顺序引发js问题。

  • 兼容性:link是xhtml标签无兼容问题,@import是css2.1提出的所以不支持IE5以前的浏览器。
  • DOM支持:link支持DOM改变样式,@import不支持。
  • 此外,link标签还可以调用js文件、声明目录等,@import只能加载css。
  • 选择

  •  使用link:
  •      link可以选定要加载的媒体media。由于上述加载、兼容与IE的原因,普通站点应当尽量使用link。   

  •  使用@import:
  •      大型门户网站(如淘宝)多个页面link同一个css文件会造成速度下降,@import可以在css中调入样式表,方便对css进行模块化管理。

     

    参考资料:

    高性能网站设计:不要使用@import

    [讨论]@import调用样式表的优势是什么呢?

    @import导入外部样式表与link链入外部样式表的区别

    원천:php.cn
    본 웹사이트의 성명
    본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
    인기 튜토리얼
    더>
    최신 다운로드
    더>
    웹 효과
    웹사이트 소스 코드
    웹사이트 자료
    프론트엔드 템플릿