¿Cómo acelerar la recepción de respuestas HTTP utilizando jQuery Ajax en la publicación de datos de gran tamaño?

Question

Edición: pitón webapp2 + perfroms jQuery Ajax extremadamente malo en recibir respuesta de gran tamaño de datos de texto (se tarda más de 10 minutos en una ida y vuelta 1.7MB de carga útil)

Pregunta: cuál es la razón ? cómo mejorarlo? ¿podría utilizar alguna técnica bien probada para dividir el tronco del texto grande en pequeñas cargas útiles para evitar el problema del "navegador bloqueado"?

Antecedentes: He estado aprendiendo la programación web con Python webapp2 + Google App Engine. Estoy tratando de crear una zona de edición what-you-input-is-what-you-see con jQuery Ajax. Es muy similar al editor de pila stackoverflow: wmd-input vs wmd-preview que ofrece la función de vista previa en vivo. (Mantiene que indica 'borrador guardado' al texto corto Otro ejemplo es Google Docs en vivo función de edición.)

Mi ejemplo funciona así: Un TextChange plugin de jQuery dispara Ajax publicación desencadenada por cada cambio de área de texto de entrada ---> Servidores de Python reciben el texto y agregan algunos mensajes sobre él ---> Enviar de vuelta el texto + mensajes ---> jQuery usa la respuesta del servidor para actualizar la vista previa del área de texto (Bueno, enviando de vuelta el contenido completo del texto recibido es solo para fines de prueba.)

Mis códigos frontend:

<script type="text/javascript"> 
function simpleajax() { 
     $.ajax({ 
      type: 'POST' 
      ,url: '/simpleajax' 
      ,dataType: 'json' 
      ,data:{'esid':'#ajaxin','msgin':$('#ajaxin').val()} 
      ,cache:false 
      ,async:true 
      ,success:function (resp){$('#ajaxout').text(resp.msgout);} 
      ,error:function (jqXHR, textStatus, errorThrown){ 
       {$('#ajaxout').text("Ajax Error:"+textStatus+","+errorThrown)}} 
     }); 
    } 

$(document).ready(function(){ 
$('#ajaxin').bind('textchange', function() { 
    $('#ajaxstatus').html('<strong color="blue">Typing ...</strong>'); 
    simpleajax(); 
    }); 
}); 
</script> 

mis códigos de back-end:

class simpleajax(BaseReqHandler): 
    def get(self): 
     content={'pagealert':'simpleAjax get response'} 
     self.render_to_response('simpleAjax.html',**content) 

    def post(self): 
     esid=self.POST['esid'] 
     msgin=self.POST['msgin'] 
     msgout="Server noticed element " + esid + " value changed" + " and saved following message: " + msgin 
     content={"msgout":msgout} 
     self.writeout(content) 

caso de prueba y síntomas: servidor + texto sin cargas útiles locales

copie y pegue texto sin formato de menos de 500 KB en el área de entrada: funciona como un amuleto. sin embargo, un texto de 1,7 MB hace que el navegador esté ocupado en> 10 minutos, lo que parece no responder en absoluto.

Comparación: ¡Pego el mismo texto en el editor de publicaciones stackoverflow y la vista previa aparece al instante! Esta vez no noté ningún consejo guardado en borrador. Y hay algunos códigos de JavaScript que juzgan la longitud del texto aquí. Bien. Existe la posibilidad de que no haya comunicaciones del servidor involucradas. Pero es una solución no una solución a mi problema. (¡La función de guardado automático de Google Docs debe utilizar algún tipo de técnica para resolver el problema!)

Firebug seguimiento de los resultados xhr:

#Request Headers: 
Host: localhost:8080 
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:7.0.1) Gecko/20100101 Firefox/7.0.1 
Accept: application/json, text/javascript, */*; q=0.01 
Accept-Language: en-us,en;q=0.5 
Accept-Encoding: gzip, deflate 
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 
Connection: keep-alive 
Content-Type: application/x-www-form-urlencoded 
X-Requested-With: XMLHttpRequest 
Content-Length: 2075974 
Referer: http://localhost:8080/ajax 
Cookie: __utma=111872281.1883490050.1319630129.1319630129.1319637523.2; __utmz=111872281.1319630129.1.1.utmcsr=(direct)|utmccn=(direct)|utmcmd=(none) 
Pragma: no-cache 
Cache-Control: no-cache 

#Response Headers: 
Server: Development/1.0 
Date: Fri, 04 Nov 2011 03:29:05 GMT 
Cache-Control: no-cache 
Content-Type: application/json; charset=utf-8 
Content-Length: 1790407 

#Firebug Timeline: 
TimePoints  TimeElapsed  Actions 
0     1ms   DNS Lookup 
+1ms    1ms   Connecting 
+2ms    82ms   Sending 
+84ms   1.03s   Waiting 
+1.11s   14m22s   Receiving 
+14m23.11s      Done 

cosas interesantes:

1. jQuery Ajax envía 2 MB en lugar de 1.7MB de carga útil pura al servidor. ¡Qué gran sobrecarga! Podría ser debido a Tipo de contenido: application/x-www-form-urlencoded?
2. ¡El servidor tarda 1.03 segundos en responder y jQuery tarda 14 minutos en recibir la respuesta!

¿Qué está pasando detrás de esto? ¡Cualquier ayuda es apreciada! Me gustaría dejar que el servidor "envíe" muchas cosas al cliente después de una solicitud de Ajax, pero este problema lo hace imposible.

Answer 1

Considere el uso de una combinación de WebSockets HTML5 & Worker API para enviar/recibir datos de manera asíncrona del servidor sin afectar el rendimiento del subproceso de la interfaz de usuario.

http://dev.w3.org/html5/websockets/

http://net.tutsplus.com/tutorials/javascript-ajax/start-using-html5-websockets-today/ (el tutorial asume PHP a ser la tecnología del lado del servidor)

http://www.whatwg.org/specs/web-apps/current-work/multipage/workers.html

Otra opción

a) En mousedown & keyup

- record the cursor position in the text-box - store it in C1. 

b) En textchange

> record the cursor position - store it in C2. 

> send only the content between C1 and C2 to your server. Also send the values C1 and C2 to the server, i.e your AJAX payload will look something like: 

{ c1: C1, c2: C2, data: <text in the text-box from C1 to C2> } 

Tendrá que ver si c1 > c2, y obtener la subcadena de manera adecuada y viceversa

De esta manera, sólo "cambios" es enviada al servidor cada vez - no el texto completo. Pero si copia y pega 5 MB de contenido, esto no proporcionará ninguna mejora. Pero para los cambios de un solo carácter (como escribir, pegar pequeños segmentos, etc.) esto debería funcionar bastante bien.