Производительность селекторов jquery и селекторов css3 - PullRequest
Новая
       8

Производительность селекторов jquery и селекторов css3

4 голосов
/ 12 января 2012

Я довольно новичок в css3, использующем селекторы (или простые селекторы css в целом), и мне любопытно сравнить производительность этих селекторов css с селекторами jquery или javascript?1003 *

css версия 

#someID > div:nth-child(2n) { some css .... }

jquery версия (редактирование) 

$("#someID").children(":nth-child(even)").css({ some css ....});

Часто ли быстрее использовать селекторы css, когда это возможно, или использовать селекторы jquery для настройкиCSS связан с элементом или набором элементов?Главным образом, когда набор становится довольно большим.Я предполагаю, что не будет большой разницы в производительности только с несколькими предметами?

Спасибо!

Ответы [ 3 ]

6 голосов
/ 12 января 2012

Движок селектора jQuery использует почти тот же синтаксис, что и CSS, фактически расширяет стандарт селектора. Это означает, что вы можете передать большинство допустимых CSS-селекторов (с некоторыми исключениями ) в jQuery, и он отлично с ними справится.

jQuery оптимизирует действительные селекторы CSS для современных браузеров, которые поддерживают API селекторов, передавая их непосредственно document.querySelectorAll(). Это означает, что ваш селектор jQuery будет иметь почти равную производительность с эквивалентным селектором CSS, с единственными накладными расходами - $().css() и вызовами API селекторов.

Для браузеров, которые не поддерживают API селекторов, вполне очевидно, что jQuery будет работать очень медленно, поскольку он должен выполнять всю тяжелую работу самостоятельно. Что еще более важно, он просто потерпит неудачу в исключениях, на которые я ссылаюсь выше, а также в других селекторах CSS, которые не поддерживает браузер.

Однако, с учетом всего сказанного, jQuery будет неизменно медленнее, так как браузер должен запустить скрипт и оценить его, прежде чем появится возможность применить и вычислить ваши стили.

И после всего этого, честно говоря, это немного, даже если у вас было сотни элементов - скорее всего, браузеру потребуется больше времени для получения разметки, чем для отображения стилей. Если вам нужно делать стили, и CSS поддерживает это, почему бы не использовать CSS? Вот почему язык был создан в первую очередь.

3 голосов
/ 12 января 2012

Pure CSS будет всегда быстрее, поскольку это сделано в браузере и оптимизировано!

Недостатком является то, что некоторые селекторы могут не поддерживаться браузером, в котором вы находитесь.Смотри http://caniuse.com/#feat=css-sel3

1 голос
/ 12 января 2012

Для меня, если я использую jquery, это означает, что я хочу придать ему некоторый эффект, скажем, как 

$("#someID:nth-child(even)").css({ some css ....}).fadeIn('slow');

Кроме того, вам лучше использовать сам CSS, но мы едва видим разницу в немво всяком случае, по крайней мере, для системы небольшого объема.

Я обнаружил, что этот веб-сайт сравнивает возможности селектора из различных структур javascript, и jquery делает это довольно хорошо.

тест селектора инфраструктуры javascript

...