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

覆盖CSS样式的性能影响

browser performance css

Alan · 技术社区 · 14 年前

出于性能原因,我正在为网页设置一个图像集群(类似于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 回复 | 直到 14 年前

Stephen 14 年前

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

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

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

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

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

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

推荐文章

DiscreteTom · JavaScript structuredClone在Chrome/Edge中获得了“非法调用”,但在NodeJS中没有

1 年前

Ish Mahajan · WebTransport的浏览器兼容性

1 年前

Lixin Wei · 为什么WebRTC可以在未经我许可的情况下获取我的本地IPv6地址?

1 年前

Václav Procházka · 动态创建获取和解析脚本的顺序

1 年前

jani · 检查安装了哪些浏览器,然后在其桌面上创建快捷方式

1 年前

Italy Zia · 我收到一个“拒绝执行来自的脚本”http://localhost:3000/js/dashboard/dashboard.js',因为其MIME类型('text/plain')不可执行

1 年前

kakakali · 为什么appendChild()会丢失一些子项?

1 年前

Djaro · 人们在我的标签上按下shift,但在另一个标签上释放它。如何防止Ctrl+Shift+Tab破坏我的“Shift_pressed”变量?

1 年前

StuartN · 使用默认搜索引擎的HTML搜索链接

1 年前

Vindicated · 如何访问当前未连接到的URL的本地存储?

2 年前