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

Question

Что лучше по производительности document.getElementById('elementId') или $('#elementId')? Как я могу самостоятельно рассчитать скорость?

Answer 1

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

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

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

Answer 2

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

Answer 3

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

Answer 4

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

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 миллисекунд

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

Мир!

Answer 5

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

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

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

Answer 6

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

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

Answer 7

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

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

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

Answer 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 выглядит намного быстрее.