1

我试图“@import”在单个“style.CSS”中导入一个 CSS 文件，该文件用于头标签中的主 html 文件，如“link href”。然后使用萤火虫检查元素并只看到应用于它的“style.css”，我想知道浏览器对服务器的请求只有一次“style.css”或每个css是“style.css”中的@import这个组件包含在“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; }
4

1 回答 1

0

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

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

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

于 2013-04-18T08:27:24.690 回答