Rendimiento: solicite JSON y renderice en JS, o solicite todo el HTML?

Question

Duplicar posible:
Why is it a bad practice to return generated HTML instead of JSON? Or is it?

Si envío una petición AJAX a un archivo PHP, lo que daría lugar a una representación más rápida de HTML:

1. El envío de la formateado por completo HTML directamente desde PHP, o:
2. Simplemente envíe datos JSON y permita que Javascript haga el código HTML ndering?

Tengo una estructura HTML bastante compleja, y esto pone el tiempo de descarga de un fragmento de HTML grande frente a los tiempos que JavaScript (jQuery) necesita para representar la misma estructura.

¿Hay alguna respuesta definitiva?

Answer 1

JSON es el camino a seguir. La red puede ser un gran cuello de botella, mientras que javascript es rápido para manejar cosas. La mayor diferencia será en conexiones lentas. Y definitivamente vale la pena analizarlo. Los nuevos navegadores ofrecen JSON nativo, por lo que debe ser loco rápido.

Una cosa más a tener en cuenta: innerHTML tiene un montón de bugs (tablas, formularios, etc.). En esos casos, tiene una gran cantidad de gastos generales para que funcione cross-browser. Los problemas pueden surgir inesperadamente, lo que hace que su aplicación sea menos estable.

JSON, sin embargo, le permite decidir si desea utilizar los métodos innerHTML o DOM según el contenido. Esta es otra gran victoria.

Answer 2

Yo diría que no. 2: de esta manera, le exige menos tensión al servidor y permite que el navegador del cliente haga el trabajo. Esto es mucho más rápido también, porque está transfiriendo menos datos.

Answer 3

Necesita medir, en computadoras rápidas y lentas. El JavaScript puede tardar más tiempo en renderizarse que el tiempo de transferencia de PHP +, pero depende de la velocidad del cliente (y de la velocidad de la conexión, y de la velocidad que PHP toma para producir el HTML).

Answer 4

Probablemente ninguna respuesta definitiva. Pero tenga en cuenta que, aunque desde la perspectiva de una solicitud, AJAX devuelve JSON es más ligero que la solicitud de toda la página con PHP. El procesamiento de la solicitud JSON y la actualización de los componentes de la página tienen una carga administrativa más alta.

¿Has considerado un híbrido? AJAX solicita que PHP devuelva pequeños fragmentos de HTML.

Answer 5

Vas a tener que medir los tiempos para su situación, ya que la respuesta dependerá de:

HTML representado servidor:

1. La cantidad de tiempo necesario en el servidor formatear los datos como HTML, bajo cargas altas y bajas.
2. La cantidad de tiempo necesaria para mover HTML formateado al cliente, bajo cargas altas y bajas.
3. La cantidad de tiempo necesaria para volver a dibujar su página con el formato HTML en el cliente, para clientes lentos y rápidos y navegadores.

cliente-HTML representada:

1. La cantidad de tiempo necesario en el servidor para dar formato a los datos como JSON, bajo cargas bajas y altas.
2. La cantidad de tiempo necesaria para mover los datos JSON al cliente, bajo cargas altas y bajas.
3. La cantidad de tiempo necesario en el cliente para procesar HTML a partir de los datos JSON, para clientes y navegadores lentos y rápidos.

Este es un caso donde una hora en el laboratorio ejecutando pruebas antes de la codificación podría evitar tener que volver a hacer todo más tarde.

[Agregado]

cada serie de mediciones (1, 2, 3) va a requerir un conjunto diferente de herramientas para capturar los datos. Escogería 3 conjuntos de datos representativos (el más pequeño, el promedio, el más grande) y luego, para cada conjunto de datos, realizaría cada una de las medidas enumeradas anteriormente. Tenga en cuenta que no necesita (y de hecho no debería) utilizar su aplicación completa; realmente solo desea el trozo más pequeño de código que hará lo que quiera. Luego buscaría las variaciones entre el servidor procesado y el cliente renderizado, y decidiría cuál (si existe) era más importante en mi aplicación.

NO podrá medir todas las combinaciones posibles, pero si elige el navegador más lento en la PC más lenta que pueda (por ejemplo: una netbook barata), y utilice la conexión a internet más lenta posible (Todavía tiene una cuenta de acceso telefónico de AOL para las pruebas, ¿no?) que tenderá a mostrarle el peor de los casos, que es lo que realmente le importa.

Answer 6

Primero tiene que comparar el tamaño en bytes del JSON frente al HTML.

Si el JSON no es mucho más pequeño, solo envíe el código HTML. Usar innerHTML de JavaScript para poner el fragmento de HTML en la página es muy rápido. Construir un árbol DOM a partir de algunos JSON será más lento.

En última instancia, la diferencia en el tiempo para el usuario es probable que sea insignificante, a menos que la cantidad de JSON/HTML sea realmente enorme.

Answer 7

Depende del tipo de sitio más que cualquier otra cosa imo.

• ¿Lo necesita para degradar con gracia?
• ¿Qué navegadores son los que probablemente utilizará su público objetivo?
• ¿Qué tipo de conexiones podrían tener?
• ¿Cuántas visitas tendrá el sitio?

Podría, por ejemplo, ser justo asumir que el sitio 'tech' será visitado por personas con computadoras más rápidas que usan navegadores decentes con conexiones rápidas.

Si usted tiene que apoyar IE6 entonces yo sería cauteloso de demasiada javascript, pero es algo que necesita ser probado realmente.

que tienden a hacer en el servidor por lo general, es sólo más fácil, pero por otra parte hago sitios de intranet bajo carga en general!

Answer 8

Esto realmente dependería del tipo de datos que está transmitiendo .. Si tiene elementos HTML estáticos en la interfaz que solo necesita completar con valores, JSON es la solución más rápida y fácil. Para esto, hay muchas, muchas, muchas bibliotecas JS del lado del cliente. Si este es su requisito, sepa que con este enfoque, su HTML ya existe, ya sea en la página o en la memoria del cliente como una plantilla (dependiendo de cómo lo haga)

En cuanto a la otra opción, lo haría sugiero que solo lo haga si tiene un HTML muy "sofisticado" o realmente dependiente del servidor que solo el servidor puede generar ... o si está incorporando HTML desde otro lugar que ofrece HTML.

La velocidad de generación de una respuesta depende totalmente de su servidor y de la manera en que está programado. Como JSON es más pequeño, generalmente es más rápido y hay numerosas bibliotecas JSON para todos los tipos de programación de back-end.

creo que usted debe buscar en algunos de los marcos JS más de interfaz de usuario centrada en que hay

Answer 9

Esto fue mencionado por Nicholas Zakas de Yahoo en su artical/hablar a una velocidad de 2010,

suena como si está en el rendimiento de javascript, así que vale la pena echarle un vistazo a las diapositivas/pdfs.

incluye cosas por Steve Sounders y un montón de gente que nunca ha oído hablar de:

http://en.oreilly.com/velocity2010

edición: si Rememer correctamente la conclusión fue html es generalmente mejor, debido a IEs lento JSON análisis sintáctico (creo!)

Answer 10

tener en cuenta que para el usuario, lo que realmente importa no es el tiempo total, pero lo que parece a ellos.

• Situación A) El usuario pulsa un botón, no pasa nada durante 2 segundos, los datos cargas.
• Situación B) El usuario presiona un botón , dice "por favor espere" o algo, luego carga datos 3 segundos después.

Para la mayoría de los usuarios, la situación A parecerá más lenta.

Así que cualquier cosa que haga, realmente tratar de conseguir el procesamiento progresivo de trabajo para usted por lo que el usuario ve que algo suceda lo antes posible.