Производительность: чистый CSS vs jQuery

Ответ 1

• CSS не нужно оценивать браузером

  Нет. CSS - это язык, на котором вы записываете свои таблицы стилей, которые затем должны быть загружены, проанализированы и оценены браузером; см. ниже.

• jQuery должен быть оценен браузером

  Да, потому что...

• jQuery проходит через язык сценариев

  Да. jQuery написан на JavaScript, который, подобно CSS, является языком, который должен анализироваться и оцениваться браузером; см. ниже.

Не нужно ли оценивать CSS в браузере, а также через скриптовый язык?

Он должен быть оценен браузером, но как самостоятельный язык, он реализован в собственном коде аналогично другим основным языковым функциям механизма компоновки, таким как парсер HTML и движок JavaScript. Реализация CSS не происходит с помощью языка сценариев (если, конечно, сам механизм компоновки не написан в одном).

Стили CSS доступны для языков сценариев через CSSOM, который не является самой реализацией CSS, а просто скриптовый API, который можно рассматривать как своего рода CSS, эквивалентный DOM для HTML.

jQuery написан на JavaScript, который затем запускается при реализации JavaScript браузера. Если вы используете jQuery для применения CSS, тогда jQuery должен получить доступ к DOM и CSSOM, которые снова реализованы в JavaScript, которые браузер должен выполнить.

Это похоже на использование селекторов jQuery по сравнению с собственным API-интерфейсом Selectors. Селекторы jQuery реализованы в Sizzle, библиотеке селектора JavaScript, а document.querySelector() - метод DOM, который позволяет использовать браузер, реализован движок селектора непосредственно из script.

Ответ 2

Здесь вы найдете много полезной информации:

Как работают браузеры - За кулисами современных веб-браузеров

Посмотрите этот раздел: http://taligarsiel.com/Projects/howbrowserswork1.htm#CSS_parsing

и это: http://taligarsiel.com/Projects/howbrowserswork1.htm#Parsing_scripts

Из ссылок:

Сценарии

Модель сети является синхронной. Авторы ожидают, что сценарии будут анализируется и выполняется немедленно, когда парсер достигает тег. Разбор документа останавливается до тех пор, пока не будет выполнен script. Если script является внешним, то ресурс должен быть сначала извлечен из сеть - это также выполняется синхронно, разбор приостанавливается до ресурс извлекается. Это была модель на протяжении многих лет, а также указанных в спецификациях HTML 4 и 5. Авторы могли отметить script как "отложить" и, таким образом, он не остановит разбор документа и будет выполняться после его анализа. HTML5 добавляет возможность отмечать script как асинхронный, поэтому он будет разобран и выполнен другой поток.

Таблицы стилей

Таблицы стилей, с другой стороны, имеют другую модель. Концептуально это кажется, что, поскольку таблицы стилей не изменяют дерево DOM, нет повод ждать их и прекратить разбор документа. Есть тем не менее, сценарии, запрашивающие информацию о стиле во время этап анализа документа. Если стиль еще не загружен и проанализирован, script получат неправильные ответы и, видимо, это вызвало много проблемы. Это, похоже, крайний случай, но довольно распространен. Fire Fox блокирует все сценарии, когда есть таблица стилей, которая все еще загружен и проанализирован. Webkit блокирует скрипты только тогда, когда они пытаются получить доступ для определенных свойств стиля, которые могут выполняться разгруженным стилем листы.

Ответ 3

Я думаю, что главная причина CSS быстрее, потому что она может быть оптимизирована более чем javascript, потому что она менее сложна, код - это всего лишь ряд правил и не имеет большой части своей собственной логики (другие чем селекторы и случайная функция calc()) BTW, CSS определенно нужно оценить браузером.