Влияет ли положение CSS относительно производительности на рендеринг DOM?

Question

У меня есть привычка установки position: relative для большинства моих элементов DOM, когда я применяю стиль display .

.something {
    display: block;
    position: relative;
}

Это то, чем я занимаюсь уже несколько лет, и недавно у меня был разговор с кем-то, кто заявил, что установка многих из них замедлит замедление рендеринга в веб-браузере.

Есть ли что-нибудь в спецификациях или рекомендациях CSS, в которых говорится, что его следует устанавливать экономно?

Я ищу конкретный ответ, в котором говорится, что position: relative имеет X затрат на производительность, или заслуживающие доверия ссылки, что он не имеет стоимости.

Answer 1

Добавление любого CSS всегда будет тормозить ваш код, но для чего-то такого маленького, это будет крошечным и не стоит беспокоиться.В display: block нет ничего особенного, что требует установки значения позиции.Что важно , так это плохая практика всегда добавлять это, если вы не знаете, что вам это нужно.

Я бы отказался от привычки и использовал бы position: relative для каждого конкретного случая.

Как указано в комментариях, position: static является значением по умолчанию.

Редактировать:

Вы упомянули, что ищете какое-то исследование, показывающее влияние этого правила CSS на производительность.Вот отличная статья на эту тему:

http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors/

Редактировать, локальный тест:

Проверить элемент на домашней странице StackOverflow.Каждый пост является элементом с классом question-summary.Добавьте новое правило CSS:

.question-summary{
    position: absolute;
    position: relative;
}

Убедитесь, что оба правила активны.Затем отметьте и снимите отметку position: relative.Обратите внимание, что это происходит мгновенно.Это рендеринг группы элементов. Если вы хотите продолжить тестирование, скопируйте и вставьте div question-summary и добавьте сотни из них.Затем повторите тест.Обратите внимание, как браузер отображает это мгновенно.

Edit # 2:

В некоторых статьях рассказывается, как работают веб-браузеры и движки браузеров., это сложно, и вам нужно изучить это.Это хорошее место для начала: http://taligarsiel.com/Projects/howbrowserswork1.htm#Webkit_CSS_parser

Если вы хотите изучить статьи, которые вы нашли в Интернете, вам, возможно, придется покопаться в исходном коде движка веб-браузера.Webkit является распространенным и открытым исходным кодом: https://webkit.org/

Опять же, если вы не хотите углубляться в понимание интерпретации CSS веб-браузера, вам нужно положиться на тестирование.Разработчики обычно тратят свое время на оптимизацию под JavaScript, а не за CSS, так что там не так много.Я нашел это:

https://benfrain.com/css-performance-revisited-selectors-bloat-expensive-styles/