Итак, я провел несколько тестов, основанных на совете @ 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.container loaaads HTML. В моем случае я пошел на html-ipsum.com (никакой рекламы не было), скопировал каждый образец, объединил все вместе и продублировал его несколько раз. Мой последний файл HTML был 1.70 MB, а div.container имел потомков (прямой или нет, я узнал по телефону console.log(document.querySelectorAll('.container *').length);).
3) Я запустил эту страницу 10 раз в последних версиях Firefox и Chrome, каждый раз с пустым кешем.
Вот результаты без страшном 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. Я позволяю им, потому что я думал, что это будет интересно разнообразить среду тестирования даже больше)
4) Добавьте CSS мы хотим проверить в пустой <style> тег:.
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: '' на каждый псевдоэлемент.
Теперь оставшийся вопрос: - это дополнительное время загрузки, которое мы видим здесь значительным, учитывая относительно большую тестовую страницу, которая была использована? Я думаю, это зависит от размера веб-сайта/проекта, но я позволю более опытным людям, работающим в Интернете, дать свое мнение здесь, если они захотят.
Если вы проводите собственные тесты, не стесняйтесь публиковать свои выводы здесь, так как мне очень интересно их читать, и я думаю, что я не буду единственным.
Объяснение, которое приходит в голову, состоит в том, что это добавит псевдоэлемент до и после каждого тега, включая те, которые в противном случае им не нужны (что в этом тесте каждый тэг). Это в основном утроит количество элементов на странице. – user1618143
@ user1618143 Это хороший момент, но я думаю, что он может быть зависимым от браузера, поскольку правила '*: before' и' *: after' являются технически * просто * правилами стилизации, а не правилами создания псевдоэлементов (теоретически) , Возможно, некоторые браузеры всегда создают два скрытых псевдоэлемента с каждым реальным элементом на странице, поэтому правила CSS не вызовут проблему, о которой вы указали. С другой стороны, другие браузеры могут только создавать псевдоэлементы только в том случае, если правила стиля нацелены на них, и в этом случае действительно создается избыточное псевдоэлементы на всех реальных элементах с этими правилами. – ajp15243
Я также задаюсь вопросом, не может ли отдельный таргетинг на тег (в отличие от использования '*') не допускать определенных оптимизационных предположений браузером, поскольку теперь он должен проверять каждый тег на список стилей, а не знать, * 'правило будет применяться к любому тегу независимо от того, что. Кроме того, я думаю, что было бы более справедливо FF, если бы вы сделали это без расширений/надстроек. Нельзя сказать, какие заглавные вещи делают расширения на странице, поэтому ваша статистика FF может быть запутана ими. – ajp15243