Do not use @import
In this article, the author Steve Souders provides visual evidence why you should not use import to load styles into a document.
There are 2 ways to upload style files. Use LINK tag:
Or import files using import :
I prefer to use LINK for convenience, because you must remember that import must always be placed at the very top of the style block, otherwise they are not imported.
I want to talk about the various ways to use LINK and import . The following example lists 2 style files: a.css and b.css. Each download file takes exactly 2 seconds to make it convenient to track the effect on download speed in the future. The first example uses import to load both style files. In this example, called import import , the HTML document contains the following style block:
If you always use only import for loading styles, there will be no performance problems, although we will see below, this can lead to an error with javascript. Both files are loaded in parallel (see Figure 1). But problems start to appear if you use import inside the style file or with LINK.
Fig. one.
')
The LINK import example uses a LINK tag to load a.css, and import for b.css:
In IE (tested in 6, 7, and 8), this caused the files to be loaded sequentially one after the other, as shown in Figure 2. Accordingly, the page load time in IE will increase.
Fig. 2
In the import LINK example, the a.css file is loaded via LINK, and contains an import rule for b.css inside:
In the document:
in a.css:
This method also leads to the fact that the files are loaded sequentially (Fig. 3.), and not in parallel, but now it happens not only in IE, but also in other browsers. If you think about it, everything is logical: the browser loads a.css and starts parsing it. Upon finding the import rule inside, the b.css file starts loading.
Fig. 3
The slight difference from the previous example led to surprising results in IE. LINK is used to call a.css and for the new proxy.css file, which contains only import for b.css.
In the code :
In proxy.css:
The results of the experiment in IE are shown in Figure 4. The first query is an HTML document. The second request is a.css (2 seconds). The third is proxy.css. Fourth - b.css (2 seconds). Surprisingly, IE does not want to start loading b.css until the a.css file is fully loaded. In all other browsers, this surprise does not occur, which leads to a faster page load (see Figure 5).
Fig. 4. Results in IE.
Fig. 5. Results in other browsers.
The use of several import rules in IE at once leads to the fact that files are not loaded in the order in which they are specified in the code. In this example, 6 style files are used (each loading 2 seconds each), followed by a JS script (4 seconds to load).
In fig. 6 you will see that the longest in loading is the script. Although it is listed after styles, in IE it is loaded first. If the script contains code that depends on the styles used (getElementsByClassName, etc.), this can lead to script operation errors, since It loads before styles.
Fig. 6
It’s easier and safer to use LINK to load styles:
Using LINK provides parallel file downloads in all browsers (see Figure 7). The use of LINK also ensures that the files will be loaded in the exact order specified in the document code.
Fig. 7
It is especially bad for us that resources can be loaded in a different order than indicated in the document. All browsers should look ahead of loading styles to extract import rules and start loading them immediately. As long as browsers do not implement this, I advise you to avoid using import and load styles only with LINK.
Hope on your comments also here .
LINK vs. import
There are 2 ways to upload style files. Use LINK tag:
<link rel = 'stylesheet' href = 'a.css'>
Or import files using import :
<style>
@import url ('a.css');
</ style>
I prefer to use LINK for convenience, because you must remember that import must always be placed at the very top of the style block, otherwise they are not imported.
import import
I want to talk about the various ways to use LINK and import . The following example lists 2 style files: a.css and b.css. Each download file takes exactly 2 seconds to make it convenient to track the effect on download speed in the future. The first example uses import to load both style files. In this example, called import import , the HTML document contains the following style block:
<style>
@import url ('a.css');
@import url ('b.css');
</ style>
If you always use only import for loading styles, there will be no performance problems, although we will see below, this can lead to an error with javascript. Both files are loaded in parallel (see Figure 1). But problems start to appear if you use import inside the style file or with LINK.
Fig. one.
')
LINK import
The LINK import example uses a LINK tag to load a.css, and import for 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 caused the files to be loaded sequentially one after the other, as shown in Figure 2. Accordingly, the page load time in IE will increase.
Fig. 2
LINK with import
In the import LINK example, the a.css file is loaded via LINK, and contains an import rule for b.css inside:
In the document:
<link rel = 'stylesheet' type = 'text / css' href = 'a.css'>
in a.css:
@import url ('b.css');
This method also leads to the fact that the files are loaded sequentially (Fig. 3.), and not in parallel, but now it happens not only in IE, but also in other browsers. If you think about it, everything is logical: the browser loads a.css and starts parsing it. Upon finding the import rule inside, the b.css file starts loading.
Fig. 3
LINK blocks with import
The slight difference from the previous example led to surprising results in IE. LINK is used to call a.css and for the new proxy.css file, which contains only import for b.css.
In the code :
<link rel = 'stylesheet' type = 'text / css' href = 'a.css'> <link rel = 'stylesheet' type = 'text / css' href = 'proxy.css'>
In proxy.css:
@import url ('b.css');
The results of the experiment in IE are shown in Figure 4. The first query is an HTML document. The second request is a.css (2 seconds). The third is proxy.css. Fourth - b.css (2 seconds). Surprisingly, IE does not want to start loading b.css until the a.css file is fully loaded. In all other browsers, this surprise does not occur, which leads to a faster page load (see Figure 5).
Fig. 4. Results in IE.
Fig. 5. Results in other browsers.
Many @imports
The use of several import rules in IE at once leads to the fact that files are not loaded in the order in which they are specified in the code. In this example, 6 style files are used (each loading 2 seconds each), followed by a JS script (4 seconds to load).
<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 src = 'one.js' type = 'text / javascript'> </ script>
In fig. 6 you will see that the longest in loading is the script. Although it is listed after styles, in IE it is loaded first. If the script contains code that depends on the styles used (getElementsByClassName, etc.), this can lead to script operation errors, since It loads before styles.
Fig. 6
LINK LINK
It’s easier and safer to use LINK to load styles:
<link rel = 'stylesheet' type = 'text / css' href = 'a.css'> <link rel = 'stylesheet' type = 'text / css' href = 'b.css'>
Using LINK provides parallel file downloads in all browsers (see Figure 7). The use of LINK also ensures that the files will be loaded in the exact order specified in the document code.
Fig. 7
It is especially bad for us that resources can be loaded in a different order than indicated in the document. All browsers should look ahead of loading styles to extract import rules and start loading them immediately. As long as browsers do not implement this, I advise you to avoid using import and load styles only with LINK.
Hope on your comments also here .
Source: https://habr.com/ru/post/57012/
All Articles