Какое влияние на производительность оказывают неиспользуемые функции jquery?

Question

Я опубликовал еще один вопрос на очень похожую тему, но оказался немного субъективным. Я могу разделить вопрос на два вопроса, один из которых я объясню ниже:

В следующем коде:

<script type="text/javascript">
$(function() 
{
   $("#accordion").accordion();
   $("#datepicker").datepicker();
   $("#button").click(function() 
   {
     runEffect();
     return false;
   });
});
</script>

Вопрос. Если этот код вызывается из 1000 страниц, но только 250 страниц имеют идентификатор средства выбора даты. Потратит ли браузер дополнительное время на остальные 750 страниц, пытаясь разобрать идентификатор DatePicker, или Jquery найдет способ решить эту ситуацию без ущерба для производительности?

Что произойдет, если код ссылается на идентификаторы или классы, которых нет в HTML-разметке текущей страницы, это повлияет на производительность?

Answer 1

Для тех, кто говорит «не беспокойся об этом», я не могу не согласиться с этим.

Однажды я создал такой сайт, где внешний файл JS содержал:

$(function() {
  // do lots and lots of stuff
});

без внутреннего Javascript на странице HTML (PHP). Это было падение производительности, и это было с относительно эффективным выбором селектора, что никогда не означало:

$(".someClass").doStuff();

Вместо того, чтобы:

$("div.someClass").doStuff();

и т. Д. Выполнение всего Javascript заняло около секунды, хотя 95% из них ничего не делали. Мой совет? Если вам нужен высокочувствительный веб-сайт , не делайте так .

Вместо этого поместите такие функции во внешний JS:

function activate_accordion() {
  $("#accordion").accordion();
}

Это, конечно, простой пример. Но дело в следующем: никакой Javascript не должен автоматически выполняться во внешнем файле Javascript, если только подавляющее большинство страниц не использует его. Ваш внешний файл Javascript должен быть просто набором функций, которые при необходимости вызываются для отдельных стр.

и затем на каждой странице внутри HTML-кода:

<script type="text/javascript">
$(function() {
  activate_accordion();
}
</script>

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

Я уменьшаю время выполнения Javascript до 50-100 мс (с 1-2 секунд).

Answer 2

Да, технически jquery будет тратить некоторое время на поиск элемента с идентификатором datepicker.

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

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

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

Answer 3

Он будет искать такой элемент, и, поскольку его нет, он ничего не будет делать.

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

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

Если вы действительно обеспокоены, измерьте его в разных браузерах.

Answer 4

Почему бы не смешивать в нативном вызове?

Каждое из следующего выполнялось по 10 000 итераций.

$('div#datepicker');
// 179ms

$('#datepicker').find('div');
// 65ms

var $dp = $('#datepicker'); if ($dp.length) $dp.find('div');
// 32ms

if (document.getElementById('datepicker')) $('#datepicker').find('div');
// 1ms

Answer 5

Код будет вызываться при каждой загрузке страницы, и выполнение будет выглядеть примерно так:

• $("#accordion").accordion()
  1. Найти подходящие элементы:
     1. "#accordion" Очень быстрый поиск идентификатора
  2. Применение функции ко всем соответствующим элементам:
     • если не было элемента #accordion, он вернется практически мгновенно, ничего не делая

Вам захочется беспокоиться об этом только в двух случаях, ИМО:

1. У вас очень сложный селектор.
2. Вы вызываете много функций для элемента.

В случае 2, который встречается гораздо чаще, я обхожу его, выполнив следующее:

$el = $('#myElement');
if ($el.length) {
    $el
        .find("div")
        .each(function () { .. })
        .parents()
    // etc...
}

Я только что собрал эталонный тест, чтобы проверить, какой эффект это действительно имеет. Вы можете увидеть результаты и код , если хотите:

Короче говоря:

// doing this:
var $f = $('#fakeElement');
if ($f.length) $f.find('div');

// is almost twice as fast as this:
$('#fakeElement').find('div');

// For 10000 iterations, 404ms vs 788ms in my tests

Answer 6

$('body').find("#datapicker") ... довольно чертовски быстро.

Некоторое время назад я получил этот совет от одного из основных участников. Это так ->

if($("#datepicker")[0]) {...}

но быстрее.

Answer 7

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

if( $('#accordion').length > 0 ){
     // 20 lines of #accordion-dependent code here
}

Answer 8

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

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