Jquery, по производительности, что быстрее getElementById или jquery селектор?

Ответ 1

Если вы обеспокоены производительностью, родной getElementById намного быстрее, но jQuery дает вам очень удобный доступ ко многим вещам. Итак, вы можете использовать что-то вроде:

$( document.getElementById("some_id") ).jQueryCall();

Это даст вам лучшую производительность и в то же время позволит вам использовать jQuery.

Ответ 2

getElementById работает быстрее, потому что он использует собственный код. Селектор jQuery также будет использовать getElementById, но сначала нужно выполнить множество тестов и сравнений текста.

Ответ 3

Используйте http://jsperf.com/, если вы хотите проверить какую-либо производительность между jquery и dom но jquery нормален медленнее со всем, поскольку он основан на dom.

Ответ 4

Я только что наткнулся на этот пост, задаваясь вопросом о том же вопросе... так решил сбить быстрый тест script... запустить его, попробовать сами, взорвать мой разум!

var now = Date.now();
var diff = 0;
console.log(now);

for(var i=0; i < 1000000; i++)
{
   if($(document.getElementById("test")).css('opacity') == '0.2')
       $(document.getElementById("test")).css('opacity', '1');
   else
      $(document.getElementById("test")).css('opacity', '0.2');
}

diff = Date.now() - now;
console.log('With $(document.getElementById("test")).somejQueryCall(): ' + diff + ' milliseconds');

////////////////////////////////////////////////////////////////////////

var now2 = Date.now();
var diff2 = 0;
console.log(now2);

for(i=0; i < 1000000; i++)
{
   if($("#test").css('opacity') == '0.2')
       $("#test").css('opacity', '1');
   else
      $("#test").css('opacity', '0.2');
}

diff2 = Date.now() - now2;

console.log('With $("#test").somejQueryCall(): ' + diff2 + ' milliseconds');

////////////////////////////////////////////////////////////////////////

var now3 = Date.now();
var diff3 = 0;
var elem = $("#test");
console.log(now3);

for(i=0; i < 1000000; i++)
{
   if(elem.css('opacity') == '0.2')
       $(elem).css('opacity', '1');
   else
      $(elem).css('opacity', '0.2');
}

diff3 = Date.now() - now3;

console.log('With $(elem).somejQueryCall(): ' + diff3 + ' milliseconds');

После запуска этого script, я получил следующие результаты:

Выполнить 1

С $(document.getElementById("test")).somejQueryCall(): 552 миллисекунды

С $("#test").somejQueryCall(): 881 миллисекунды

С $(elem).somejQueryCall(): 1317 миллисекунд

Выполнить 2

С $(document.getElementById("test")).somejQueryCall(): 520 миллисекунд

С $("#test").somejQueryCall(): 855 миллисекунд

С $(elem).somejQueryCall(): 1289 миллисекунд

Выполнить 3

С $(document.getElementById("test")).somejQueryCall(): 565 миллисекунд

С $("#test").somejQueryCall(): 936 миллисекунд

С $(elem).somejQueryCall(): 1445 миллисекунд

Я не могу поверить в разницу!!! Просто нужно было поделиться этим!

Мир!

Ответ 5

Конечно, getElementById работает быстрее, но с jQuery вы можете делать много вещей.

Чтобы проверить это, вы можете попытаться выполнить цикл 10k раз для каждого и сравнить временные метки до и после.

Ответ 6

Нативный getElementById работает быстрее. Механизм селектора Jquery просто обертывает это для любых селекторов #x.

Используя консоль firebug, вы можете настроить jquery следующим образом. Не уверен, что он хорошо работает для собственных вызовов api, таких как getElementById.

console.profile();
$('#eleId');
console.profileEnd();

Ответ 7

Хех. Изучая этот вопрос, я нашел этот отличный пост. И также сообщение об этом с последним на сайте обучения JQuery с конкретными советами по оптимизации скорости!

Стоит отметить, что с последней спецификацией DOM, скорее всего, вам не нужно беспокоиться о производительности в целом. Только когда вы создали (или обнаружили) узкое место.

Оптимизировать селектор

Ответ 8

Так как другой тест производительности, который был связан на этой странице, как представляется, был сломан, и в него также включалось то, о чем не задавали в этом вопросе (а именно, пользовательский метод jQuery), тогда я решил сделать новый тест производительности для ответа на вопрос, который включает в себя точный эквивалент (возвращает элемент DOM) в jQuery, вместо настраиваемого метода:

https://jsperf.com/jquery-get-0-vs-get-element-by-id

Когда я запускаю его в своем Chrome, он показывает, что прямой jQuery

$('#foo').get(0) 

на 92% медленнее, чем эквивалентная операция в стандартном JavaScript

document.getElementById('foo')

Я также опробовал то, что в настоящее время отмечено как принятый ответ здесь, который предположительно "намного быстрее", но он все еще на 89% медленнее стандартного эквивалента JavaScript:

$( document.getElementById("foo") ).get(0);

Не забудьте запустить его самостоятельно и посмотреть, что вы получаете в своем браузере, с помощью показателя производительности, который я сделал. Версия без jQuery кажется намного быстрее.