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

Question

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

Answer 1

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

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

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

Answer 2

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

Answer 3

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

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

Answer 4

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

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

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

Answer 5

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

Answer 6

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

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

Run 2

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

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

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

Run 3

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

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

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

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

Мир!

Answer 7

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

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

Optimise Selectors

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

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