2010-01-10 12 views
7

buscando algunos consejos generales y/o pensamientos ...procesamiento paralelo frente a procesamiento del lado del cliente + ajax?

Estoy creando lo que creo que es más una aplicación web que una página web, porque pretendo que sea como una aplicación de Gmail donde se iría la página se abre durante todo el día mientras se "empujan" las actualizaciones a la página (para el interesado estoy usando la técnica de programación del cometa). Nunca antes había creado una página web tan rica en ajax y javascript (ahora soy un gran admirador de jquery). debido a esto, una y otra vez cuando estoy implementando una nueva característica que requiere un cambio dinámico en la UI que el servidor necesita saber, me enfrento con la misma pregunta:

1) ¿debería hacer todo el procesamiento en el cliente en javascript y publicar lo menos posible a través de ajax o 2) debo publicar una solicitud al servidor a través de ajax, hacer que el servidor haga todo el procesamiento y luego devolver el nuevo html. luego, en la respuesta ajax, realizo una tarea sencilla con el nuevo HTML

. Siempre me he sentido inclinado a seguir el # 1. esta aplicación web, imagino, puede ser muy hablador con todas las solicitudes de Ajax. Mi idea es minimizar al máximo el tamaño de las solicitudes y las respuestas, y confiar en que los motores de JavaScript mejoran continuamente para hacer la mayor cantidad posible de actualizaciones de UI y de procesamiento. He descubierto con jquery que puedo hacer tanto en el lado del cliente que no podría haberlo hecho antes. mi código de JavaScript es en realidad mucho más grande y más complejo que mi código de servidor. también hay calculcaciones simples que debo realizar y también las he impulsado en el lado del cliente.

Supongo que la principal pregunta que tengo es, ¿SIEMPRE debemos esforzarnos por el procesamiento del lado del cliente sobre el procesamiento del lado del servidor siempre que sea posible? Siempre he sentido que, cuanto menos tenga que manejar el servidor, mejor será para la escalabilidad/el rendimiento. deje que el poder del procesador del cliente haga todo el trabajo (si es posible).

thoughts?

+0

Lo viejo es nuevo y lo nuevo es viejo otra vez. :) – NotMe

Respuesta

0

Por supuesto depende de los datos, pero la mayoría de las veces si puede empujarlo hacia el lado del cliente, sí. Haga que el cliente haga más del procesamiento y use menos ancho de banda. (De nuevo, esto depende de los datos, puede acceder a los casos en los que debe enviar más datos para hacerlo desde el lado del cliente).

+0

en mi caso, los datos enviados nunca serán más para hacerlo en el lado del cliente. en la mayoría de los casos, todo lo que necesito hacer es enviar unos cientos de bytes como máximo y, en base a esos datos, el cliente puede reconstruir la pieza de interfaz de usuario necesaria. por supuesto, esto complica bastante el javascript (jquery lo hace razonable), pero si lo hice en el lado del servidor, la respuesta del ajax podría ser de miles de bytes ... – mdz

+0

El sitio será más receptivo y escalará mejor cuanto más puedas empujar a el lado del cliente. Sin embargo, el código del lado del cliente presenta sus propios problemas, como pruebas de unidad, seguridad, etc., pero definitivamente es el camino a seguir si es posible. – Myles

1

Estoy de acuerdo contigo. Empuje tanto como sea posible a los usuarios, pero no demasiado. Si tu aplicación se ralentiza o, incluso peor, bloquea su navegador, pierdes.

Mi consejo es que realmente pruebe cómo su aplicación actúa cuando se enciende durante todo el día. Verifique que no haya pérdidas de memoria. Compruebe que no haya una solicitud ajax creada cada medio segundo después de trabajar con la aplicación durante un tiempo (los temporizadores en JS pueden ser problemáticos en algún momento).

Aparte de eso, nunca se realiza la validación de entrada de usuario con javascript. Siempre duplicarlo en el servidor.

Editar

usar jQuery live binding. Le ahorrará mucho tiempo al volver a vincular el contenido generado y hará que su arquitectura sea más clara. Lamentablemente, cuando estaba desarrollando con jQuery todavía no estaba disponible; usamos otras herramientas con el mismo efecto.

En el pasado también tuve un problema cuando la generación de una parte de página que usa ajax depende de la generación de otra parte. Generar primera parte primera y segunda parte segunda hará que su página sea más lenta de lo esperado. Planea esto en frente. Desarrolle páginas para que ya tengan todo el contenido cuando se abran.

También (también en páginas simples), mantenga baja la cantidad de archivos a los que se hace referencia en un servidor. Únase a las bibliotecas de JavaScript y css en un archivo en el lado del servidor. Mantenga las imágenes en un host separado, mejores hosts separados (crear solo un dominio de tercer nivel también lo hará). Aunque esto solo vale la pena en producción; hará que el proceso de desarrollo sea más difícil.

+0

Lo bueno es que NO se utilizan temporizadores JS. no hay votación en absoluto. Es interesante ver qué tan rápido se compara el motor JS de Chrome con otros navegadores ... las cosas parecen suceder instantáneamente en Chrome, pero en realidad puedes ver cosas que suceden a veces en Firefox (en realidad no es una mala característica) – mdz

0

Algunas cosas, como las comprobaciones de seguridad, siempre deben realizarse en el servidor. Si tiene un cálculo que requiere una gran cantidad de datos y produce menos datos, también colóquelo en el servidor.

Por cierto, ¿sabía que podía ejecutar Javascript en el lado del servidor, renderizando plantillas y accediendo a las bases de datos? Echa un vistazo al ecosistema CommonJS.

0

También podría haber problemas de compatibilidad entre navegadores. Si está utilizando una biblioteca de navegador cruzado, del lado del cliente (por ejemplo, JQuery) y puede manejar todo el procesamiento que necesita, puede dejar que la biblioteca se ocupe de ello. Generar un servidor HTML cruzado en el servidor puede ser más difícil (tiende a ser más manual), dependiendo de la complejidad del marcado.

1

Existen varias consideraciones a la hora de decidir si los nuevos fragmentos de HTML creados por una solicitud de Ajax deben construirse en el lado del servidor o del cliente. Algunas cosas a considerar:

  • Rendimiento. El trabajo que su servidor debe hacer es lo que le debe preocupar. Al hacer más del procesamiento en el lado del cliente, reduce la cantidad de trabajo que hace el servidor y acelera las cosas. Si el servidor puede enviar un poco de JSON en lugar de un fragmento HTML gigante, por ejemplo, sería mucho más eficiente dejar que el cliente lo haga. En situaciones donde se envía una pequeña cantidad de datos de cualquier manera, la diferencia es probablemente insignificante.

  • Legibilidad. La desventaja de generar marcado en su JavaScript es que es mucho más difícil de leer y mantener el código. Incrustar HTML en cadenas entrecomilladas es desagradable de mirar en un editor de texto con coloreado de sintaxis establecido en JavaScript y hace que la edición sea más difícil.

  • Separación de datos, presentación y comportamiento. En la línea de la legibilidad, tener fragmentos de HTML en tu JavaScript no tiene mucho sentido para la organización del código. Las plantillas HTML deben manejar el marcado y JavaScript debe dejarse solo para controlar el comportamiento de su aplicación. El contenido de un fragmento HTML que se inserta en una página no es relevante para su código JavaScript, solo el hecho de que se está insertando, dónde y cuándo.

que tienden a inclinarse más hacia la restitución fragmentos HTML desde el servidor cuando se trata de respuestas ajax, por las razones de legibilidad y la organización del código que menciono arriba. Por supuesto, todo depende de cómo funciona tu aplicación, de la intensidad del procesamiento de las respuestas de Ajax y del tráfico que recibe la aplicación. Si el servidor tiene que hacer un trabajo importante para generar estas respuestas y está causando un cuello de botella, entonces puede ser más importante enviar el trabajo al cliente y renunciar a otras consideraciones.

+0

good points en legibilidad y separación Empecé a preocuparme porque mi javascript se ve bastante feo con fragmentos html y citas escapadas por todos lados ... comencé a sacar todo lo que pude y decalé los fragmentos HTML en otro archivo js de constantes ... – mdz

+0

Puedes mantener legibilidad de su código mediante el uso de XSLT para transformar XML en HTML en el lado del cliente. Dado que los documentos XSL se almacenan en caché, realmente le da un poco más de experiencia. La excepción, por supuesto, es que solo puede transformar XML utilizando un documento XSL. Todos los navegadores principales (incluido IE6) son compatibles con XSLT en el lado del cliente (aunque no necesariamente a través de javascript para las respuestas ajax). Obviamente, hay formas de evitar esto, pero tenga cuidado con las pruebas de compatibilidad adicionales. –

1

Actualmente estoy trabajando en una aplicación bastante computacionalmente pesada y estoy renderizando casi todo en el lado del cliente. No sé exactamente qué hará su aplicación (más detalles serían geniales), pero diría que su aplicación probablemente haga lo mismo. Solo asegúrese de que todos los códigos relacionados con la seguridad y la base de datos se encuentren en el lado del servidor, ya que al no hacerlo se abrirán agujeros de seguridad en su aplicación.Aquí hay algunas pautas generales que debo seguir:

  • No confíe nunca en que el usuario tenga un navegador o una computadora súper rápida. Algunas personas están usando Internet Explore 7 en máquinas antiguas, y si es demasiado lento para ellas, perderán muchos clientes potenciales. Pruebe en tantos buscadores y máquinas como sea posible.
  • Cada vez que tenga algún código que podría retrasar o congelar el navegador momentáneamente, muestra un mecanismo de retroalimentación (en la mayoría de los casos, un simple mensaje de "Carga" lo hará) para decirle al usuario que algo realmente está sucediendo, y el navegador no se congeló al azar.
  • intente cargue todo lo que pueda durante la inicialización y caché todo. En mi aplicación, estoy haciendo algo similar a Gmail: mostrar una barra de carga, cargar todo lo que la aplicación alguna vez necesitará, y luego darle al usuario una experiencia fluida de allí en adelante. Sí, tendrán que esperar potencialmente unos segundos para que se cargue, pero después de eso no debería haber problemas.
  • Minimiza la manipulación del DOM. El rendimiento de JavaScript crunch de números sin procesar puede ser "lo suficientemente rápido", pero el acceso al DOM sigue siendo lento. Evita crear y destruir elementos; en su lugar, simplemente escóndelos si no los necesitas en este momento.
+0

gracias por los consejos. ¿No puedes expandir el comentario de "caché todo"? No tengo experiencia en usar el almacenamiento en caché en el lado del cliente. ¿se refiere a los posibles complementos o simplemente a las variables globales? – mdz

+0

Lo que estoy diciendo es que no tires nada. Si haces un montón de cálculos, no tires los resultados después; mantenlos en la memoria para la próxima vez. No estoy hablando de usar complementos, simplemente variables o lo que sea, aunque podrías usar el almacenamiento del lado del cliente disponible en Gears y en la mayoría de los navegadores. –

+0

No usaría engranajes. A pesar de que tenía algo de bombo entre los desarrolladores. no es tan popular Si realmente necesita almacenar algo entre las solicitudes, considere usar cookies o almacenamiento en memoria flash debido a su mayor disponibilidad. –

1

Recientemente me encontré con el mismo problema y decidí ir con el procesamiento del lado del navegador, todo funcionó muy bien en FF e IE8 e IE8 en modo 7, pero luego ... nuestro cliente, utilizando Internet Explorer 7 tuvo problemas , la aplicación se congelaría y aparecería un cuadro de tiempo de espera de script, había invertido demasiado trabajo en la solución para descartarlo, así que terminé pasando una hora más o menos optimizando el script y agregando setTimeout siempre que sea posible.

¿Mis sugerencias?

  • Si es posible, mantenga los cálculos no críticos del lado del cliente.
  • Para mantener bajas las transferencias de datos, use JSON y deje que el lado del cliente resuelva el HTML.
  • Pruebe su script usando el mínimo común denominador.
  • Si es necesario, use la función de creación de perfiles en FireBug. Corolario: utilice la versión no comprimida (desarrollo) de jQuery.
+0

me alegro de haber publicado esta pregunta. recibiendo muchas buenas sugerencias y recibiendo confirmación de mis pensamientos originales. Yo también soy un gran creyente en mantener el servidor tan simple y delgado como sea posible, pero debido a eso, se ha incrementado sustancialmente la complejidad del código del lado del cliente. sin embargo, jquery lo ha mitigado TERRENAMENTE. también me gusta usar el administrador de tareas de Chrome. Hasta ahora, mi sesión de Chrome toma como 20 MB (gmail es 50), y la CPU llega a 15 en el punto más pesado durante mis cálculos de iteración.no debería volverse demasiado pesado desde aquí, así que creo que estoy bien. – mdz

+0

dynatrace tiene un excelente perfilador (¡gratis!) Específico para IE, puede ver exactamente lo que está tomando tanto tiempo, red, pintura, tiempo de secuencia de comandos, le dirá qué línea de javascript cuelga/recibe 100.000 llamadas, etc. ... Te recomendaría que tomes una copia, me ayudó mucho a solucionar los problemas de rendimiento de IE. http://ajax.dynatrace.com/ –

0

esto es posible, pero con la carga de la página intial pesada & & un uso intensivo de la memoria caché. tomar gmail como ejemplo

  • En la carga de la página inicial, descarga la mayoría de los archivos js que necesitaba para ejecutar. Y sobre todo en caché.
  • no sobre el uso de imágenes y gráficos.
  • Cargue todos los datos que se deben mostrar en la carga inicial y junto con los datos de usuario predecibles subsiguientes. en gmail & último correo yahoo, la bandeja de entrada no está poblada únicamente con el cuerpo de conversación de correo único, carga los primeros mensajes de correo electrónico completos por adelantado en el momento de la carga de la página. el secreto de la alta resolución viene con el costo (gmail pide que se cargue la versión ligera si el ancho de banda es bajo. Creo que la mayoría de nosotros lo hemos experimentado).
  • siga KISS principio. significa mantener tu diseño simple.
  • Y nunca intente renderizar toda la página utilizando javascript, en cualquier caso, no puede predecir a todos sus usuarios usando los sistemas de configuración alta o sistemas de ancho de banda alto.

Es inteligente dividir la carga de trabajo entre su servidor y su cliente.

0

Si cree que en el futuro podría querer crear una API para su aplicación (comunicándose con iPhone o aplicaciones de Android, permitiendo que otros sitios se integren con la suya), tendría que duplicar un código para todos esos dispositivos si vas con una implementación de servidor básica de tu aplicación.

+0

Sé que esta publicación es antigua, pero apareció en google cuando hice una búsqueda. – DudeOnRock

Cuestiones relacionadas