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

1) Назначение против вызовов jQuery

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

$('div#apples').hide();
$('div#apples').show();

Vs.

var oranges = $('div#oranges');
oranges.show();
oranges.hide();

Применимо ли это же правило при обращении к jQuery $(this)? Ex . Простой скрипт, чтобы сделать некоторые данные в таблице кликабельными и настроить ссылку.

$('tr td').each( function() {
    var colNum = $(this).index();
    var rowNum = $(this).parent().index();
    $(this).wrap('<a href="example.com/hello.html?column=' + colNum + '&row=' + rowNum +'">'); 
})

Vs.

$('tr td').each( function() {
    var self = $(this);
    var colNum = self.index()
    var rowNum = self.parent().index()
    self.wrap('<a href="example.com/hello.html?column=' + colNum + '&row=' + rowNum +'">'); 
});

2) this против $(this)

Хорошо, так что это следующий вопрос, о котором я долго размышлял, но я не могу найти какую-либо информацию об этом. Пожалуйста, извините мое невежество. Когда имеет смысл вызывать ванильный js this, а не jQuery wrapped $(this)? Это мое понимание, что -

$('button').click(function() {
  alert('Button clicked: ' + $(this).attr('id'));
});

Это гораздо менее эффективно, чем доступ к атрибуту DOM объекта vanilla this, как показано ниже:

$('button').click(function() {
  alert('Button clicked: ' + this.id);
});

Я понимаю, что там происходит, мне просто интересно, есть ли эмпирическое правило, которому нужно следовать при принятии решения, что использовать.

3) Всегда ли лучше конкретность?

Это довольно просто, всегда ли полезно быть более конкретным с нашими селекторами? Легко видеть, что $('.rowStripeClass') будет намного медленнее, чем $('#tableDiv.rowStripeClass'), но где мы рисуем линию? $('body div#tableDiv table tbody tr.rowStripeClass') еще быстрее? Любой вклад будет оценен!

Если вы сделали это далеко, спасибо, что посмотрели! Если нет, то: p

38
HurnsMobile 12 Июл 2010 в 21:38

4 ответа

Этот блог не слишком датирован, но содержит некоторые ответы на ваши вопросы, а также дает дополнительную информацию об ускорении работы вашего сайта при использовании jquery: http://www.artzstudio.com/2009/04/jquery-performance-rules/

Один из моих любимых - номер шесть, в котором говорится об ограничении манипуляций с DOM. Всегда плохо делать .append в цикле for, поскольку каждый раз, когда вы добавляете его в DOM, это дорогостоящая операция.

4
amurra 12 Июл 2010 в 17:44

1) Назначение против вызовов jQuery

Применяется ли это правило при обращении к $ (j) jQuery?

Да, конечно. Вызов функции $ создает новый объект jQuery и с ним связаны накладные расходы. Несколько вызовов $ с одним и тем же селектором каждый раз создают новый объект.

2) это против $ (это)

Я бы сказал, что знать разницу важно, потому что иногда становится крайне важно, чтобы вы не оборачивали свои объекты jQuery. В большинстве случаев вам не захочется выполнять преждевременную оптимизацию и просто сохранять согласованность, всегда заключать их в $ (this) и предпочтительно кэшировать в переменную. Однако рассмотрим этот крайний пример неупорядоченного списка <ul>, который содержит миллион <li> элементов:

$("#someList  li").each(function() {
    var id = $(this).attr('id');
});

Будет создано миллион новых объектов, что приведет к значительному снижению производительности, когда вы могли бы вообще обойтись без создания каких-либо новых объектов. Для атрибутов и свойств, которые согласуются во всех браузерах, вы можете получить к ним доступ напрямую, не заключая их в jQuery. Однако, если вы сделаете это, постарайтесь ограничить это случаями, в которых рассматривается множество элементов.

3) Всегда ли лучше конкретность?

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

$("#someElement") vs $("#someElement", "#elementsContainer")

Может показаться, что, поскольку мы также предоставляем контекст при поиске элемента по идентификатору, второй запрос будет быстрее, но все наоборот. Первый запрос преобразуется в прямой вызов нативного getElementById(..), а второй - из-за селектора контекста.

Кроме того, некоторые браузеры могут предоставлять интерфейс для доступа к элементам по имени класса, используя getElementsByClassName, и jQuery может использовать его для этих браузеров для более быстрых результатов, в этом случае предоставляя более конкретный селектор, такой как:

$("#someElement.theClass")

может быть помехой, а не просто писать:

$(".theClass")
9
Anurag 12 Июл 2010 в 18:00

До ваших вопросов:

  1. Кэширование объекта jQuery должно дать лучшую производительность. Это позволит избежать поиска DOM, что может привести к замедлению при многократном выполнении. Вы можете извлечь выгоду из цепочки jQuery - иногда нет необходимости в локальной переменной.
  2. То же самое касается $ (this), когда this является элементом DOM. Несмотря на то, что это самый быстрый способ получить объект jQuery, он все еще медленнее, чем кеширование. Если элемента DOM vanilla будет достаточно - тогда вообще не вызывайте jQuery. Пример с атрибутом id превосходен - предпочтительнее this.id, чем $ (this) .attr ('id), если вам не нужен $ (this)
  3. Более конкретные селекторы действительно уменьшат время поиска DOM. Тем не менее, действительно нужно провести черту - сделать селекторы более конкретными, только если вы уверены на 100%, что это заметно улучшит производительность.
4
Atanas Korchev 12 Июл 2010 в 17:49

Статья блога 2013 года о лучших практиках jQuery

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

Здесь рассматриваются вопросы, заданные здесь, и даже больше: функция анимации, обещания jQuery, лучшие способы импорта событий jQuery, jQuery и т. Д. Надеюсь, что это будет полезно для вас!

1
Bruno 7 Авг 2013 в 16:09