Имеет ли поле слева: 2 пикселя; рендеринг быстрее маржи: 0 0 0 2px ;?

Question

Дуглас Крокфорд описывает последствия JavaScript, запрашивающего стиль узла. То, как простой запрос поля div приводит к тому, что браузер «перекомпоновывает» div в механизме рендеринга браузера четыре раза.

Так что это заставило меня задуматься, во время первоначального рендеринга страницы (или на жаргоне Крокфорда "веб-прокрутка") быстрее ли писать CSS, который определяет только ненулевые / ненулевые значения? Для примера:

div{  
  margin-left:2px;  
}

Чем

div{  
  margin:0 0 0 2px;  
}

Я знаю, что последствия этой «экономии» незначительны, но я думаю, что все еще важно понимать, как внедряются технологии. Кроме того, речь идет не о форматировании CSS, а о реализации браузеров, отображающих CSS.

Ссылка: http://developer.yahoo.com/yui/theater/video.php?v=crockonjs-4

Answer 1

Я не уверен, что он "рендерит" еще быстрее. НО: вторая версия на несколько байтов больше первой. (И я предположил бы, что сеть медленнее, чем время рендеринга страницы, что делает первую версию «рендерингом быстрее»)

Answer 2

Нет, в зависимости от вашего браузера, он будет распаковывать значения по-разному, прежде чем даже применять стили, а в Firefox это немного повлияет на скорость выполнения. Тем не менее, в любом случае рекомендуется использовать сокращенный CSS.

Если вы хотите понять, как это работает, Firefox распаковывает значение:

{margin: 0 0 0 2px;}

в

{margin-top: 0pt;margin-right: 0pt;margin-bottom: 0pt;margin-left: .04pt;}

перед применением стилей к странице. Это для нормализации.

* (. 04pt - оценка)