gpt4 book ai didi

html - 关于继承的 CSS 性能

转载 作者:太空狗 更新时间:2023-10-29 16:36:42 25 4
gpt4 key购买 nike

我知道 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;
}

虽然只有一个<body> DOM 中的标记,可能有数百个 p.article-text元素。因为只有一个 <body>标签,这是否意味着 <body>样式更有效,即使我要重新设计 <h1>元素?还是为 .article-text 设置样式更有效?元素,因为这样做会使用更具体的选择器,我不需要担心重新设计 <h1> 的样式。元素?

一直在想这个问题。想法?

最佳答案

我认为您展示的 MDN 文章是以有害的方式编写的,因为它建议专注于 CSS 微优化,而几乎总是可以通过不同的方式提高页面速度(例如 Google Page Speed 有有趣的提示)。

我不记得在我的网站中有任何 CSS 成为瓶颈的情况。您可能希望在某些页面上的 Chrome 开发人员工具中查看“时间轴”,并注意到与其他事件相比,处理样式所花费的时间通常微不足道。

如果要我提供建议,我宁愿走另一条路,使用像 SASS 这样的 CSS 预处理工具。或 LESS以提高可维护性。这甚至可能最终有助于减少规则数量。

关于html - 关于继承的 CSS 性能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17757383/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com