Avisos de uso ineficiente do jQuery no IDE do PHPStorm

100

Recentemente, atualizei minha versão do IDE do PHPStorm e agora ele me avisa sobre o uso ineficiente do jQuery.

Por exemplo:

var property_single_location = $("#property [data-role='content'] .container");

Solicita este aviso:

Verifica se os seletores jQuery são usados ​​de maneira eficiente. Ele sugere dividir os seletores descendentes que são prefaciados com o seletor de ID e avisa sobre seletores duplicados que podem ser armazenados em cache.

Então, minha pergunta é:

Por que isso é ineficiente e qual é a maneira eficiente de fazer o seletor acima?

Eu acho que em:

var property_single_location = $("#property").find("[data-role='content']").find(".container");

Este é o caminho certo?

jquery jquery-selectors performance Scott
fonte

Respostas:

156

Eu tive a mesma pergunta hoje e consegui encontrar uma solução graças a Scott Kosman aqui .

Basicamente, a resposta é selecionar IDs individualmente e usar .find(...)para qualquer coisa abaixo. Então, pegando seu exemplo:

$("#property [data-role='content'] .container");

Mudar para isso deixa o PhpStorm feliz e pode evidentemente ser duas vezes mais rápido :

$("#property").find("[data-role='content'] .container");
MikeSchinkel
fonte
1
Para meu gosto $ ('[data-role = "content"] .container', '#property'); é mais legível.
03 de
26
@ n3rd Engraçado, não acho essa abordagem legível, mas dizem a cada um a sua.
MikeSchinkel
19

Eu acredito que a diferença entre os dois métodos ao usar versões recentes de jQuery e navegadores é insignificante. Construí um teste que mostra que agora é na verdade 10% mais rápido fazer um seletor combinado em vez de selecionar no id e encontrar um caso muito simples:

http://jsperf.com/jquery-find-vs-insel

Para a seleção de vários filhos por classe em qualquer profundidade, o "encontrar" parece ser mais rápido:

http://jsperf.com/jquery-find-vs-insel/7

Houve alguma discussão sobre isso nos fóruns da jQuery, mas tem 3 anos: https://forum.jquery.com/topic/which-jquery-selection-is-efficient Como eles apontam aqui, se você está fazendo muito operações no mesmo seletor de id, a maior melhoria de desempenho é encontrada armazenando em cache o elemento de nível superior. Por outro lado, se você estiver fazendo apenas algumas seleções, não haverá praticamente nenhuma diferença de desempenho.

Portanto, acredito que o IntelliJ está exagerando a importância desse estilo de código.

Leonya
fonte
4
Em seu primeiro teste, você está usando a seleção direta de decedent ">". Executei seu primeiro teste sem ">" e usar "localizar" é mais rápido. jsperf.com/jquery-find-vs-insel/12
beardedlinuxgeek
O que acho mais interessante sobre isso é que as versões mais recentes do Safari processam o método direto mais rápido em cerca de 25%. Não sei o que eles fizeram, mas aparentemente todos os outros navegadores não pegaram.
Uxonith
14

A primeira pergunta é clicar em Alt + Enter, selecionar a primeira dica na lista e, em seguida, clicar em Enter, você verá o que acha mais eficiente.

UnixAgain
fonte