Estaba probando algo que leí anteriormente sobre cuán aleatorio es realmente Math.random(), y quería mostrar 10000 números que se suponía que era un número aleatorio entre 0 y 10000000.

Para ver la prueba, elegí unir la matriz de números aleatorios a una cadena con <br> entre cada número entero. Y luego hice $("#"+elm).html(randomNumberString);, que fue muy lento. Solo pensé que era la generación y clasificación de números aleatorios en una matriz. Pero cuando comencé a colocar temporizadores en mi código, se hizo evidente que era la salida la que estaba ralentizando todo.

Solo como prueba hice document.getElementById(elm).innerHTML = randomNumberString;

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

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

EDITAR Terminé haciendo esto:

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

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

Sin embargo, aún es más rápido con html de la vieja escuela. Y si alguien tiene una respuesta de por qué envolverlo en un elemento es más rápido, agradecería que ...

13
peirix 30 jun. 2009 a las 16:11

3 respuestas

La mejor respuesta

25 consejos para mejorar tu uso de 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. Cargue el marco de trabajo de Google Code
  2. Usa una hoja de trucos
  3. Combina todos tus guiones y minifícalos
  4. Utilice las excelentes instalaciones de registro de consola de Firebug
  5. Mantenga las operaciones de selección al mínimo almacenando en caché
  6. Mantenga la manipulación DOM al mínimo
  7. Envuelva todo en un solo elemento al hacer cualquier tipo de inserción DOM
  8. Use ID en lugar de clases siempre que sea posible
  9. Dale contexto a tus selectores
  10. Use el encadenamiento correctamente
  11. Aprende a usar animar correctamente
  12. Aprenda sobre la delegación de eventos
  13. Usar clases para almacenar estado
  14. Aún mejor, use el método de datos internos () de jQuery para almacenar el estado
  15. Escribe tus propios selectores
  16. Agilice su HTML y modifíquelo una vez que la página se haya cargado
  17. Contenido de carga lenta para velocidad y beneficios de SEO
  18. Use las funciones de utilidad de jQuery
  19. Use noconflict para cambiar el nombre del objeto jquery cuando use otros marcos
  20. Cómo saber cuándo se han cargado las imágenes
  21. Utiliza siempre la última versión
  22. Cómo verificar si existe un elemento
  23. Agregue una clase JS a su atributo HTML
  24. Devuelve ‘falsa 'para evitar un comportamiento predeterminado
  25. Taquigrafía para el evento listo
7
Haim Evgi 9 abr. 2013 a las 11:01

Esto parece una limitación de la función html. En esta discusión, se sugirió la siguiente función 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 );
}; 
1
Darin Dimitrov 30 jun. 2009 a las 12:26

La forma más rápida es esta:

 $.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);
    });

De acuerdo con este enlace es la forma más rápida porque envuelve todo en un solo elemento al hacer cualquier tipo de inserción DOM.

4
Ricibald 1 jul. 2009 a las 08:51