Problema:
Construir 300 elementos “div” y acceder a ellos mediante la función document.getElementById y mediante la funcion $ de la librería Prototype. Comparar el uso de memoria en ambos casos y utilizando Internet Explorer 7 y Firefox 2.
Código de ejemplo:
document.getElementById()
objContainer=$("container");
for (var i=0;i<300;i++){
var div=document.createElement("div");
div.id="div_"+i;
objContainer.appendChild(div)
document.getElementById("div_"+i).innerHTML="Div "+i;
}
$
objContainer=$("container");
for (var i=0;i<300;i++){
var div=document.createElement("div");
div.id="div_"+i;
objContainer.appendChild(div)
$("div_"+i).innerHTML="Div "+i;
}
Uso de memoria (KB):
| Navegador | document.getElementById() | $ |
|---|---|---|
| Internet Explorer 7 | 16 | 12483 |
| Firefox 2.0 | 8 | 1888 |
Hmm, interesante comparativa, que bueno que no he cambiado al uso de $ en lugar de getElementsById.
Orale muy interesante, definitivamente prototype es una libreria muy pesada.
Por cierto en el primero ejemplo podrias reducir mas la carga de memoria evitando el $(”container”)
Saludos
[...] En busca de la memoria perdida, comparativa document.getElementById vs $ [...]
Como podes medir la memoria utilizada ?. Saludos.