¿Qué usará menos tics de CPU: insertBefore vs innerHTML?

Tengo una lista de cientos de elementos que necesito actualizar y mostrar regularmente en dispositivos móviles (navegadores wekbkit móviles predominantemente). Es más fácil para mí generar todo el lado del servidor de listas y actualizar la pantalla del usuario con innerHTML. La lista es principalmente miniaturas de imágenes. No quiero que la pantalla parpadee demasiado o que sea un lastre para sus pequeñas CPU móviles. Mi pregunta es: ¿Qué funciona mejor en caso de actualización? <ul> lista, insertBefore + clasificación del lado del cliente o innerHTML de toda la lista?

preguntado el 21 de mayo de 12 a las 12:05

jsperf.com es un gran lugar para probar este tipo de cosas. -

Para lograr el mejor rendimiento, minimice la cantidad de solicitudes HTTP y manipulaciones DOM. Idealmente, desea realizar una solicitud Ajax para recuperar el código fuente HTML y una operación de manipulación DOM para agregar el código fuente a su página. -

4 Respuestas

La mejor respuesta es: escríbalo en ambos sentidos y perfilelo en sus navegadores de destino.

Sin embargo, en mis experimentos anteriores con esto, generalmente descubrí que al hacer una gran actualización, innerHTML fue notablemente más rápido que trabajar a través de la interfaz DOM. Lo cual tiene sentido: fundamentalmente, los navegadores analizan HTML en sus estructuras internas y muestran el resultado. Es su razón de ser y están altamente optimizados para hacerlo. Por el contrario, muchas llamadas DOM requieren muchos viajes a través de la interfaz interna de JavaScript/navegador, a través de una API que puede o no ser adecuada para las estructuras internas del navegador. Por supuesto, el panorama actual es bastante diferente al de hace unos años; Las actualizaciones de DOM son mucho más comunes y mucho más rápidas de lo que solían ser.

Pero nuevamente, esto varía tanto según lo que esté haciendo y sus navegadores de destino que es mejor crear una prueba representativa de cada forma y observarla empíricamente.

contestado el 21 de mayo de 12 a las 12:05

  1. Eso dependería de la implementación del navegador, no hay una definición o incluso una regla general para esto.
  2. Dudo mucho que alguien notara la diferencia.

Así que elige el que te resulte más cómodo y no pierdas un tiempo precioso debatiendo esto.

contestado el 21 de mayo de 12 a las 12:05

Es posible que desee ver esta página: http://www.quirksmode.org/dom/innerhtml.html y en un par de dispositivos móviles ejecute las pruebas y obtenga algunos números.

Pero, si le preocupa el rendimiento, ¿por qué no ordenar en el lado del servidor y enviarlo al cliente, de modo que cada nodo se pueda agregar con cualquier método, pero el dispositivo móvil no tiene que ordenarlo?

contestado el 21 de mayo de 12 a las 12:05

Si necesitas rendimiento puedes hacerlo de esta manera

  1. elimine el nodo principal del árbol DOM (la UL o el padre de la UL....)
  2. agregue todos los elementos secundarios (LI) a la lista a través de insertBefore o innerHTML. HTML interno es más rápido
  3. agregue el padre al DOM.

¿Por qué eliminar al padre del DOM? ¡Rendimiento! El navegador muestra solo dos veces la página. De lo contrario, representará la página para cada manipulación DOM, ¡cada inserción!

contestado el 23 de mayo de 12 a las 00:05

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.