jQuery html(), que actúa muy lento

Question

estaba probando algo que leí antes acerca de cómo aleatoria Math.random() realmente es, y quería mostrar 10000 números que se supone que es un número aleatorio entre 0 y 10000000.

Para ver la prueba, elegí simplemente unirme a la matriz de números aleatorios en una cadena con <br> entre cada número entero. Y luego acabo de hacer $("#"+elm).html(randomNumberString); que fue muy lento. Me di cuenta de que era la generación y clasificación de números aleatorios en una matriz. Pero a medida que comencé a colocar temporizadores en mi código, me pareció que era la salida lo que estaba ralentizando todo.

Así como una prueba que hice document.getElementById(elm).innerHTML = randomNumberString;

jQuery.html(): 2500ms getElementById.innerHTML: 170 ms

He intentado esto en todos los navegadores 5, y los números estaban muy cerca en todos los navegadores. ¿Estoy usando jQuery mal en este caso? También probé anexar y buscar el elemento antes de que comenzara el temporizador, así que simplemente podía hacer $(elm).html(), pero eso no ayudó. Parece ser la función real html() que está ralentizando todo ...?

EDITAR me terminó haciendo esto:

randomStringNumber = "<div>" + randomStringNumber + "</div>"; 

y ahora todo funciona mucho más rápido: jQuery.html(): 120ms getElementById.innerHTML: 80 ms

Aún más rápido sin embargo, usar oldschool html. Y si alguien tiene una respuesta sobre por qué envolverlo en un elemento es más rápido, agradecería que ...

Answer 1

25 de punta para mejorar su uso jQuery

http://www.tvidesign.co.uk/blog/improve-your-jquery-25-excellent-tips.aspx

http://acsenthil.wordpress.com/2011/07/04/improve-your-jquery-25-excellent-tips/

1. Cargar el marco del Código de Google
2. Usar una hoja de trucos
3. Combinar todas las secuencias de comandos y minify ellas
4. Utilice la excelencia de Firebug las facilidades de registro de consola prestado
5. operaciones de selección al mínimo por el almacenamiento en caché
6. Mantener la manipulación DOM al mínimo
7. envolver todo en un solo elemento al hacer cualquier tipo de inserción DOM
8. Utilice ID en lugar de clases siempre que sea posible
9. Dé a sus selectores un contexto
10. uso encadenar correctamente
11. Aprender a usar la animación correcta
12. Aprender sobre delegación de eventos
13. de uso Clases para almacenar el estado
14. Aún mejor, utilizar los datos internos de jQuery() para almacenar el estado de
15. Escribir sus propios selectores
16. Optimice su HTML y modificarlo una vez que la página se ha cargado
17. contenido de la carga perezosa para la velocidad y SEO beneficia a las funciones de utilidad de
18. uso jQuery
19. uso noConflict cambiar el nombre del objeto jQuery cuando se utilizan otros marcos
20. Cómo saber cuando las imágenes han cargado
21. usar siempre la última versión
22. ¿Cómo comprobar si existe un elemento
23. Añadir una clase JS a su atributo HTML
24. Retorno 'falso' para prevenir el comportamiento por defecto
25. Taquigrafía para el evento listo

Answer 2

Esto parece un limitation de la función html. En esta discusión la siguiente función fue sugerido como reemplazo:

$.fn.replaceHtml = function(val) { 
    var stack = []; 
    return this.each(function(i, el) { 
     var oldEl = el; 
     /*@cc_on // Pure innerHTML is slightly faster in IE 
     oldEl.innerHTML = html; 
     return oldEl; 
     @*/ 
     var newEl = oldEl.cloneNode(false); 
     newEl.innerHTML = html; 
     oldEl.parentNode.replaceChild(newEl, oldEl); 
     /* Since we just removed the old element from the DOM, return a reference 
     to the new element, which can be used to restore variable references. */ 
     stack.push(newEl); 
    }).pushStack(stack); 
}; 

Answer 3

La forma más rápida es la siguiente:

$.getJSON("/Admin/GetFolderList/", function(result) { 
     var optionsValues = '<select>'; 
     $.each(result, function(item) { 
      optionsValues += '<option value="' + item.ImageFolderID + '">' + item.Name + '</option>'; 
     }); 
     optionsValues += '</select>'; 
     var options = $('#options'); 
     options.replaceWith(optionsValues); 
    }); 

Según this link es la manera más rápida, ya que envuelve todo en un solo elemento al hacer cualquier tipo de la inserción DOM.