css - 覆盖 CSS 样式的性能影响

Question

出于性能原因，我正在为网页设置图像集群(类似于 sprite-map)。我有一个实用程序可以生成主图像和引用图像映射的 css。

为了简单起见，我宁愿在常规 css 文件之后包含新的 css，而不是编写脚本来搜索和替换原始 css 中的所有类。 html 中的类似内容(伪代码):

<LINK href="normal.css" rel="stylesheet" type="text/css">

if(%=usingImageCluster=%)
      <LINK href="master.css" rel="stylesheet" type="text/css">

因此，在 normal.css 中定义的所有样式都将被 master.css 中的新样式覆盖。

几个问题:

• 除了信息“重复”之外，这种覆盖是否会导致性能问题？

• 浏览器是否仍会拉取非聚类图像，因为原始 CSS 文件仍包含在内(抵消了图像聚类的积极性能提升)？

• 能否保证最后加载的样式始终是应用的样式？

Answer 1

Besides the "duplication" of information, does this override cause performance issues?

是的，您正在为第二个外部样式表生成一个新的 HTTP 请求。太多的 HTTP 请求是大多数网页的第一大减速因素。

Will the browser still pull the non-clustered images, because the original CSS file is still included (negating the positive performance gains of image clustering)?

是的，浏览器将从第一个和第二个 CSS 文件中提取所有 个图像。性能时间将几乎线性增加(近似值)。尤其是当您要重写每个 css 选择器或更改大量图像时。

Is there a guarantee that the last loaded style will always be the one applied?

是的。除非第一个工作表在某些样式属性上使用 !important，否则将始终应用选择器最后声明的样式。这就是级联样式表得名的地方。