Ola, somos Arume

Desenvolvemos páxinas web, aplicacións para móbiles, capas de realidade aumentada e aplicacións para Facebook. Apaixónanos a informática e somos uns perfeccionistas incurables; por eso nos nosos proxectos utilizamos estándares.

tel. 625 519 694

Mendaña de Neyra, 34, 3º B, 15008, A Coruña

Autenticarse

Rexistrarse. Esqueceches o teu contrasinal?

Etiquetas

Saltar as etiquetas

Subscríbete ás RSS

Estás en:

  • Inicio >
  • Blog >
  • jQuery, optimizando para aumentar o rendemento: o DOM

jQuery, optimizando para aumentar o rendemento: o DOM

04 Abr 2012 por Luis

Comentarios: 3

jQuery

En artigos anteriores vimos como optimizar os selectores en jQuery e outras formas de optimizar jQuery para conseguir un mellor rendemento do noso código. Neste artigo trataremos sobre a manipulación do DOM, unha acción que é tan custosa que debe tratarse con moito coidado.

Recordar que, para a maioría de proxectos non é necesario refacer o código pero que sempre podemos ter en conta estas pautas en diante.

Minimizar a manipulación do DOM

A manipulación do DOM (append(), prepend(), after(), ...) é unha acción moi custosa xa que require do navegador que volva calcular e volva mostrar a árbore de elementos. Por esta razón, hai que intentar realizar este tipo de accións o menos posible. Se, por exemplo, queremos engadir un array de imaxes a unha lista, quizá se nos ocorrería algo así:

var arr = ["imaxe_1.jpg", "imaxe_2.jpg", "outra_imaxe_1.jpg", "outra_imaxe_2.jpg", "imaxe_3.jpg",
           "outra_imaxe_3.jpg", "imaxe_4.jpg", "imaxe_5.jpg", "imaxe_6.jpg", "imaxe_7.jpg"];
var list = $("#list");
$.each(arr, function(count, item)
{
	var img = "<li><img src=\"" + item + "\"></li>";
	list.append(img);
});

Con todo, facer tantas insercións no DOM é moi lento. Sería moito mellor acumular primeiro todo o que queremos engadir e facer unha soa inserción, deste xeito:

var arr = ["imaxe_1.jpg", "imaxe_2.jpg", "outra_imaxe_1.jpg", "outra_imaxe_2.jpg", "imaxe_3.jpg",
           "outra_imaxe_3.jpg", "imaxe_4.jpg", "imaxe_5.jpg", "imaxe_6.jpg", "imaxe_7.jpg"];
var tmp = "";
$.each(arr, function(count, item)
{
	var tmp += "<li><img src=\"" + item + "\"></li>";
});
$("#list").append(tmp);

Podemos comparar a diferenza de rendemento entre unha ou múltiples insercións no DOM en jsPerf.

detach()

Se é necesario realizar moitas tarefas sobre un nodo, o mellor é primeiro sacalo do DOM con detach(), facer todo o que sexa necesario sobre el e logo volver inserilo onde estaba. Con iso o que facemos é que o navegador traballe co elemento en memoria (máis rápido) e evitamos que teña que recalcular toda a árbore de elementos en cada acción.

var table = $("#table");
var parent = table.parent();
table.detach();

// Aquí realizaremos todas as tarefas necesarias na táboa fose do DOM

parent.append(table);

Podemos comparar a diferenza de rendemento entre usar detach() ou non en jsPerf.

Tamén deberiamos ter en conta á hora de usar ou non detach() o efecto de que o navegador repinte a páxina para cada acción que realizamos se non o usamos ou que o faga unha soa vez se o usamos.

appendTo()

Moitas veces necesitamos seguir usando un elemento logo de crealo. É habitual ver este esquema:

$("body").append("<div class=\"elemento\"></div>");
$(".elemento").click(function()
{
	// Código
});

Isto obriga ó navegador a crear un elemento, recalcular todo o DOM e logo volver percorrelo para atopalo. Sería moito mellor utilizar a función appendTo(), que fai o mesmo que append(), pero devolve o elemento inserido. Sería desta forma:

$("<div class=\"elemento\"></div>").appendTo("body").click(function()
{
	// Código
});

data()

jQuery ten a función data() para almacenar datos que podamos necesitar nos elementos do DOM. É moito mellor utilizar este recurso que almacenar os datos nos elementos e recuperalos cas funcións text() ou html().

var el = $("#elemento");
el.data("datos", 5);
var datos = el.data("datos");

Esta é a forma habitual de usalo, pero utilizar $.data() é máis rápido.

var el = $("#elemento");
$.data(el, "datos", 5);
var datos = $.data(el, "datos");

Podemos comparar a diferenza de rendemento entre usar $.data() e $.fn.data() en jsPerf.

Aínda $.data() é máis rápida que $.fn.data(), non sempre pode ser usado, xa que non acepta expresións como parámetro senón que hai que pasarlle un elemento.

Podes ler máis sobre este tema no noso artigo jQuery, optimizando para aumentar o rendemento: uso excesivo.

Comentarios

3 comentarios. Comentar.

1. Elias o 25 Xul 2012 ás 16:11:00

Muy interesante ... gracias por los tips...

2. Anónimo o 15 Feb 2014 ás 05:43:41

yo siempre agregaba los elementos dentro del $.each() :O gracias por la informacion

3. Miguel o 17 Ago 2015 ás 17:10:28

Buenas colegas tengo una consulta con un remove.

Tratare de explicar lo mas simple posible que es lo que pasa.

Supongamos que tengo estos divs

<div id='contenedor'>

<div id='item1'>Hola</div>

<div id='item2'>Chau</div>

<div id='item3'>Eh!</div>

</div>

puedo por ejemplo sacar un alert del item1 y funcionaria.

alert($('#item1').html());

El problema se da cuando quiero remover estos items y recargarlos.

Hago lo siguiente.

$('#contenedor').children().remove();

$('#contenedor').append('<div id='item1'>Soy Nuevo</div>');

el resultado nuevo seria

<div id='contenedor'>

<div id='item1'>Soy Nuevo</div>

</div>

Cuando quiero usar el nuevo valor de item1 me devuelve 'undefined'

alert($('#item1').html());

Alguien sabe porque podria darse esto??

Desde ya gracias por la ayuda

Comentar

Comentar de forma anónima

Podes comentar poñendo calquera nome ou alcume, exceptuando os nomes de usuarios rexistrados. Máximo de 50 caracteres.

Comentar como usuario rexistrado

Rexistrarse. Esqueceches o teu contrasinal?