search

Home >Web Front-end >HTML Tutorial >The difference and choice between @import and link_html/css_WEB-ITnose

The difference and choice between @import and link_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:50:461299browse

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>

Difference

  • Loading order:

    • Link is to load the css file to the web page first, and then compile it. @import loads the html structure first and then the css file. If the network speed is slow, it will affect the visual effect.

    Link ensures that css files are downloaded in parallel, @import is downloaded one by one.

    In IE, link will block @import and extend the loading time. The use of multiple @imports will also disrupt the download order of resource files and cause js problems.

  • Compatibility: link is an xhtml tag and has no compatibility issues. @import is proposed by css2.1 so it does not support browsers before IE5.
  • DOM support: link supports DOM change style, @import does not support it.
  • In addition, the link tag can also call js files, declaration directories, etc. @import can only load css.

    • Select

  • Use link:

    • 　link to select the media to load. Due to the above loading, compatibility and IE reasons, ordinary sites should try to use link.

  • Use @import:

    • 　　　 Large portal websites (such as Taobao) linking multiple pages to the same css file will cause a slowdown, @import Style sheets can be transferred into css to facilitate modular management of css.

    Reference materials:

    High-performance website design: don’t use @import

    [Discussion] What are the advantages of @import calling style sheets?

    The difference between @import and link to external style sheet

    Statement：
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
    Previous article：Detailed tutorial on getting started with css_html/css_WEB-ITnoseNext article：Detailed tutorial on getting started with css_html/css_WEB-ITnose

    Related articles

    See more