代码之家 › 专栏 › 技术社区 › Alan

覆盖CSS样式的性能影响

browser performance css

Alan · 技术社区 · 16 年前

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

为了简单起见,我宁愿将新的CSS包含在常规的CSS文件之后,而不是编写一个脚本来搜索和替换原始CSS中的所有类。在HTML(psuedo代码)中是这样的:

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

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

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

几个问题:

1 回复 | 直到 16 年前

Stephen 16 年前

除了信息的“重复”之外,这种覆盖还会导致性能问题吗?

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

浏览器是否仍会拉取非聚集的图像,因为原始的CSS文件仍然包含在内(否定了图像聚集的正向性能提升)?

是的,浏览器将所有来自第一个和第二个CSS文件的图像。性能时间将几乎线性增加(近似)。尤其是如果你正在重写每一个CSS选择器,或者改变很多图像。

是否保证最后加载的样式始终是应用的样式?

对。除非第一张纸使用 !important 在某些样式属性上,将始终应用选择器最后声明的样式。这就是层叠样式表获得其名称的地方。

推荐文章

Sweepy Dodo · JSON lite的格式化

1 年前

Merlin Nestler · 为什么索引中的列顺序在这种情况下会产生如此大的影响?

1 年前

giantjenga · 优化整数向量到二进制向量的转换

1 年前

Adriaantje · Powershell版本的cut-d在处理大文件时速度很慢,我是否错过了快速的方法?

1 年前

Costinean Sebastian · 如何优化使用for循环处理大型数组的MATLAB脚本的执行时间?"

1 年前

Zegarek · Postgresql递归查询未提供预期结果

1 年前

Joe · 为什么这两个查询之间的性能存在如此大的差异?

2 年前

tic-toc-choc · 在`dplyr中高效使用列表进行过滤`

2 年前

Mohan · 是否有一种更快的方法来编写代码,从1:N中提取许多随机样本?

2 年前

user2980746 · 在C#字典中键入xyz对的最有效方法是什么?

2 年前