оптимизация jQuery / лучшие практики

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

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

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

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

и

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

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

$('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 +'">'); 
})

и

$('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 vs $(this)

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

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

гораздо менее эффективен, чем доступ к атрибуту DOM ванили this объект, как и следующий -

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

I поймите, что там происходит, мне просто интересно, есть ли эмпирическое правило, чтобы следовать при решении, какой использовать.

3) больше специфичности всегда лучше?

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

если вы сделали это настолько далеко, Спасибо за взглянуть! Если вы этого не сделали,: p ​

38
javascript jquery sizzle

6 ответов

я постараюсь ответить на них как можно короче:

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

  2. использовать this когда вам нужен только элемент DOM и $(this) при необходимости методы jQuery (это не было бы доступно в противном случае), ваш пример this.id vs $(this).attr("id") идеально, некоторые более распространенные примеры:

    • использовать this.checked вместо $(this).is(':checked')
    • использовать $.data(this, 'thing') вместо $(this).data('thing')
    • любой другой случай, когда создание объекта jQuery не полезно в основном.

  3. для производительности предпочтительнее удаление из селектора идентификаторов...как конкретно тебе нужно? Это полностью зависит, короче говоря:как вам нужно будь.

37

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

применяется ли это же правило при ссылке на $(this) jQuery?

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

2) это vs $(это)

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

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

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

3) больше специфичности всегда лучше?

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

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

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

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

$("#someElement.theClass")

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

$(".theClass")
9

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

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

4

ваши вопросы:

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

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

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

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

  2. это vs $(это)

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

  3. больше специфики всегда лучше?

    есть

3

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

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

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

1