我知道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>
元素的样式?一直想知道这个问题的答案。你有什么想法吗?
body
应该被设计成文档中纯文本主体的样式方式 - 这就是它的容器。 - Thomas Wdiv[^="someField"] { }, ... #someField1314 {}
现代浏览器(甚至在手机上)也可以快速处理。另外请注意,一旦缓存了CSS文件,它的大小就无关紧要,即使是几百千字节。我曾经建立过一个重型CSS动画驱动网站,其中CSS文件总共超过3兆字节大(压缩后:P),我只使用了一次AJAX加载器(类似Flash剪辑)。一旦缓存,每次页面加载都是瞬间完成的:) 相对于大型JavaScript代码块,我更会出汗;) - user1467267</body>
标签关闭之前也可以节省一些渲染时间。祝好运。 - user1467267