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.