8

您可能知道，如果您要使用:before和/或:after伪元素而不在其中设置文本，您仍然必须content: '';在它们上声明以使其可见。

我刚刚将以下内容添加到我的基本样式表中：

*:before, *:after {
    content: '';
}

...所以我不必再声明它了。

除了*选择器是反性能的，我知道（假设上面是一个例子，我可以找到一个更好的方法来声明它，比如列出标签），这真的很慢吗事情下来了？在我当前的项目中，我没有注意到任何视觉上的东西，但我想确保在我将它明确地粘贴到我将用于每个项目的基本样式表之前，这是可以安全使用的......

有没有人对此进行过深入测试？你有什么要说的吗？

（顺便说一句，我知道正确的 CSS3 语法使用双分号（::before, ::after），因为它们是伪元素而不是伪类。）

4

2 回答 2

7

所以我根据@SWilk 的建议进行了一些测试。我是这样做的：

1) 设置一个基本的 HTML 页面，在 中带有一个空<style>标签，他在底部的标签中<head>提供了一个简单的示例：<script><body>

<!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>

2) 填充div.containerHTML 的负载。就我而言，我去了 html-ipsum.com（没有广告的意图），复制了每个样本，将它们全部缩小，然后复制了很多次。我最终的 HTML 文件是1.70 MB，并且div.container有33264 个后代（直接与否；我通过调用发现console.log(document.querySelectorAll('.container *').length);）。

3) 我在最新的 Firefox 和 Chrome 中运行了这个页面 10 次，每次都有一个空缓存。

以下是没有可怕的 CSS 规则集的结果（以毫秒为单位）：

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 上提供了更多扩展。我让它们继续运行是因为我认为让测试环境更加多样化会很有趣。）

<style>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 :
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 毫秒）content: ''。

现在，剩下的问题是：考虑到使用的测试页面相对较大，我们可以在这里看到的额外加载时间是否有意义？我想这取决于网站/项目的大小，但如果他们愿意，我会让更多有网络性能知识的人在这里发表意见。

如果您运行自己的测试，也请随时在此处发布您的结论，因为我对阅读它们非常感兴趣 - 我想我不会是唯一的。

于 2013-10-08T16:42:18.940 回答
2

我的回答是：我不知道，但可以测试一下。

阅读导航计时并查看此示例页面

最简单的用法示例：

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，然后进行测试。

于 2013-10-08T13:59:35.390 回答