ejemplos - La forma más rápida de agregar contenido HTML a un div mediante JavaScript
html title attribute (6)
Tengo una página HTML que utiliza AJAX para recuperar mensajes de un servidor. Estoy adjuntando estos mensajes a como se recuperan al establecer su propiedad innerHTML .
Esto funciona bien mientras que la cantidad de texto es pequeña, pero a medida que crece, Firefox utiliza toda la CPU disponible y los mensajes se ralentizan. No puedo usar un cuadro de texto, porque quiero que parte del texto se resalte en color o use otro formato HTML. ¿Hay alguna forma más rápida de hacer esto que no haga que el navegador se bloquee?
También he intentado usar jQuery, pero por lo que he leído, configurar .innerHTML es más rápido que su función .html () y ese parece ser el caso en mi propia experiencia, también.
Edición: el rendimiento percibido no es un problema: los mensajes ya se están escribiendo a medida que se devuelven (utilizando 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 importe.
"Todo está dentro de una mesa, pero espero que eso no importe".
En realidad importa mucho. Debido a la naturaleza de las tablas, una celda a menudo no puede representarse hasta que se calcule el ancho y el alto de todas las celdas de la columna y la fila. diseño de la tabla: lo solucionado lo supera a costa de bloquear el ancho y la altura de la celda según la primera fila.
En resumen, puede ser mejor no envolver en una tabla o si los datos realmente son tabulares, intente la representación de diseño fijo.
¿Puedes dividir tu texto y agregarlo en trozos? Envuelva partes del texto en etiquetas div y luego divídalos 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 resto se carga más tarde, probablemente fuera de la página visible.
Además, probablemente debería reconsiderar la cantidad de datos que está enviando e incrustando en la página. Si el navegador es lento, es probable que la cantidad de datos sea enorme, ¿realmente tiene sentido para el usuario? ¿O tendría más sentido una interfaz de paginación (u otro mecanismo de carga incremental)?
Continuando con la respuesta de Rick, ¿por qué no devuelve la información como JSON, de modo que puede hacerlo, usando setTimeout, y mostrar quizás 2-5 mensajes, luego llamar a setTimeout, luego hará el siguiente lote, hasta que JSON La matriz ha sido procesada.
Sin embargo, deberías usar innerHTML, así que tu javascript puede crear eso dinámicamente y agregarlo a la división, pero solo lo haría para el primer lote, para que todo salga rápido.
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 agregarlo al árbol dom.
La clonación será más rápida que la creación de nuevos elementos y no tendrá problemas si alguna otra cosa cambia el árbol de dominios mientras procesa.
Escribí algo similar, y fue un reto. Primero, necesitas aislar el problema.
¿Es el código de representación? Intenta comentar todo el renderizado y ver si el AJAX en sí mismo ralentiza Firefox. Si es así, intente diferentes enfoques para la representación, como se describe anteriormente.
¿Es la red? Intente comentar el Ajax, y simplemente ejecute su configuración innerHTML periódicamente. Si este es el problema, es posible que deba experimentar con diferentes configuraciones de tiempo.
Puede usar insertAdjacentHTML("beforeend", "<HTML to append>") para esto.
Here hay un artículo sobre su rendimiento que tiene puntos de referencia que muestran 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 escritura del artículo.
Usted dijo específicamente que estaba agregando el significado de 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 (vea este punto de referencia: jsben.ch/#/Nly0s ). Esto causaría que el navegador primero hiciera un concat de cadena muy grande (que nunca es bueno), pero aún peor, tendría que volver a analizar la inserción y renderizar todo lo que se había agregado anteriormente. Mucho mejor que esto sería crear un nuevo objeto div, usar innerHTML para poner en 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 renderizar el nuevo mensaje.