High-performance web design: Do not use @import

In the fifth chapter of high-performance web design, I briefly mentioned that @import had some negative impact on the performance of the site, and then I explored the issue in the Web 2.0 Expo speech and created some test pages and HTTP waterfall charts, which will be used below. The bottom line for this question is: if you want the stylesheet to load in parallel to make the page faster, use link instead of @import.

LINK vs. @import

As you all know, there are two ways to import style files in your page. You can use the link tag:

<link rel= ' stylesheet ' href= ' a.css '/>

Or use the @import method:

　　<style>
@import url (' a.css ');
</style>

I prefer to use link because it is simpler--and if you use @import, you must always remember to put @import in front of the style code, otherwise it will not work. And it turns out that avoiding the use of @import is also good for website performance.

　　@import @import

I will explore the differences between link and @import two ways. In these examples, there are two style sheets: A.css and B.css. Each style sheet is configured to take two seconds to download, which makes it easier to see how they affect the performance of the site. The first example uses @import to import two style files. This example, what we call @import @import, HTML code can be written like this:

　　<style>
@import url (' a.css ');
@import url (' b.css ');
</style>

If you use @import this way all the time, there is no performance problem, although this may cause JavaScript errors due to race conditions. The two style files will be downloaded concurrently, as shown in Figure one (the first small request is the HTML file). The problem now is when @import is nested into other styles or used in conjunction with link.

　　

Figure one: Always use @import is possible

LINK @import

This link @import example uses link to load the a.css, using @import to import the B.CSS:

　　<link rel= ' stylesheet ' type= ' text/css ' href= ' a.css '/>
<style>
@import url (' b.css ');
</style>

In IE (tested in 6, 7, and 8), this causes the style sheet file to be loaded one by one, as shown in two. Downloading resources in parallel is a key to accelerating the page. As illustrated, this method in IE will cause the page to take more time to load complete.

　　

Figure Two. Link hybrid @import in IE can disrupt parallel downloads

Link nesting @import

In this link nested @import example, A.css is inserted into the page via link, and A.css introduces B.CSS through @import rules:

HTML code:

　　<link rel= ' stylesheet ' type= ' text/css ' href= ' a.css '/>

In the A.CSS:

@import url (' b.css ');

This also prevents parallel loading of the code, but this time is for all browsers. In fact, this should not make us feel strange, simply think about it to understand. The browser must download A.css first, and analyze it, and this time, the browser discovers the @import rule before it starts loading b.css.

　　

Might. Using @import in a style file loaded with link will break the parallel download in all browsers.

LINK Blocking @import

The above example makes a slight change, ie can cause amazing results: Use link to import a.css and a new style file PROXY.CSS. PROXY.CSS does not add an extra style, it is only used to import b.css through @import rules.

The HTML code is as follows:

　　<link rel= ' stylesheet ' type= ' text/css ' href= ' a.css '/>
<link rel= ' stylesheet ' type= ' text/css ' href= ' proxy.css ' >

PROXY.CSS's Code:

@import url (' b.css ');

The result of this example running in IE, LINK blocking @import, shown in Figure Iv. The first request is an HTML document. The second request was A.css (took two seconds), and the third (very small) request was proxy.css. The fourth request is B.CSS (it also took two seconds). It's shocking that IE won't start downloading b.css until the download a.css is complete. However, in all other browsers, this does not happen, and the resulting page is also displayed more quickly. As shown in five.

　　

Figure Four. In IE, LINK blocks other style files that use @import embedding.

　　

Figure Five. In non-IE browsers, link does not block @import embedded style sheets.

Multiple @imports

This example of using multiple @imports shows that using @import in IE will cause resources to be downloaded in a different order than expected. This example has 6 stylesheets (each of which takes two seconds to download) and followed by a JS script file (which takes four seconds to download).

　　<style>
@import url (' a.css ');
@import url (' b.css ');
@import url (' c.css ');
@import url (' d.css ');
@import url (' e.css ');
@import url (' f.css ');
</style>
<script type= "Text/javascript" src= "One.js" ></script>

Looking at 16, the longest strips are scripts that take four seconds. Although it is listed in the code at the end, but in IE, it is downloaded first. If the script contains code that has been applied from the style sheet file (such as Getelementsbyclassname), then unexpected results may occur because the script is loaded before the style, even though the developer puts it in the last side of the code.

　　

Figure six @import the download order of the resource files in IE is disrupted

Link link

Using link to introduce styles is simpler and more secure:

　　<link rel= ' stylesheet ' type= ' text/css ' href= ' a.css '/>
<link rel= ' stylesheet ' type= ' text/css ' href= ' b.css ' >

Using link ensures that styles can be downloaded in parallel in all browsers. This example of the link link demonstrates this, as shown in Figure VII. Using link also ensures that resources are downloaded in the order in which they are developed by developers.

　　

Figure VII: Use link to ensure that all browsers can be downloaded in parallel

These problems need to take into account ie. It is very bad that the resource files may end up downloading in individual places, and all browsers should perform some foresight in downloading the style files to import all the @import rules and download them immediately (via @import imported styles). Knowing that all browsers have become this way, I would recommend avoiding using @import and always using link to insert styles.

More Tests

According to the reader's feedback, the original author added two Tests: Using @imports's link and multiple links, each inserting 4 style files into an HTML file. Use link to load proxy.css using @imports, and then proxy.css to load 4 style files using @import. Multiple links example, there are 4 link tags in the HTML file to introduce 4 style files (This is my recommended method). These two HTTP waterfalls are shown in Figure eight and figure nine:

　　

Figure Eight: Link using the @imports

　　

Figure Nine: Multiple link

Take a look at the demo of using the @imports link, the first problem is that these four style files will not start downloading until the proxy.css load is complete, as in all browsers. On the other hand, multiple link colors download these style files at once.

The second problem is that IE changes the download order. I added a 10-second script at the very bottom of the page's code (the longest strip in the diagram). In all non-IE browsers, @import style files (introduced in the Proxy.css file) are downloaded first, then the script files, strictly in the order specified. However, in IE, the script is inserted before the @import style, as shown in Figure VIII in the example using the @imports link. This causes the style files to take more time to download because, in IE6 and IE7, they wait until the long script runs out of only one of the two available connections. However, before the style file is downloaded, IE does not render anything in the page, using @import in this way will cause the page to remain blank for up to 12 seconds. Using link instead of @import can keep the load order, as is the case with the multiple link shown in nine. In this case, the page rendering takes only four seconds.

The load time of a page resource is exaggerated to simply see what's going on. But for those who use narrow-band or slow speeds, especially in emerging markets, these response times may be somewhat far from real.

Using @import in a style file adds a more return to the overall page load time (that is, increasing the overall load time of the page)

Using @import in IE will cause the file download order to be changed. This also causes the style file to take longer to download, which prevents the page from rendering and makes the page more slow.

Article from: www.cn8f.com

High-performance web design: Do not use @import