Использование $ .css() без селектора увеличивает производительность?

JQuery позволяет нам напрямую использовать метод $ .css() и передавать исходный элемент DOM в качестве первого параметра. Например, если я хочу установить 'а' с шириной myDiv, JQuery позволяет этот синтаксис:

(вариант 1):

var elem = document.getElementById('myDiv'); 
var a = $.css(elem, 'width');

вместо этого (вариант 2):

var a = $('#myDiv').css('width');

Вариант 1 не требует селектора, и он, похоже, полагается на глобальный объект jQuery, а не на создание нового. Я не могу найти документацию в jQuery API или онлайн об этом методе. Я предполагаю, что это будет увеличение производительности, особенно когда в анимации требуются объекты jQuery. Любая причина, почему я не должен использовать этот метод?

Спасибо!

EDIT: Perf тесты показывают, что вариант 1 немного быстрее. Не похоже, что есть какая-то причина не использовать $ .css() напрямую. Спасибо всем за ответы!

источник

2013-05-05 John Caprarelli

'document.getElementById («myDiv»). style.width', вероятно, будет еще быстрее, так почему бы не использовать это ? – adeneo

Еще один вариант: '$ (document.getElementById ('myDiv')). Css ('width')' (хотя я сомневаюсь, что это будет быстрее первого). –

В упрощенном примере выше вы были бы правы, но я создаю свои собственные CSS-крючки, а родной JS не будет работать. Моя вторая опция работает с пользовательскими стилями CSS. –

Да, первый немного быстрее. Но он может получить только значение css.

Я сделал перфорацию теста здесь: http://jsperf.com/jquery-css-signature Вы можете пересмотреть его и проверить другие варианты.

Теперь, когда факты будут установлены, на них уровне оптимизации производительности, я не думаю, что стоит над головой. Пойдите с более понятным/поддерживаемым способом получения того же результата. Преимущество производительности не настолько велико, чтобы в большинстве случаев это действительно имело значение.

источник

2013-05-05 02:08:50

Ну, похоже, что $ .css ([element]) на 13% быстрее, чем $ ([селектор]). Css(). Не очень много. Я запустил его с большим количеством div и получил тот же результат. –

Ну, 13% может означать многое при длительной эксплуатации. Но эти два делают много операций в секунду, так что да, прирост производительности не означает многого. –

Вариант 2 будет, после некоторой проверки типа и синтаксического анализа, делают примерно то же самое, как вариант 1. Я не могу себе представить разницу в производительности (если таковые имеются) имеет большое значение.

Если вы беспокоитесь о производительности при обращении к элементу несколько раз, лучше это делать все Lookups один раз, и повторное использование, что:

var elem = $('#myDiv'); 

var a = elem.css('width'); 
elem.css('height', '100px'); 
// etc.

источник

2013-05-05 02:09:29

Это полезно знать. Моим конкретным приложением является то, что я пишу плагин для вертикальной (y оси) фоновой анимации. Анимация получает стиль фоновой позиции на каждом этапе анимации, поэтому я стараюсь как можно меньше уменьшить накладные расходы. –

Я уже сделал это для вас: http://stackoverflow.com/questions/12340130/jquery-animate-background-image-on-y-axis – adeneo

Это работает, спасибо! –

Все, что требуется JQuery из уравнения делает его быстрее , Используя собственный getElementById вместо передачи обрабатываемой строки, вы увеличиваете скорость.

Еще быстрее будет использовать родной getComputedStyle:

var elem = document.getElementById('myDiv'); 
var a = window.getComputedStyle(elem).width;

Обратите внимание, что более старые версии IE использовать currentStyle вместо этого, так что вы можете нормализовать его следующим образом:

window.getComputedStyle = window.getComputedStyle || function(e) {return e.currentStyle;};

Для получения дополнительной информации о используя обычный JavaScript, проверьте Vanilla JS

источник

2013-05-05 02:55:27

Мне нравится сайт Vanilla JS. Просто НЕМНОГО сарказма. –

Использование $ .css() без селектора увеличивает производительность?

ответ

Смежные вопросы