Use seletores de jQuery ou JavaScript neste projeto? - javascript, jquery, performance, jquery-selectors, getelementbyid

Eu estou fazendo um projeto que inclui muitos elementos de criação e anexação, depois de um pouco de pesquisa eu descobri que

$(newElement) e $(selector)

são mais lentos do que

.createElement(newElement) e .getElementBy

Desde que eu estou fazendo um aplicativo de lista de tarefas que irá incluir muita criação / anexação / seleção deste:

<div class="mainTaskWrapper clearfix">
<div class="mainMarker"></div>
<label for="task1">This is task1</label>
<div class="holder"></div>
<div class="subTrigger"></div>
<div class="checkButton"></div>
<div class="optTrigger"></div>
<div class="mainOptions">
<ul>
<li id="mainInfo">Details</li>
<li id="mainDivide">Divide</li>
<li id="mainEdit">Edit</li>
<li id="mainDelete">Delete</li>
</ul>
</div>
</div>

O que você me aconselha a usar? Seleção de jQuery e forma de criação, ou um JavaScript?

Respostas:

Quando você diz "muita criação / anexação / seleção", o que exatamente você quer dizer?

É da ordem de vários por segundo, ou apenas "muito"? Como o código será executado no lado do cliente, um por segundo não será um grande problema.

O jQuery seria a melhor escolha, pois a manutenção é uma grande vantagem, e qualquer código que você escrever com o jQuery provavelmente será muito mais claro.

Depende um pouco do que mais você está fazendo. Em alguns casos, a configuração innerHTML é a mais rápida (especialmente com grandes blocos volumosos inseridos).

Dito isso, do ponto de vista do desenvolvedor, o método jqueryé realmente o mais sustentável. Eu provavelmente iria com a versão jquery até que o desempenho se torne um problema, e envolva as chamadas para jquery em outras funções que eu possa trocar quando isso acontecer.

É realmente uma questão de preferência do desenvolvedor.

Pessoalmente, eu acho estritamente usando jQueryos seletores são mais fáceis de escrever e entender e mais consistentes quando os seletores ficam mais complexos. Usar JavaScript nativo é mais rápido para compilar e renderizar, mas você pode não ver nenhuma diferença, dependendo da complexidade da sua página.

Eu aconselho você a não criar tantos elementos idênticos de uma só vez. Em vez disso, coloque-os uma vez no seu HTML e oculte-o (use display:none) e, em seguida, use o jQuery para .clone() o bloco inteiro, conforme necessário.

No entanto, primeiro, livre-se daqueles id= atributos. Você não pode ter mais de um elemento em uma página com o mesmo ID.