web前端开发提升时为何不提议应用css @import

2021-01-20 10:15 jianzhan

不必应用 css @import, 由于用这类方法载入css非常于把css放在了html底部。

有关这1点,我1直很疑虑: 为何用@import就等于把css放在了网页页面底部? 基本原理是甚么?? 但1直不可而知,由于互联网文章内容1大抄,转载的许多,去细究缘故的却非常少。

直至今日,在google developers看1篇文章内容时,不经意间寻找了这个缘故,原文以下:

Avoid CSS @import

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

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.

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文档被免费下载、分析以后,访问器才会了解也有此外1个css必须免费下载,这时候才去免费下载,随后免费下载后刚开始分析、搭建render tree等1系列实际操作。 星球访问器在网页页面全部css免费下载并分析进行后才会刚开始3D渲染网页页面(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标识的方法引进。