Css 正在声明；内容“；属性：在：之前和：之后，每个元素都会出现严重的性能问题？
您可能知道，如果要使用Css 正在声明；内容“；属性：在：之前和：之后，每个元素都会出现严重的性能问题？,css,performance,pseudo-element,css-content,Css,Performance,Pseudo Element,Css Content,您可能知道，如果要使用：before和/或：after伪元素，而不在其中设置文本，则仍然必须声明内容：“”以使其可见 我刚刚在基本样式表中添加了以下内容： *：之前，*：之后{ 内容：''； } …所以我不必再进一步申报了 除了*选择器是反性能的这一事实之外，我知道这一点（假设上面是一个示例，我可以找到更好的方法来声明这一点，例如列出标记），这真的会减慢速度吗？我没有在我当前的项目上看到任何视觉效果，但我希望在我将它明确地粘贴到我的基本样式表（我将用于每个项目）之前，确保它可以安全地使用 有人
：before：after内容：“”以使其可见
我刚刚在基本样式表中添加了以下内容：
*：之前，*：之后{
内容：''；
}
…所以我不必再进一步申报了
除了*
选择器是反性能的这一事实之外，我知道这一点（假设上面是一个示例，我可以找到更好的方法来声明这一点，例如列出标记），这真的会减慢速度吗？我没有在我当前的项目上看到任何视觉效果，但我希望在我将它明确地粘贴到我的基本样式表（我将用于每个项目）之前，确保它可以安全地使用
有人对此进行过深入的测试吗？你有什么要说的吗
（顺便说一句，我知道正确的CSS3语法使用了双分号（：before
，：：after
），因为它们是伪元素而不是伪类。）我的答案是：我不知道，但可以测试一下
阅读并查看这个
最简单的用法示例：
function onLoad() {
var now = new Date().getTime();
var page_load_time = now - performance.timing.navigationStart;
console.log("User-perceived page loading time: " + page_load_time);
}
所以，去生成几MB的html，其中包含随机标记，然后进行测试。所以我根据@SWilk的建议运行了一些测试。我是这样做的：
1） 在
中设置一个带有空
标记的基本HTML页面，以及他在
底部的
标记中提供的简单示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Performance test</title>
<style>
/**/
</style>
</head>
<body onload="onLoad()">
<div class="container"></div>
<script>
function onLoad() {
var now = new Date().getTime();
var page_load_time = now - performance.timing.navigationStart;
console.log("User-perceived page loading time: " + page_load_time);
}
</script>
</body>
</html>
（如果你想知道为什么这两者之间有这么大的区别，我在Firefox上有更多的扩展。我让它们出现是因为我认为让测试环境更加多样化会很有趣。）
4） 在空的
标记中添加我们要测试的CSS：
html:before, html:after,
body:before, body:after,
div:before, div:after,
p:before, p:after,
ul:before, ul:after,
li:before, li:after,
h1:before, div:after,
strong:before, strong:after,
em:before, em:after,
code:before, code:after,
h2:before, div:after,
ol:before, ol:after,
blockquote:before, blockquote:after,
h3:before, div:after,
pre:before, pre:after,
form:before, form:after,
label:before, label:after,
input:before, input:after,
table:before, table:after,
thead:before, thead:after,
tbody:before, tbody:after,
tr:before, tr:after,
th:before, th:after,
td:before, td:after,
dl:before, dl:after,
dt:before, dt:after,
dd:before, dd:after,
nav:before, nav:after {
content: '';
}
…然后重新开始。这里我指定页面中使用的每个标记，而不是*
（因为它本身就是计数器性能，我们只想监视伪元素触发）
因此，以下是触发所有伪元素的结果（仍为毫秒）：
Firefox :
1785
1503
1435
1551
1526
1429
1754
1526
2009
1486
Average : 1600
Chrome :
1102
1046
1073
1028
1038
1026
1011
1016
1035
985
Average : 1036
Firefox :
1608
1885
1882
2035
2046
1987
2049
2376
1959
2160
Average : 1999
Chrome :
1517
1594
1582
1556
1548
1545
1553
1525
1542
1537
Average : 1550
根据这些数字，我们可以得出结论，当在每个伪元素上声明内容时，页面加载确实较慢（大约400-500毫秒）
现在，剩下的问题是：鉴于使用了相对较大的测试页面，我们在这里看到的额外加载时间是否有意义？我想这取决于网站/项目的规模，但如果他们愿意，我会让更多了解网络性能的人在这里发表意见
如果您自己进行测试，也可以在这里发布您的结论，因为我对阅读它们非常感兴趣，我想我不会是唯一的一个。谢谢！我将运行一些测试并发布结果。@neemzy:等待您的结果信息。知道这些事情会很好，我想到的解释是，这将在每个标记之前和之后插入一个伪元素，包括那些不需要它们的标记（在本测试中，就是每个标记）。页面上的元素数量基本上增加了三倍。@user1618143这是一个很好的观点，但我的想法是它可能依赖于浏览器，因为*：before
和*：after
规则在技术上只是样式规则，而不是伪元素创建规则（理论上）。也许有些浏览器总是使用页面上的每个真实元素创建两个隐藏的伪元素，因此CSS规则不会导致您指出的问题。另一方面，如果样式规则以伪元素为目标，其他浏览器可能只会反应性地创建这些伪元素，在这种情况下，我们确实在使用这些规则的所有真实元素上创建了多余的伪元素。我还想知道单个标记是否以这些规则为目标（而不是使用*
）不允许浏览器做出某些优化假设，因为它现在必须对照样式列表检查每个标记，而不知道*
规则将应用于任何标记，无论发生什么。此外，我认为如果您在不使用扩展/附加组件的情况下使用FF会更公平。不知道扩展对页面的幕后操作是什么，因此您的FF统计数据可能会被它们搞糊涂。@ajp15243:从技术上讲，它们可能只是样式规则，但“不要费心包括没有样式的伪元素”对我来说是一个无脑的浏览器优化。@user1618143我同意，但我见过更愚蠢的事情：）。