Why not use css @ import?

When I used to study web Front-end optimization, I saw such a suggestion in multiple places on the Internet. The general idea is:

Do not use css @ import, because loading css in this way is equivalent to placing css at the bottom of html.

I have been wondering why @ import puts css at the bottom of the page? What is the principle ?? But it has never been known, because there are a lot of online articles that are reproduced, but there are few reasons for further research.

Today, I accidentally found this reason when I read an article on google developers. The original Article is as follows:

 

Avoid CSS @ importOverview

 

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.cssContains the following content:

@import url(second.css)

The browser must download, parse, andexecutefirst.cssBefore it is able to discover that itneeds to downloadsecond.css.

RecommendationsUse Tag instead of CSS @ importInstead of @ import, use Tag for each stylesheet. This allows the browser to download stylesheets in parallel, which results in faster page load times:

 

We do not want to use css @ import, but the reason is not that it is placed at the bottom of the page. Doing so will make css unable to be downloaded in parallel, because only after the css file referenced by @ import is downloaded and parsed will the browser know that another css file needs to be downloaded, then, download and start parsing, building a render tree, and other operations. After downloading and parsing all the css files on the page, the planet browser starts rendering the page (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 .), therefore, the css parsing delay caused by css @ import will prolong the page white-keeping period. Therefore, we recommend that you avoid using css @ import instead of link labels.