html - 浏览器只向服务器请求一个样式表或所有 css 文件(主样式表中的 @import 是哪个)？

Question

我曾尝试“@import”在单个“style.CSS”中导入 CSS 文件，该文件用于 head 标记中的主 html 文件，如“link href”。然后使用 firebug 检查元素并只看到应用到它的“style.css”，我想知道浏览器对服务器的请求只有一次“style.css”或者对于“style.css”中@import 的每个 css 这组件包含在“style.css”中？

这个组件包含在“style.css”中

@import url("main.css");
@import url("colorzilla.css");
@import url("mainbox.css");

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }

html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
body { margin: 0; font-size: 13px; line-height: 1.231; }
body, button, input, select, textarea { font-family: sans-serif; color: #222; }

::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
::selection { background: #fe57a1; color: #fff; text-shadow: none; }

Answer 1

浏览器为每个导入的样式表发送一个单独的请求。 JavaScript 文件也是如此。

为避免这种情况，您可以在服务器端使用缩小器，它(除了缩小之外)结合了不同的样式表(和 JavaScript)，因此 1 个请求就足以处理所有 CSS，1 个请求就足以处理所有 JS 内容。然后它们被缓存。

如果您使用 HTTPS，由于 SSL/TLS，每个请求都会有额外的握手和开销，请求的数量将变得更加重要。