Do not use @import for high-performance Web site design

Intermediary transaction SEO diagnosis Taobao guest Cloud host technology Hall

In the fifth chapter of High-performance Web Design, I briefly mentioned that @import has some negative impact on the performance of the site, and then I explored the problem in a 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 style sheet to load in parallel to make the page faster, use link instead of @import.

LINK vs. @import

As you know, there are two ways to import a style file into 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's simpler-and if you use @import, you have to always remember to put @import in front of the style code, otherwise it won't work. And it turns out that avoiding the use of @import is also good for Web site performance.

@import @import

I'll explore the difference 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, which we call the @import @import, can be written in HTML code:

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

If you have been using @import this way, 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 I (the first small request is HTML for that file). The problem is now when @import is nested into other styles or used in conjunction with link.

Figure I: Always use @import is OK

LINK @import

This link @import example uses link load a.css to import b.css using @import:

<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 stylesheet files to be loaded one by one, as shown in Figure Ii. Concurrent downloading of resources is a key to accelerating the page. As illustrated, this method in IE will cause the page to take more time to load.

Figure Two. Link mixing @import in IE destroys parallel downloads

Link nesting @import

In this link nesting @import example, A.CSS is inserted into the page through link, and then a.css through the @import rule to introduce B.CSS:

HTML code:

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

In A.css:

@import url (' b.css ');

This approach also prevents code from being loaded in parallel, but this time it is for all browsers. In fact, this should not let us feel strange, simply think about it will be able to understand. The browser must download A.CSS first and analyze it, at which point the browser discovers the @import rule before it starts loading the b.css.

Figure Three. Using @import in a style file loaded through link will break parallel downloads in all browsers.

LINK Blocking @import

The example above makes a subtle change in IE that can cause amazing results: Using link to import a.css and a new style file PROXY.CSS. PROXY.CSS does not add additional styles, 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 Code:

@import url (' b.css ');

This example runs in IE with the result that LINK blocks @import and is shown in Figure four. 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 (also takes two seconds). Shockingly, IE will not start downloading b.css until the download a.css is complete. But in all other browsers, this doesn't happen, and the results page shows up faster. Shown in figure five below.

Figure Four. In IE, LINK blocks other style files embedded using @import.

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 can cause resources to be downloaded in a different order than expected. This example has 6 style sheets (each will take two seconds of download time) and followed by a JS script file (which requires 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>

Take a look at figure six, the longest strip is a script that takes four seconds. Although it is listed at the end of the code, it is first downloaded in IE. If the script contains code that has been applied from a style sheet file, such as Getelementsbyclassname, then unexpected results may occur because the script is loaded before the style, although the developer places it at the end of the code.

Figure six @import the order in which the download of resource files is thrown 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 ' >

Use link to ensure that styles are downloaded in parallel in all browsers. This example of link link illustrates this, as shown in Figure VII. Link also ensures that resources are downloaded in the order developed by the developer.

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

All these questions need to be taken into account ie. The very bad thing about it is that the resource files may end up downloading in individual places, and all browsers should perform some forward-looking when downloading style files to import all @import rules and download them immediately (through @import imported styles). Knowing that all browsers have become this way, I recommend avoiding @import and using link to insert styles all the time.

More Tests

According to the reader's feedback, the original author added two tests: Using @imports link and multiple links, each inserting 4 style files into an HTML file. Use link to load proxy.css with @imports, and then proxy.css load 4 style files using @import. Examples of links, there are 4 link tags in the HTML file to introduce 4 style files (which is exactly the method I recommend). These two HTTP waterfall graphs are shown in Figure eight and figure nine:

Figure Eight: Link with @imports

Figure Nine: Multiple link

Looking at the demo using @imports link, the first problem is that the 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 immediately download these style files.

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

The load time of page resources is exaggerated to simply see what's going on. But for users who use narrowband or slow speeds, especially in emerging markets, these response times may be a bit off the ground.

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

Using @import in IE will cause the download order of files to be changed. This will cause the style file to take longer to download, which can hinder the rendering of the page and make the page more slow.

Article from: www.cn8f.com