La forma más rápida de agregar contenido HTML a un div mediante JavaScript

Tengo una página HTML que usa AJAX para recuperar mensajes de un servidor. Añado estos mensajes a a como se recuperan estableciendo su propiedad innerHTML .

Esto funciona bien, mientras que la cantidad de texto es pequeña, pero a medida que crece hace que Firefox use toda la CPU disponible y los mensajes se ralentizan a paso de tortuga. No puedo usar un cuadro de texto, porque quiero que parte del texto se resalte en color o usando otro formato HTML. ¿Hay alguna forma más rápida de hacer esto que no bloquee el navegador?

También he intentado usar jQuery, pero por lo que he leído, la configuración .innerHTML es más rápida que su función .html () y ese también parece ser el caso en mi propia experiencia.

Editar: El rendimiento percibido no es un problema: los mensajes ya se están escribiendo a medida que se devuelven (usando Comet). El problema es que el navegador comienza a bloquearse. La cantidad de contenido no es tan grande: 400-500 líneas parecen hacerlo. No hay divs dentro de ese div. Todo está dentro de una mesa, pero espero que eso no debería importar.

Usted dijo específicamente que estaba agregando significado que lo está adjuntando al mismo padre. ¿Estás haciendo algo como:

myElem.innerHTML += newMessage; 

o

 myElem.innerHTML = myElem.innerHTML + newMessage; 

porque esto es extremadamente ineficiente (ver este punto de referencia: http://jsben.ch/#/Nly0s ). Haría que el navegador hiciera primero un concat de cuerdas muy grande (que nunca es bueno) pero que incluso peor tendría que volver a analizar el inserto y representar todo lo que había agregado previamente. Mucho mejor que esto sería crear un nuevo objeto div, usar innerHTML para ingresar el mensaje y luego llamar al método dom appendChild para insertar el div recién creado con el mensaje. Entonces, el navegador solo tendrá que insertar y presentar el nuevo mensaje.

¿Puedes dividir tu texto y anexarlo en pedazos? Envuelva porciones del texto en tags div y luego divídalas, agregando los divs más pequeños en la página.

Si bien esto no acelerará el proceso general, es probable que el rendimiento percibido sea mejor, ya que el usuario ve los primeros elementos más rápidamente, mientras que el rest se carga más tarde, presumiblemente fuera de la página visible.

Además, probablemente deba reconsiderar la cantidad de datos que está enviando hacia abajo e incrustándolos en la página. Si el navegador es lento, es probable que la cantidad de datos sea enorme: ¿tiene sentido para el usuario? ¿O tendría más sentido una interfaz de búsqueda (u otro mecanismo de carga incremental)?

Puede usar insertAdjacentHTML("beforeend", "") para esto.

Aquí hay un artículo sobre su rendimiento que tiene puntos de referencia que muestran que insertAdjacentHTML es ~ 150x más rápido que la operación .innerHTML += . Esto podría haber sido optimizado por los navegadores en los años posteriores a la redacción del artículo.

Siguiendo con la respuesta de Rick, ¿por qué no simplemente devolvemos la información como JSON, por lo que puede ir a través de setTimeout, y mostrar quizás 2-5 mensajes, luego llamar a setTimeout, luego hará el siguiente lote, hasta que el JSON matriz ha sido procesada.

Sin embargo, debe usar innerHTML, de modo que su javascript puede crearlo dinámicamente y agregarlo a la div, pero solo lo haría para la primera tanda, para obtener todo rápidamente.

Después de eso me gustaría clonar el primer lote y cambiar el innerhtml para cada uno de los otros mensajes, junto con otra información, y agregar eso al árbol dom.

La clonación será más rápida que crear nuevos elementos y no tendrás problemas si algo más cambia el árbol dom mientras estás procesando.

“Todo está dentro de una mesa, pero espero que eso no debería importar”.

En realidad, es muy importante. Debido a la naturaleza de las tablas, una celda a menudo no se puede representar hasta que se calculen el ancho y el alto de todas las celdas de la columna y la fila. table-layout: fixed soluciona esto a costa de bloquear el ancho y la altura de la celda en función de la primera fila.

En resumen, puede ser mejor no envolver en una tabla o si los datos realmente son tabulares, intente renderizar el diseño fijo.

http://www.w3schools.com/Css/pr_tab_table-layout.asp

Escribí algo similar, y fue desafiante. Primero, necesitas aislar el problema.

  1. ¿Es el código de renderizado? Intente comentar todo el renderizado y vea si el AJAX en sí mismo ralentiza Firefox. Si es así, pruebe diferentes enfoques para la representación, como se describe anteriormente.

  2. ¿Es la red? Intente comentar el Ajax, y simplemente ejecute su configuración de HTML interno periódicamente. Si este es el problema, es posible que deba experimentar con diferentes configuraciones de tiempo.