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

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

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

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

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

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

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

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');

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

Выполнить 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 миллисекунд

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

Мир!

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

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

Собственный метод getElementById работает быстрее. Движок селектора Jquery просто оборачивает это для любых селекторов #x.

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

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

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

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

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

Поскольку другой тест производительности, ссылка на который была указана на этой странице, оказался неработоспособным, и он также включал то, о чем не спрашивали в этом вопросе (а именно, пользовательский метод 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 кажется намного быстрее.