nee*_*mzy 7 css performance pseudo-element css-content
您可能知道,如果您要使用:before和/或:after伪元素而不在其中设置文本,您仍然必须声明content: '';它们以使它们可见.
我刚刚将以下内容添加到我的基本样式表中:
*:before, *:after {
content: '';
}
......所以我不必再进一步申报了.
除了*选择器是反性能的事实,我知道(让我们说以上是一个例子,我可以找到一个更好的方法来声明这个,比如列出标签),这真的很慢事情发生了？我在目前的项目中没有注意到任何东西,但我想确保在我将它坚持到我的基本样式表之前使用是安全的,我将用于每个项目......
有没有人测试过这个？你有什么话要说的？
(顺便说一句,我 确实知道正确的语法CSS3采用双分号(::before,::after),因为这些都是pseudoelements,而不是伪类).
所以我根据@SWilk的建议进行了一些测试.我是这样做的:
1)设置一个带有空<style>标签的基本HTML页面,<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的loaaads.在我的情况下,我去了html-ipsum.com(没有广告意图),复制每个样本,将它们一起缩小,并重复多次.我的最终HTML文件是1.70 MB,div.container有33264个后代(直接或不是;我通过调用发现console.log(document.querySelectorAll('.container *').length);).
3)我在最新的Firefox和Chrome中运行了10次此页面,每次都有一个空缓存.
以下是没有可怕的CSS规则集的结果(以ms为单位):
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上有更多的扩展.我让它们开启,因为我认为将测试环境多样化会更有趣.)
4)在空<style>标记中添加我们要测试的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: '';
}
......然后重新开始.这里我指的是页面中使用的每个标记,而不是*(因为它本身就具有反性能,我们只想监视伪元素触发).
所以,这里是触发所有伪元素的结果(仍然以ms为单位):
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
根据这些数字,我们可以得出结论,当声明content: ''每个伪元素时,页面加载确实较慢(大约400-500毫秒).
现在,剩下的问题是:考虑到使用了相对较大的测试页,我们在这里看到的额外加载时间是否有意义？我想这取决于网站/项目的规模,但如果他们愿意,我会让更多具有网络性能知识的人在这里发表意见.
如果您运行自己的测试,请随时在此处发布您的结论,因为我对阅读它们非常感兴趣 - 我想我不会是唯一的.
| 归档时间： |
|
| 查看次数： |
1755 次 |
| 最近记录： |