Which of the following statements is better for the import and link Operations in Css? What is the difference?

Source: Internet
Author: User
Tags advantage


Taobao web pages use import, while many websites use link. Of course, some websites with relatively simple pages and high traffic directly write CSS in html code? What are their differences? Is it better to use import or link for css? I learned about it from the classic Forum and another website:

1. Most of the Taobao web pages are written as follows:

2. Many websites use link:

3. Websites such as google Baidu 163 are directly written on webpages.

Differences between import and link

Of course, the advantage of using link links and import is that it is easy to maintain, but when the network speed is slow, loading interruption may occur, leading to page layout errors.

They work the same way.

The only difference is that the service objects are different.

@ Import serves CSS

Link is the current page service.

Some netizens often say that @ import will give priority to execution.

Essentially, both methods are used to load CSS files, but there are still slight differences.

Difference 1:

Old ancestor's difference. Link is an XHTML label, and @ import is a method provided by CSS.

In addition to loading CSS, link labels can also do many other things, such as defining RSS and rel connection attributes. @ import can only load CSS.

Difference 2:

The differences in the loading sequence. When a page is loaded (that is, when it is browsed by a browser), the CSS referenced by link is loaded at the same time, the CSS referenced by @ import will be loaded after all the pages are downloaded. So sometimes, when you browse the page where @ import loads CSS, there will be no style (that is, flashing) at the beginning, and the speed is quite slow (mengzhidu loads CSS by using @ import, the above problem occurs when I download and browse the dream capital web page ).

Difference 3:

Compatibility differences. Because @ import is proposed by CSS2.1, it is not supported by the old browser. @ import can be identified only when it is later than IE5, but the link label does not have this problem.

Difference 4:

Differences when using dom to control styles. When using javascript to control the dom to change the style, only link labels can be used, because @ import is not controllable by dom.

Basically, there are several differences (if there are any differences, let me know and I will add them). The others are the same. From the above analysis, it is better to use the link label.

As for why google directly writes CSS on pages, I think many people know that because these websites have a high page views, the most important thing is speed. If you use link, each time there will be one more request, so many page views, the server will certainly increase a lot of burden, while the side in the HTML document, but not much, so the advantage is still very obvious.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.