2010-04-19 2 views
5

Douglas Crockford описывает последствия JavaScript, которые задают стиль узла. Как просто просить маржу div заставляет браузер «переплавлять» div в движке рендеринга браузера четыре раза.Имеет ли margin-left: 2px; сделать быстрее, чем margin: 0 0 0 2px ;?

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

div{ 
    margin-left:2px; 
} 

Чем

div{ 
    margin:0 0 0 2px; 
} 

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

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

ответ

1

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

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

{margin: 0 0 0 2px;} 

как

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

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

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

2

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