關於前端優化中的@import

研究web前端優化時最多的建議就是不要使用 css @import 由於用這種方式加載css至關於把css放在了html底部

網上不少文章說起到的@import，其關注的問題是：

不要使用 css @import, 由於用這種方式加載css至關於把css放在了html底部。

那爲何用@import就等於把css放在了頁面底部呢？在google developers看一篇文章時，無心間找到了這個緣由，原文以下：

Avoid CSS @import Overview

Using CSS @import in an external stylesheet can add additional delays during the loading of a web page. Details

CSS @importallows stylesheets to import other stylesheets. When CSS @import isused from an external stylesheet, the browser is unable to downloadthe stylesheets in parallel, which adds additional round-trip timesto the overall page load. For instance, iffirst.css contains the following content:

@import url("second.css")

The browser must download, parse, andexecute first.css before it is able to discover that itneeds to downloadsecond.css. Recommendations

Use the <link> tag instead of CSS @import Instead of @import, use a <link> tag for each stylesheet. This allows the browser to download stylesheets in parallel, which results in faster page load times:

<link rel="stylesheet" href="first.css"> <link rel="stylesheet" href="second.css">

咱們確實要避免使用css @import， 但緣由卻不是什麼至關於放在了頁面底部，而是這樣作會致使css沒法並行下載，由於使用@import引用的文件只有在引用它的那個css文件被下載、解析以後，瀏覽器纔會知道還有另一個css須要下載，這時纔去下載，而後下載後開始解析、構建render tree等一系列操做。

瀏覽器在頁面全部css下載並解析完成後纔會開始渲染頁面（Before a browser can begin to render a web page, it mustdownload and parse any stylesheets that are required to lay out thepage. Even if a stylesheet is in an external file that is cached,rendering is blocked until the browser loads the stylesheet from disk.）

所以css @import引發的css解析延遲會加長頁面留白期。 因此，要儘可能避免使用css @import而儘可能採用link標籤的方式引入。