logo标签列表

关于继承的CSS性能表现

htmlcssperformancedom
6

我知道ID选择器的匹配速度比类选择器快，而类选择器的匹配速度比标签选择器快，标签选择器的匹配速度比通用选择器快，详见MDN。我的问题涉及到CSS继承的性能。例如，以下哪个更有效率？

body {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 16px;
}

h1 {
  font-family: Georgia, serif;
  font-size: 36px;
  font-weight: 700;
}

或者

h1 {
  font-family: Georgia, serif;
  font-size: 36px;
  font-weight: 700;
}

.article-text {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 16px;
}

虽然在DOM中只有一个<body>标签，但可能会有数百个p.article-text元素。由于只有一个<body>标签，那么即使我重新设置<h1>元素的样式，<body>样式是否更有效率呢？或者是将样式应用到.article-text元素更有效率，因为这样做会使用更具体的选择器，而且不需要担心重新设置<h1>元素的样式？一直想知道这个问题的答案。你有什么想法吗？
做一个基准测试并找出答案？ - cimmanon
1
我猜测CSS的“级联”（从父元素继承样式）非常高效。这根本不需要选择器。我的理解是，body应该被设计成文档中纯文本主体的样式方式 - 这就是它的容器。 - Thomas W
3
在页面性能的大局观中，（至少在你已经解决了许多其他因素，如合并、压缩等之后）这不值得担忧。 - steveax
@Thomas W：在CSS中，“Cascading”有一个非常具体的含义。请参见http://www.w3.org/TR/CSS21/cascade.html。“Cascading”就是“级联”，而“inheritance”就是“继承”（尽管可以说“继承”是“级联”的一部分）。 - BoltClock
我知道这涉及细节，但即使有数千个动态绑定的疯狂CSS样式表，如 div[^="someField"] { }, ... #someField1314 {} 现代浏览器（甚至在手机上）也可以快速处理。另外请注意，一旦缓存了CSS文件，它的大小就无关紧要，即使是几百千字节。我曾经建立过一个重型CSS动画驱动网站，其中CSS文件总共超过3兆字节大（压缩后:P），我只使用了一次AJAX加载器（类似Flash剪辑）。一旦缓存，每次页面加载都是瞬间完成的:) 相对于大型JavaScript代码块，我更会出汗;) - user1467267
额外提示：您还可以立即显示页面的基本设计，并在后台使用AJAX加载其余内容（仅在动画和/或悬停/弹出时发生的复杂CSS）。将加载脚本放在</body>标签关闭之前也可以节省一些渲染时间。祝好运。 - user1467267
3个回答
2
我认为你展示的 MDN 文章写得很有害，因为它建议专注于 CSS 微优化，而几乎总是可以通过不同的方式来提高页面速度（例如，Google Page Speed 提供了有趣的提示）。
我无法记得我的网站中有任何 CSS 是瓶颈。您可能希望在某些页面上查看 Chrome 开发人员工具中的 "时间轴" 并注意到与其他事件相比，处理样式所花费的时间通常微不足道。
如果我要给出建议，我宁愿采用 CSS 预处理工具，如 SASS 或 LESS 来提高可维护性。这甚至可能有助于减少规则数量。
0
我认为两者中的前一个可能更快，但说实话，就像每个人都说的那样，由于我们目前拥有的浏览器、设备和连接速度，除非您拥有一个超过40-50页的大型网站，否则您不会注意到任何区别，这时您应该考虑简化您的代码。
0

正如 steveax 所提到的，不值得太过担心。 此外，答案实际上取决于浏览器和给定的 HTML。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接